How to add a hover over Pin It Button to your Blog

Todays tutorial will show you how to add a hover/mouse over pin-it button to your blog images on blogger. I show you two methods, one for the official Pinterest button and another for adding a custom button. This feature makes it really easy for your readers to save blog posts and images to their Pinterest boards that link back to your blog. It’s a great way to get some extra traffic to your blog from Pinterest! Another great way is to use Rich Pins, you’ll find a tutorial for that here.

official hover pin it button

1. Go to Pinterest dashboard and click the drop-down in the upper left hand corner. Choose Business > Tools and scroll down until you see “Make a Pin it Button”. Clicking this link should bring you there. Select the button type as “Image Hover”, select the appearance and press “build it”. Copy the entire code which will look similar to

<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

In order for Blogger to accept the code, we need to add we need to add ="true" to async and defer as shown below.

<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async="true" defer="true" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

2. Open your Blogger blog, go to Template > Edit HTML. Find </head> and paste the edited code in the previous step above </head>. If you have trouble finding the code in Blogger HTML Editor check out this post for help.

3. To remove the button from certain images and prevent your readers from pinning it, add the “nopin” attribute to the image. To do this go to your post or page, switch from compose view to HTML mode and find the img src markup for the image you’d like to make unpinnable. Simply add nopin="nopin" before the closing > like so

<img src="direct image link" border="0" alt="description" nopin="nopin">

4. This is Pinterests official button so you can contact them to get help here if you need to.

Custom hover over pin it button

1. First you’ll need to find a pin-it image that you want to use. I have 40 pin-it buttons available to download here or you could always create your own. Upload the image to a hosting site such as Dropbox, Photobucket, Flickr, etc.

2. Login to your Blogger blog and go to Template > Edit HTML > Format Template. Find </body> and add the following code from bloggersentral right above it.

<script>
//<![CDATA[
var bs_pinButtonURL = "DIRECT IMAGE LINK";
var bs_pinButtonPos = "center";
var bs_pinPrefix = " ";
var bs_pinSuffix = " ";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='https://dl.dropbox.com/s/jyzhf51ccqf7t9b/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

3. Enter the direct url of the button you uploaded earlier to DIRECT IMAGE LINK.

4. Change the position of the button by changing center to top left, topright, bottomleft or bottomright.

5. To add text for the pin description write it between the quotes " " for var bs_pinPrefix and var bs_pinSuffix.

6. If you already have a jQuery script loaded into your blog that looks similar to <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> for an image slider, scrolling effect or other feature then you don’t need this line. You can remove it.

7. To remove the button from a certain image simply go to your post or page, switch from compose view to HTML mode and find the img src markup for the image you’d like to make unpinnable. Add class='nopin' before the closing > like so

<img src="DIRECT IMAGE LINK" border="0" alt="description" class='nopin' >

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

