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.

Here you 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.

pin-it-button-upload-image

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.

pin-it-button-change-placement

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?

Comments

  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.
    Lisa Howard recently posted..Oh How Times Have Changed!

  2. 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!

  3. 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!
    Missy recently posted..The Method of the Message

  4. Belinda says

    Melissa –

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

    ~B

  5. 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!
    Courageous Jane recently posted..Forgiveness Revisited

  6. 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!

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge