How To Add Pinterest Hover Pin It Button on Blogger or Wordpress Blog Images?

Hi Friends! I am back with an interesting tutorial to add Pinterest’s Pin it button on the Blogger or Wordpress blog’s images. Whenever you or your visitors will scroll the mouse pointer over the blog post images then the Pin-it button will appear on the images. No doubt that Pinterest is one of the popular social networks. As I always say that social networks play an important role for every blog, website or business. Pinterest will also help your blog to get more social media traffic.

After the demand from a reader of HiFiFun.Net, I am publishing this post with step by step guide to add hover pin it button in your blog. I started this blog just to help newbie bloggers. So friends if you also have some demands like you want to add some widgets or plugins in your blog and their tutorials are not available on HiFiFun.Net then you can ask for those tutorial through comments. I will try to help you by publishing your demanded tutorial.

What are the features of this widget?

Before adding this widget in your blog, go through the main features of this widget.

• This will automatically pickup the correct post title and url from your blog.
• This will also add the description of your post in the pin.
• You can select the pin it button’s position.
• You can change the pin it button and add the button of your choice.
• You can prevent pin it button from appearing on certain images.
• You can add prefix and suffix to you pin.
• This widget is compatible with all popular browsers like Chrome, Mozilla, Firefox, Opera, Safari etc.
• Work with almost all Blogger and Wordpress Templates.

Demo

Just scroll over the image published below and see the hover pin it button demo.

Steps to Add Hover Pin It Button to Blog Images

1. Blogger users select your blog and go to Tempalte > Edit HTML. And Wordpress Users go to Administration > Appearance > Editor > footer.php.
2. Now find the </body> tag in the template.
3. Copy the below given code and paste it just above the code your found in the previous step.
4. Save your template.
5. That’s it!

Hover Pin It Button Code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQJS1QlF8d2b1T6-lCTtA7Hg6qK3JDIBpnPPzN2YzltIXyfOfS2gp9nIqnAUYdzL1TsvROsivrW5w6eso2nx9w4KTRq0bLKNBhEqDGkrD_Tp9TlDPV2inR9aKNkG-xo2T2XoA6DPqn34da/s1600/pinterestx1_72.png";
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 id='bs_pinOnHover' src='https://googledrive.com/host/0B-dv4rsl5_uZZVhyWDRXY29ENWs' type='text/javascript'>
// This Pinterest Hover Button is brought to you by hififun.net.
// Visit http://www.hififun.net/2014/02/how-to-add-pinterest-hover-pin-it-button-to-blog.html for details.
// Feel free to use and share, but please keep this notice intact otherwise this will not work.
</script>
</b:if>

Customize Hover Pin It Button

You can customize this widget. Just follow the below given instructions.

Change Pin It Button

Just replace the highlighted purple color code from line 4 with your own button’s url.

Change Pin It Button Position

Simply replace the red colored code ‘center’ with the below given positions:

• Topleft
• Topright
• Bottomleft
• Bottomright

Prevent button on some images

You can prevent the pin it button to appear on some images. Just assign ‘nopin’ class to img tags. Eg. <img class=”nopin” src=”#”/>

Add Suffix or Prefix

You can also add prefix and suffix to the pin description. Add your prefix and suffixes to the blue colored tags in the above given code. Eg.

var bs_pinPrefix = "YOUR PREFIX";
var bs_pinSuffix = "YOUR SUFFIX";