How to Add Image Hover Pinterest Pin-It Buttons on Your Site

By 24-04-2013   BloggingTutorials
Tweet Share Email Share  

Now it is easy to add image hover Pinterest Pin it buttons on websites. Pinterest is a rising social media star and promises to send good traffic to websites leveraging it users and social media connections the right way. So it is a good idea to integrate Pinterest sharing into your websites. But what is the easiest and simplest way to do that with a simple cut paste code…

Pinterest Image Hover Pin-It Buttons

A few site visitors noticed how easy it was to add our site images to Pinterest. We added a simple script and now when anyone get a mouse hovering over a blog image, a Pin it button appears…

Image hover pin it buttons

Advertisements

And when the button is clicked, a pop up appears which provides a way to Pin the image to your choice of Pinterest Board. (Try it on these images if you are seeing this page on our site)

Create Pin

It uses the ALT tag of the image as the title (so you need to choose the alt tags carefully) and will link the image to the post page. So when someone clicks the image post on Pinterest.com from your Board or people who have liked or repinned the image –  you get your site traffic.

get pinterest traffic

Recently Pinterest Analytics were launched, so you can also track for traffic increase. And if you do this well, you could get a decent constant source of traffic from Pinterest.

Earlier we tried adding Pin it buttons beside the Facebook and Twitter share buttons, but the code page requires you to specify an image url everytime in the code for the particular page – which would require some special coding or a plugin to do that. I particularly like this idea because when a visitor likes an images and hovers over it, the pin it button activates and fills in the url and image title automatically, allowing one click Pinterest sharing.  I have noticed the pin-it button does not appear for smaller images, but only for bigger images.

Pinterest now has made it much easier and we added their official Pinterest script at the bottom of  page footer below the </BODY> tags. In fact since it is an asynchronous script, you can also add it in the HEAD area of your HTML code and it will not slow your page loading.

<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.setAttribute('data-pin-hover', true);
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>

Cut and Paste the script and you are done. Well of course some people might also want to block Pinterest pins, especially if they host copyright images. Start building a Pinterest network on your site. I hope you follow us on Pinterest.

15 comments on “How to Add Image Hover Pinterest Pin-It Buttons on Your Site

  1. Great, I just added it in footer after Google analytics and and it working fine.
    Thanks,

  2. You can reuse your blog post images as the pin. You chose the blog post image because it conveys the idea of your post. However, taken out of context, the image can appear meaningless.

    • P. Chandra says:

      Very true. Sometime the alt tag would not convey the full meaning of the post. It would be better if the there was an option to choose the page title instead of the alt tag.

  3. Ann says:

    Thanks for writing this and even providing the script for people to just copy/paste and use.

    I found and “kingged” this post on Kingged.com

    Very helpful indeed for those who have been wondering how to do this, considering how important Pinterest is now to getting traffic!

  4. scot says:

    Do you have this function also for Facebook LIKE and Twitter?

  5. Rohan Mod says:

    thanks for sharing i have seen this on bloggersentral blog of greenlava.and see today o got the tricj which he was using.thanks for sharing

  6. As a photo-sharing platform, Pinterest is much more commerce-friendly than the majority of social networks. Provided that photos of your projects are interesting to look at, you can get away with posting them much more frequently than on other networks. By making all of your product images interesting, you can draw traffic.

  7. Thanks for sharing ! I add this code to my website :))

  8. Manike says:

    Thanks for writing this and thanks for sharing…..)))

  9. Jan Gillum says:

    Love Pinterest and thank you for making this easy to understand!

  10. Daniela says:

    Unfortunately I can’t get this to work in Blogger. Any ideas/ suggestions? Thanks!!

  11. vic says:

    there’s pretty much no reason any site with decent images shouldn’t be doing this. don’t rely on people to have a browser plugin–make it easy for your users!

Leave a Reply

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

css.php