52 comments

    • Ellie M on

      Hello darling! Sorry about the delay, I’ve been quite ill this week. If using the original button from Pinterest paste it above </head> Hope you and family are well πŸ™‚ x

      Reply
  1. WandaBarefoot on

    Ok I have yet another question. lol I added the pin it feature and it worked fine. Then I added the codes to shorten my blog posts automatically with a β€œread more” custom image and after adding the shortened posts my pin it feature isn’t working. The code is still there but when I hover over an image it just doesn’t show up. Any ideas?

    Sorry for the second post but I didn’t get a response so I’m trying again.

    Thanks!

    Reply
    • Ellie M on

      Hello, sorry I’ve been so busy with college finals since December so slowly trying to get through comments now – there’s just so many! lol The script for the pin it button and post excerpts are conflicting, currently trying out a few things to find a good solution so will update when I know more πŸ™‚ apologies! x

      Reply
  2. Shaunah on

    Hey, I give up, haha! I have been trying to figure out all day why I cant get this code to work. Please tell me what I am doing wrong.

    <script>
    //<![CDATA[
    var bs_pinButtonURL = "<img border="0" src="http://2.bp.blogspot.com/-fW4nUx9fCXM/UtmDxsrVmRI/AAAAAAAAArY/Wz9EANX5sNA/s1600/pinitBUTTON.png"/>
    ";
    var bs_pinButtonPos = "top left";
    var bs_pinPrefix = "Innovate2Evolve";
    var bs_pinSuffix = "DIY Evolution";
    //]]>
    </script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
    <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
    // This Pinterest Hover Button is brought to you by bloggersentral.com.
    // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
    // Feel free to use and share, but please keep this notice intact.
    </script>

    Reply
    • Ellie M on

      See the var bs_pinButtonURL line that should be written like var bs_pinButtonURL = "http://2.bp.blogspot.com/-fW4nUx9fCXM/UtmDxsrVmRI/AAAAAAAAArY/Wz9EANX5sNA/s1600/pinitBUTTON.png"; with just the image source, not the code.

      Reply
  3. xiaoyu on

    Ellie,

    Is there any way to get the image to stay the actual size when I hover over it? (custom pin) without removing the auto size post images code

    Thank you!

    Reply
    • Ellie M on

      Adding .pinimg { width: 312px !important;} to your CSS should correct it. However, I’d recommend resizing your images before uploading as auto-sizing your blog post images can affect your page load speed. They first load full size before being altered, so this will slow down your site πŸ™‚

      Reply
    • Ellie M on

      The only other thing I can recommend is removing the auto-sizing and re-sizing your images before uploading as the auto-sizing resizes everything within your post.

      Reply
  4. Claudia on

    Hey hey!

    On my blog, when you hover over the image while scrolling, the Pin It button that appears scrolls in front of the stationary NavBar along the top of my site instead of scrolling with the image behind it. I was wondering if it was possible to fix that and make the “Pin It” button scroll behind the NavBar? Thank you for all your help- your blog is my go-to for html instructions!!! πŸ˜€

    Reply
    • Ellie M on

      Hello, awh thank you. I don’t think so, unfortunately, because it only happens once you’ve scrolled and then hover over the image meaning the script for the pin it button is being called after the other code so it’s appearing over the navigation. You could add div.pinit-wrapper { z-index: 1 !important; } to your CSS and see if that works as a hack.

      Reply
  5. Rachael on

    I added the code above for the pin it hover button and clicked save template, but an error message comes up that says “Error parsing XML, line 1938, column 5: The element type “script” must be terminated by the matching end-tag “” What am I doing wrong? Here is what it looks like right now.

    Reply
    • Ellie M on

      Hello, did you add it directly above </body>, is the code when written in Blogger exactly right (quotes and other characters correct) and have you any other scripts there? πŸ™‚

      Reply
  6. LetΓ­cia on

    I love your tutorials!
    For this one though, nothing seems to work. The Pinterest Widget Builder gives me a code that looks nothing like this and gives me a syntax error on blogger (because of the “async” tag apparently) and the custom code doesn’t work (nothing happens).
    Any clues? Can’t figure out why Pinterest made it so difficult to just find the right code on their site.

    Reply
  7. Lisa on

    When I generate a code from pinterest I get a small code.
    I added above and its not working. πŸ™
    What am I doing wrong? Thanks.

    <!– Please call pinit.js only once per page –>
    <script type="text/javascript" async data-pin-shape="round" data-pin-height="32" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

    Reply
  8. Mandy Sybrowsky on

    Thank you so much for your updated instructions for inserting a hover pin-it button! Also, you are the only blog saying to put the code above the header tag–I tried several different instructions telling me to put it above the body tag and it never worked. I used to have this function and suddenly it stopped working, so I used your instructions and I’m back up and running with the hover pinterest button! Thanks!

    Reply
    • Ellie M on

      Awh happy to help πŸ™‚ placing code above the body tag usually never works for me for anything so I tend to avoid saying it in tutorials lol

      Reply
    • Ellie M on

      Hello, code can’t be used in comments so I cannot see what you added. To insert code please first paste it into the box here or here and press encode. Paste the output into the comment box in between <code> and </code>.

      Reply
  9. Athena on

    Ahh thank you so much for this tutorial! I just have one question. When I scroll down on my blog, the pin-it icon lays on top of my fixed nav menu, rather than going under it. I used your tutorials to build my nav menu. Is there anyway I can fix it, so that the nav menu will always be on top of everything when I’m scrolling up and down the site? Thanks!

    Reply
    • Elaine M on

      This is unfortunately a very common bug across all platforms using the hover over pin it button, the button appears behind the navigation unless it has been hovered over on scroll. You can try altering the z-index of the button and your navigation bar to make the nav sit on top of the button.

      Reply
  10. Ajnira Muminovic on

    Hi,

    I have a question, what to do if you resized images ( like I did) with pinterest button, because now pinterest image is huge as well, so I’m wondering is there anything I can do with that?

    Reply
  11. Kelley on

    Thank you so much for this article! I was going nuts trying to remove the “pin it” button from my header and sidebar image, and your tips worked perfectly πŸ˜€

    Reply
  12. Sandy on

    Hi, Thanks so much for this tutorial. I used it and if someone clicks on the images, it pins them, however, instead of the pin it button, there is a ‘?’ mark? Do you know why? There’s only one post but if you hover over an image in the post you’ll see what I mean.

    Reply
    • Elaine Malone on

      It seems like it can’t find the image from that URL. Have you any errors showing in your template editor? As it appears as if there’s an extra tag right above the script which may cause problems. Your pin it button is also very big, it’s about the same size as your blog photos. I’d recommend keeping it under 200px wide.

      Reply
  13. Vanessa on

    Hi Elaine! Thank you for this tutorial, yours are always my go to.

    I’m hoping you can help me with something, but I know you’re busy. It’s just that my Pin It button is returning ALL the post titles on the blog page in the Pinterest description box instead of just the post title of the post the image belongs to. So whenever you try and pin an image from http://withgreatheartcustom-joyce.blogspot.com/, it puts all 3 post titles on the homepage in the description box. Do you know why that is happening?

    At first I thought it was just not playing nice with the Archives widget, but even after I removed it, it was still showing multiple post titles.

    Any help is greatly appreciated. Such a small detail and yet so frustrating!

    Reply
    • Elaine M on

      Hey Vanessa, thank you so much. I have noticed this happening on some blogs where the script is collecting all titles when an image is being pinned from the homepage. It seems to only happen when using the script for custom buttons. I’ve tested the above script again and it is working normal on my test blog, I’m wondering if it is maybe conflicting with something else. Are you calling multiple jQuery librarys (step no.6)?

      Reply
      • Vanessa on

        Hey Elaine, thank you so much for replying! Yes, the custom button is the only time I have seen this problem too :/ I went into the HTML, and I don’t see any other jQuery libraries being called — I’m stumped! I really appreciate you taking the time to take a look. Hopefully I find a solution soon! If I do, I will post here in case anyone else is having trouble.

        Reply
        • Elaine M on

          I’d need to have a template in front of me with the problem to figure it out, but haven’t had this problem myself to do so. Are there any other features in your template, I’d recommend removing them and trying the Pinterest button again… it could just be conflicting with something.

          Reply
  14. Joanne on

    Hi, I used this but the image is stretched and takes up most of the screen.
    How can I resize it even thought it is the perfect size from photoshop?

    Reply