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

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

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.

Share with friends

15
Leave a Reply

avatar
11 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
13 Comment authors
vicP. ChandraDanielaJan GillumManike Recent comment authors
  Subscribe  
Notify of
Madhav Tripathi
Madhav Tripathi

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

Jeffery U. Murphy
Jeffery U. Murphy

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.

Ann
Ann

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!

scot
scot

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

Rohan Mod
Rohan Mod

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

Melinda Blackwell
Melinda Blackwell

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.

חדשות ומבזקים
חדשות ומבזקים

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

Manike
Manike

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

Jan Gillum
Jan Gillum

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

Daniela
Daniela

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

vic
vic

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!