pinterest pin it button on image hover

pinterest pin it button on image hover
Due to numerous requests from our readers, here we present yet another Pinterest pin it button widget. This time a button that appears when you mouseover or hover any image in your posts. Pinning an image just got easier and more intuitive with this hover button. First you decide which photo to pin, then hover it to invoke the pin it button, and finally click on the button that appears on the image.

Use the photo below as a live demo. Click on the button and see how the pinning works.

Below are some of the features of the Pin It button on hover widget:

• Auto pick up the correct post title and post URL. It doesn’t matter if you pin it from a post page or from a multi-post page (e.g. homepage).
• Auto fill in the pin description with the title of the post.
• Can opt to use your own button. Make your own bigger, cooler pin it button or you can get free Pinterest buttons here.
• Select your preferred button position (relative to the hovered image) from five available positions.
• You can now prevent the button from appearing on certain photos.
•  You can now add your own text as prefix and/or suffix to the post title in pin description. This is in response to readers asking to add their blog title to the pin description.
• Cross-browser compatible -works on Firefox, Chrome and Internet Explorer (albeit in a slightly different manner) too.
• Should work on most Blogger, WordPress and Typepad templates. It doesn’t work on Blogger Dynamic Views or mobile templates though.

 Replaced backlink with attribution comment.
 Fixed this bug: Pinning doesn't work if a page is entered via the "read more" link i.e. the post's URL has "#more" at the end.

Let’s proceed with the tutorial,

1. Blogger: Go to Template > Edit HTML.
   WordPress: Go to Administration > Appearance > Editor > footer.php.
2. Locate the </body> tag near the bottom of the template.
3. Copy the code below and insert it right above the tag.
4.  

5. <script>
   //<![CDATA[
   var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIDfXx4ErTDhLl8WDFGN1b1jDYDiZLgZGkO7A7HG57VDkg3LTfzv-xtyypfDe-vOefyxIoXv1xI14uI0s8H62e1iMiPwNJkLixaO7fLi2KutSGc7VtCwZA5wb3ddrsArvZ2jIj4luCxItN/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>
   <script id='bs_pinOnHover' src='https://sites.google.com/site/madebybloggers/code/bs_pinOnHoverv1_min.js' type='text/javascript'>
   // This Pinterest Hover Button is brought to you by bloggersentral.com.
   // Visit http://madebybloggers.blogspot.com.br/2013/08/pinterest-pin-it-button-on-image-hover.html for details.
   // Feel free to use and share, but please keep this notice intact.
   </script>
   

   • Code line 7 9 is for loading jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. Hint: If your blog has an image slider, carousel or something with fading effect running, chances are it is powered by jQuery. If this widget doesn’t work, the first thing you want to do is comment out or remove this line.
   • To use your own button, replace the URL in line 3 with the direct link URL to the image. Make sure to keep the quotes.
   • To reposition the button, replace center in line 4 with the new position as listed below: To block the button from appearing on an image, assign “nopin” class to the image tag, like this:
   • 
      

     <img class='nopin' height="391" border="0" width="400" src="http://1.bp.blogspot.com/-YCbNO9wFQrQ/UPrZegPAXVI/AAAAAAAACK8/b7p-0NuZScI/s400/photo.jpg">

     You can also block it from multiple images at once. Simply wrap the image tags in a div tag and assign “nopin” class to the div, like so:
   • 
     

     <div class='nopin'>
     PUT IMAGE TAGS HERE
     </div>

   • To add a prefix/suffix to the pin description, simply add your text inside the quotes, like so:
   • 
     var bs_pinSuffix = " by Blogger Sentral"; 
   • 
     
   • Do not alter the code other than the URL and the position of the button.
6. Save, view your blog, and start pinning.