How to Add a Custom Pin It or Save Button to Your Blog Images

As I’ve mentioned in how I grew my Pinterest visibility by 500% post, Pinterest is one of my largest source of traffic and it’s a game changer for most bloggers. Key to blog success on Pinterest is sharing Pinnable blog post images, so having vertical images, with large text, your website address, and brand colours/photos.

Adding custom pin it button to your blog images, is another way to get people to pin your content more often. The custom Pin it button will appear when they hover a mouse over your images.

Custom pin it button is a great way to expand your brand further, add more personality to it and use it as a distinctive element of your blog, which people would easier remember than the generic, red Pin it button available for all business owners.

Pinterest recently changed its iconic Pin it button to Save, so I’m not sure how many of you still using Pin it buttons (I do) and how many changed to Save buttons, so as a freebie in this post, there are Pin it buttons as well as Save buttons

I’ll teach you today, how to add your own, custom, an on-brand button so you can get more repins from your blog. Let’s dig in!

This post contains affiliate links marked with (*) for products I recommend. If you decide to make a purchase, I will earn a commission at no additional cost to you. Thank you for your support!

How to Add a Custom Pin It Button to Your Blog Images?

1. Find or create Pin it button you’d like to use on hover of your blog post images

If you feel comfortable designing your own Pin it button, it can be created in Photoshop* or Illustrator* (my personal favourite)

2. Install the jQuery Pin It Button for Images Plugin for WordPress.

Within the WordPress admin, go to Plugins > Add New and search for jQuery Pin It Button For Images. Install and activate the plugin.

3. Set up where the Pin it button should be shown

Once the plugin is installed go to > Settings > jQuery Pin It Button For Images

4. Set the Selection settings

Now you’ll see four tabs, but we’ll only set up setting from “Selection” and “Visual”. In the “Selection” tab, set up “On which pages the “Pin it” button should be shown.” I have the “Single posts” checked, so my custom Pin it button is showing only when someone click on a specific post. If you’d like you can change all of the checkboxes, but to be honest, Pin it button is useful mainly for your blog posts.

5. Set the Visual Settings

This is the fun part! Before we add custom Pin it button, let’s set up some basic setting, shall we? So we want to show button “On hover”, as a Description source set up “image alt attribute”. If you’re consistent in adding alt attributes, choosing that, will allow you to customize the description however you like. Also, make sure to check “Always link to individual post page”

6. Adding custom Pin it button

Next, scroll down to Transparency Value, which will fade your image on hover. I recommend to choose the low value, I have it set up at 0.2. It catches the attention to a custom Pin it button, but it’s not distracting to a reader.

The most important part – In “Custom “Pin it” button section, check the box that says Use custom image. Then click on the button that says “Upload an image using media library” and upload your custom image. The image size will automatically set to the size of the uploaded image size, but you can manually change it here. My image was 417×417, but I’ve resized it to 250x250px. It depends on your personal preferences, how big you want this pin is a button to be.

7. Adjusting the custom button

Next, you’ll want to choose how to align your pin it button on your blog post image. I personally prefer to have it in the middle, so the “Button margins” part doesn’t apply to it. If you chose to display your Pin it button in one of the corners, you’d have to set up button margins, for example for top right, the settings might be: top 40px, bottom 0px, left 0px, right 60px. The alignment will depend on your personal taste preferences and the style of your blog. You can also check “Optimize for high pixel density display”, so your button won’t get pixelated on screens with a larger resolution. Once you’ve got the settings set up how you want, click “Save Changes” and yay you did it! It was easier than you thought, right?

8. See your custom button in action

Now refresh your post page and see how your custom Pin it button looks in action! See, how you can improve your blog design with this simple trick? You no longer have to use standard, red button, which let’s face it –  doesn’t fit all blog designs. What is the best part? You can always change your custom Pin it button! If you have multiple brand colours, you can test out which button performs the best on your blog.

With custom Pin it button on your blog images, your post will be pinned more often and your blog will get more attention on Pinterest.

Are you using a custom pin it button on your blog? Share them in the comments below, I’d love to see them!