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' >