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.

How to Add a Custom Pin It Hover Button to Your Blog Images (plus free buttons). It's so easy to do!

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. :)

How to Add a Custom Pin It Hover Button to Your Blog Images (plus free buttons). It's so easy to do!

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

Share this gem!Pin on Pinterest636Tweet about this on Twitter6Share on LinkedIn0Share on StumbleUpon0Share on Facebook21Buffer this page


  1. says

    Thank you! Thank you! Thank you! Adding a Pin It button to my images was at the top of my blog To Do list I created this weekend. I was so excited to see the how-to in my inbox this morning. Please don’t tell my boss, but I stole 10 minutes from my 9 to 5 to make the changes to my blog. That simple. That quick. You never disappoint, Melissa! By the way, thanks for the cool Pin It buttons! I used the teal heart.

  2. says

    Can I say thank you SO much! I’ve been wanting to do this forever but I just needed someone to walk me through it. You’re the answer to my prayers. Thanks again! :)

    • Melissa Culbertson says

      Sometimes we just need a nudge, don’t we? I see you used the red heart– looks great!

  3. says

    Thank you for this Melissa! I have been using the jQuery Pin It Button for Images plugin for quite some time and really love it … but your customized button makes it even better! I used the red heart-shaped on. Fab! And your instructions were dead easy to follow. Worked perfectly for me! Cheers!

    • Melissa Culbertson says

      I just used your new button to pin your Tearoom Cake posts! Glad it worked so easily!

  4. says

    Thanks for the tutorial, Mel. I was already using this plugin but didn’t have a custom button. Not sure which one to choose, but sure am happy to know I can make it work!

  5. says

    Thank you, Thank you, Thank you! I couldn’t figure out how to get it to show without the white in the background. It actually didn’t show as transparent for me but no worries! I’m glad to have my pin it button all the same!

    • Melissa Culbertson says

      Glad you got it to work! My first image (with the blog post title) does have a white background but the second image with just the buttons is a PNG file with a transparent background. JPGs will not be transparent so make sure you save your button as a PNG if you want no white background. Regardless, yay for buttons!

  6. says

    How timely! I was just trying to figure out how to do this this past week. Thank you! I’m going to give it a try tomorrow. :)

    • Melissa Culbertson says

      You’re welcome, Kelly! Happy to find a well-written post to help Blogger users!

  7. says

    Oh Mel – I love how you make things like this a snap! (My eyes TOTALLY glazed over – but I feel confident that I can master this one with a little more practice.) Thank you for providing buttons for us (and explaining how to use them.) You are a such a fountain of knowledge!

  8. says

    Have I told you lately that I love you? You are awesomesauce! I’ve been wanting to do this for a while and just haven’t had time to research how to do it. I was SO happy to see this sitting in my inbox!

  9. Belinda says

    Melissa –

    Thank you! I look forward to using these after I finish working my way through your Blog Design for Dummies!


  10. says

    I’m so thankful that I found you and your site! What a blessing! Using your extremely clear instructions, I just walked myself through this procedure in less than a day (the typical length of time it takes me to do anything blog related!). Can’t wait to see what else you can teach me! THANK YOU!

  11. says

    Thanks so much for this tutorial! So easy to do! Do you recommend still having a Pinterest button at the top of your page too?

  12. says

    Thank you so much for posting this. I’ve read other tutorials on how to have your own custom image, but I I could never figure it out. Yours made it SO easy. Thanks again!

  13. says

    Thank you so much for this information. I tried it and had a problem. On my website, I have all my images linked to the area for readers to leave their comments. When I installed this plugin, it did put the Pin It icon on my images, but when my image was clicked on, it just shows a larger image, and doesn’t go to the comment section? Do you know what I can do to prevent this from happening? Thank you!

  14. says

    Oh my goodness – thank you so much for this. Been trying to figure this out for ages :-) All done and customised on my website now. Thanks

  15. says

    Thank you so much for this post. I tried 3 different plugins for wordpress and wasn’t happy with it until I found your post and the beautiful pin-in buttons. Thank you so much! 😉

  16. says

    Thank you for the tutorial. I made the website ( for my friend’s business and I used your tutorial to customize the “pin it” button to match her design scheme!