How To Add Official Pin It Hover Button To Blogger

Pinterest is one of the best ways to share pictures from your blog by pinning it on pinterest boards listed by categories. Pinterest has its own official "Pin it" hover button which can be added to your blog/website and users can share it by clicking on "Pin it" button easily like in the below image.

If you're not using the board or profile widget, here are the steps to add the code :

1. Back Up Your Blogger Template :

-Go to Blogger dashboard -> "Template" and click the "Backup/Restore" button in the top right corner.

-Save the .xml file.

2. Edit your template by clicking the "Edit HTML" button. 

3. Search for the </body> Tag
4. Add the below code just above the </body> tag:

<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

5.  Save Template. 

That's it. You are done adding the "Pin it" button. You should see Pin it button appearing in the upper left corner of blog images when you hover your cursor over each image.

How to Remove the Button From Certain Images :

Two ways are there to remove the button from individual images. If you want to remove the button from an image and prevent your blog viewers from pinning the image, add the "nopin" attribute to the image.

To add the "nopin" attribute to an image in a post, compose in the HTML view of your post, and find the img src HTML markup for the image you want to "nopin". It looks like this HTML view of an image in Blogger:

Add nopin="nopin" right after your image's width attribute like below:

When you save your post, the Pin It button will disappear from that image. It also won't be pinnable through the Pinmarklet.

If you want to remove the button from an image, but still let pinmarklet users pin the image, you can directly add the data-pin-no-hover="true" attribute to your image link instead. It is similar process as for the nopin attribute, here you have to enter data-pin-no-hover="true" instead.

How to Remove the Pin It Button from Header Images :

Normally it should not happen to everyone, but some of our blog readers have the Pin It button appearing on their header image. This is a peculiar instance and this you would definitely like to remove it. For this, you need to add some extra code.

You have to back up your template again. Then, find the </body> tag again, and enter this code snippet directly above the </body> tag, after your Pin It button code:

<script type="text/javascript"> 

document.getElementById("Header1_headerimg").setAttribute("nopin","nopin");

</script>

Pinterest Support

Pinterest-created buttons are used in this article and it is an official way to add Pin it button. Hence you can get support directly from Pinterest if you require. You can read the documentation and contact Pinterest support here.

Note : The hovering buttons skip images with a width or height less than 250px. Not sure whether this is intended by Pinterest and it is worth getting in touch with them if it's affecting your blog/website.