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

I don’t know about you but Pinterest is one of my top sources of traffic. Trust me when I say this: you want to do everything possible to get readers to pin your blog posts to Pinterest!

Sure many readers will use their browser’s Pin It bookmarklet or the Pin It button within your social sharing buttons, but savvy pinners expect to pin an image just from clicking on it.

In this post, I’ll show you how to add a Pin It button that appears when someone hovers over an image. Not only that, I’ll also give you some free Pin It buttons that you can use on your blog. (Psst- it’s a breeze.)

Adding a Custom Pin It Hover Button

As you’l find out in just a second, this tutorial is for the self-hosted version of WordPress. (If you’re on Blogger, you can try this tutorial from Digital K blog.)

1. Download and install the jQuery Pin It Button for Images plugin. 

If you already have another Pin It button plugin for images, you can see if it allows a custom image, but many do not. This jQuery one offers a lot of customization options without having to mess with code. It’s a good plugin for the code squeamish.

2. Visit the plugin settings page. (Settings > jQuery Pin It Button) and select the Visual Options tab.

First, change Mode to Dynamic. This will ensure you (and others) can pin directly to Ahalogy. If you aren’t familiar, you should check it out!

On this tab, you also have some settings you can adjust such as how transparent you want your images to be when someone hovers over them. I have my transparency value set to .5 (mouse over one of the images in this post to see how it looks). Once you’ve adjusted any of these settings, mosey down to the Custom “Pin It” Button section.

3. Check the box “Use a Custom Image.”

4. Add your custom Pin It image.

If you don’t already have a custom image in mind, I give you a few freebie buttons at the end of this post! Here you have two options to select your image:

• Upload your custom Pin It button to your media library
• Add a URL where the image is located

I chose to add the URL because I like my core blog design elements in their own folder on my server versus within the Media Library. I uploaded the image to my server via FTP. (Don’t worry if that just made your eyes glaze over– just use the Media Library and forget I even mentioned FTP!)

5. Enter dimensions of your image.

*IMPORTANT*: You must enter dimensions for the button in order for it to display. Although my button’s actual dimensions are about 100 px by 100 px, I wasn’t sure I’d want it that large. Turns out, I was right. I decided on 64 px by 64 px. While you can upload a slightly larger image than what you use, don’t upload a gargantuan sized-file. Your blog will revolt since those images take longer to load.

Once you input your dimensions, click Refresh Preview and you’ll see it display. If you aren’t happy with the size, just tinker until you’re happy.

6. Adjust the location of your custom Pin It button.

Under the section “Pin It” Button Position, you can decide whether you want the Pin It button to display at Top Left (default), Top Right, Bottom Left, Bottom Right, or Middle.

Under the “Pin It” Button Margins section, you can tweak the amount of pixels around your button (but you may not even need to). For example, if I had a ribbon-style button that I wanted to touch the top of the image, I would adjust the top margin to 0 px. Depending on the button you use, you may or may not mess with these settings.

NOTE: If you aren’t sure how many pixels to adjust the margins, you can always play around in Firebug. Just save your current changes, then view your blog in Firebug to see how the button looks. If you aren’t familiar with the gloriousness of Firebug, I cover it in Blog Design for Dummies. Don’t you know it!

7. Click the Save Changes button.

Virtual high-five. You did it!

20 Free Pin It Buttons!

Want a custom one of your own but don’t have time to create one? Use one of these pretty darlings. Download the set right here (right-click to save it). Open it in your fave photo-editing program and just crop out the buttons you don’t want. And by the way, this is a PNG file so the background will be transparent, not white. Just how you’d want it. 🙂

Do you have a custom Pin It hover button on your blog? Think you’ll add one?