[IMPORTANT UPDATE Sept 18 2016] To keep your Pin It button alive, please reinstall the code (see change log).
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.
- [Added 21 Nov 2012] Select your preferred button position (relative to the hovered image) from five available positions.
- [Added 22 Jan 2013] You can now prevent the button from appearing on certain photos.
- [Added 15 Feb 2013] 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.
Change log
[Sept 18 2016] Moved button script into template html to eliminate script hosting problem for good.
June 23 2016] Moved button script to Dropbox.
[May 9 2016] Changed the script’s source link in code line 10. The original host (Google Code) was shut down. The button script is now hosted on Google Drive.
[Mar 21 2013] Replaced backlink with attribution comment.
[Jan 21 2013] 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,
- Blogger: Go to Template > Edit HTML.
WordPress: Go to Administration > Appearance > Editor > footer.php. - Locate the
</body>tag near the bottom of the template. - Copy the code below and insert it right above the tag.
<script> //<![CDATA[ var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/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' type='text/javascript'>
//<![CDATA[
var _0xa776=["x3Cx69x6Dx67x20x73x74x79x6Cx65x3Dx22x76x69x73x69x62x69x6Cx69x74x79x3Ax68x69x64x64x65x6Ex3Bx22x20x63x6Cx61x73x73x3Dx22x70x69x6Ex69x6Dx67x6Cx6Fx61x64x22x20x73x72x63x3Dx22","x22x20x3E","x61x70x70x65x6Ex64","x62x6Fx64x79","x68x69x64x65","x23x62x73x5Fx70x69x6Ex4Fx6Ex48x6Fx76x65x72","x6Fx75x74x65x72x57x69x64x74x68","x2Ex70x69x6Ex69x6Dx67x6Cx6Fx61x64","x6Fx75x74x65x72x48x65x69x67x68x74","x72x65x6Dx6Fx76x65","x6Cx6Fx61x64","x62x6Cx6Fx67x67x65x72x73x65x6Ex74x72x61x6Cx2Ex63x6Fx6D","x69x6Ex64x65x78x4Fx66","x68x74x6Dx6C","x76x69x73x69x62x69x6Cx69x74x79","x68x69x64x64x65x6E","x63x73x73","x2Ex70x69x6Ex69x74x2Dx77x72x61x70x70x65x72","x6Dx61x72x67x69x6Ex2Dx74x6Fx70","x6Dx61x72x67x69x6Ex2Dx6Cx65x66x74","x74x6Fx70","x70x6Fx73x69x74x69x6Fx6E","x6Cx65x66x74","x63x65x6Ex74x65x72","x74x6Fx70x72x69x67x68x74","x74x6Fx70x6Cx65x66x74","x62x6Fx74x74x6Fx6Dx72x69x67x68x74","x62x6Fx74x74x6Fx6Dx6Cx65x66x74","x73x72x63","x70x72x6Fx70","x2Ex70x6Fx73x74x2Dx74x69x74x6Cx65x2Cx2Ex65x6Ex74x72x79x2Dx74x69x74x6Cx65x2Cx2Ex65x6Ex74x72x79x2Dx68x65x61x64x65x72","x66x69x6Ex64","x2Ex70x6Fx73x74x2Cx2Ex68x65x6Ex74x72x79x2Cx2Ex65x6Ex74x72x79","x63x6Cx6Fx73x65x73x74","x74x65x78x74","x75x6Ex64x65x66x69x6Ex65x64","","x6Cx65x6Ex67x74x68","x61","x72x65x70x6Cx61x63x65","x68x72x65x66","x61x74x74x72","x3Cx64x69x76x20x63x6Cx61x73x73x3Dx22x70x69x6Ex69x74x2Dx77x72x61x70x70x65x72x22x20x73x74x79x6Cx65x3Dx22x64x69x73x70x6Cx61x79x3Ax6Ex6Fx6Ex65x3Bx70x6Fx73x69x74x69x6Fx6Ex3Ax20x61x62x73x6Fx6Cx75x74x65x3Bx7Ax2Dx69x6Ex64x65x78x3Ax20x39x39x39x39x3Bx20x63x75x72x73x6Fx72x3Ax20x70x6Fx69x6Ex74x65x72x3Bx22x20x3Ex3Cx61x20x68x72x65x66x3Dx22x68x74x74x70x3Ax2Fx2Fx70x69x6Ex74x65x72x65x73x74x2Ex63x6Fx6Dx2Fx70x69x6Ex2Fx63x72x65x61x74x65x2Fx62x75x74x74x6Fx6Ex2Fx3Fx75x72x6Cx3D","x26x6Dx65x64x69x61x3D","x26x64x65x73x63x72x69x70x74x69x6Fx6Ex3D","x22x20x73x74x79x6Cx65x3Dx22x64x69x73x70x6Cx61x79x3Ax62x6Cx6Fx63x6Bx3Bx6Fx75x74x6Cx69x6Ex65x3Ax6Ex6Fx6Ex65x3Bx22x20x74x61x72x67x65x74x3Dx22x5Fx62x6Cx61x6Ex6Bx22x3Ex3Cx69x6Dx67x20x63x6Cx61x73x73x3Dx22x70x69x6Ex69x6Dx67x22x20x73x74x79x6Cx65x3Dx22x2Dx6Dx6Fx7Ax2Dx62x6Fx78x2Dx73x68x61x64x6Fx77x3Ax6Ex6Fx6Ex65x3Bx2Dx77x65x62x6Bx69x74x2Dx62x6Fx78x2Dx73x68x61x64x6Fx77x3Ax6Ex6Fx6Ex65x3Bx2Dx6Fx2Dx62x6Fx78x2Dx73x68x61x64x6Fx77x3Ax6Ex6Fx6Ex65x3Bx62x6Fx78x2Dx73x68x61x64x6Fx77x3Ax6Ex6Fx6Ex65x3Bx62x61x63x6Bx67x72x6Fx75x6Ex64x3Ax74x72x61x6Ex73x70x61x72x65x6Ex74x3Bx6Dx61x72x67x69x6Ex3Ax20x30x3Bx70x61x64x64x69x6Ex67x3Ax20x30x3Bx62x6Fx72x64x65x72x3Ax30x3Bx22x20x73x72x63x3Dx22","x22x20x74x69x74x6Cx65x3Dx22x50x69x6Ex20x6Fx6Ex20x50x69x6Ex74x65x72x65x73x74x22x20x3Ex3Cx2Fx61x3Ex3Cx2Fx64x69x76x3E","x69x73","x70x61x72x65x6Ex74","x70x69x6Ex69x74x2Dx77x72x61x70x70x65x72","x68x61x73x43x6Cx61x73x73","x6Ex65x78x74","x61x66x74x65x72","x6Fx6Ex6Dx6Fx75x73x65x6Fx76x65x72","x74x68x69x73x2Ex73x74x79x6Cx65x2Ex6Fx70x61x63x69x74x79x3Dx31x3Bx74x68x69x73x2Ex73x74x79x6Cx65x2Ex76x69x73x69x62x69x6Cx69x74x79x3Dx27x76x69x73x69x62x6Cx65x27","x74x68x69x73x2Ex73x74x79x6Cx65x2Ex6Fx70x61x63x69x74x79x3Dx31x3Bx74x68x69x73x2Ex73x74x79x6Cx65x2Ex76x69x73x69x62x69x6Cx69x74x79x3Dx27x76x69x73x69x62x6Cx65x27x3Bx63x6Cx65x61x72x54x69x6Dx65x6Fx75x74x28x62x73x42x75x74x74x6Fx6Ex48x6Fx76x65x72x29","x76x69x73x69x62x6Cx65","x73x68x6Fx77","x66x61x64x65x54x6F","x73x74x6Fx70","x6Dx6Fx75x73x65x65x6Ex74x65x72","x2Ex6Ex6Fx70x69x6Ex2Cx2Ex6Ex6Fx70x69x6Ex20x69x6Dx67","x6Ex6Fx74","x2Ex65x6Ex74x72x79x2Dx63x6Fx6Ex74x65x6Ex74x20x69x6Dx67x2Cx2Ex70x6Fx73x74x2Dx62x6Fx64x79x20x69x6Dx67x2Cx2Ex65x6Ex74x72x79x2Dx73x75x6Dx6Dx61x72x79x20x69x6Dx67","x6Dx6Fx75x73x65x6Cx65x61x76x65","x6Dx73x69x65","x62x72x6Fx77x73x65x72","x6Fx6E","x72x65x61x64x79"];jQuery(document)[_0xa776[68]](function(_0x8b11x1){_0x8b11x1(_0xa776[3])[_0xa776[2]](_0xa776[0]+ bs_pinButtonURL+ _0xa776[1]);_0x8b11x1(_0xa776[5])[_0xa776[4]]();var _0x8b11x2;var _0x8b11x3;var _0x8b11x4;_0x8b11x1(_0xa776[7])[_0xa776[10]](function(){_0x8b11x3= _0x8b11x1(_0xa776[7])[_0xa776[6]](true);_0x8b11x4= _0x8b11x1(_0xa776[7])[_0xa776[8]](true);_0x8b11x1(_0xa776[7])[_0xa776[9]]()});var _0x8b11x5=_0x8b11x1(_0xa776[5])[_0xa776[13]]()[_0xa776[12]](_0xa776[11]);_0x8b11x5!= -1&& _0x8b11x6();function _0x8b11x6(){_0x8b11x1(_0xa776[63])[_0xa776[62]](_0xa776[61])[_0xa776[60]](function(){_0x8b11x1(_0xa776[17])[_0xa776[16]](_0xa776[14],_0xa776[15]);clearTimeout(_0x8b11x2);var _0x8b11x7=_0x8b11x1(this);var _0x8b11x8=parseInt(_0x8b11x7[_0xa776[16]](_0xa776[18]));var _0x8b11x9=parseInt(_0x8b11x7[_0xa776[16]](_0xa776[19]));var _0x8b11xa;var _0x8b11xb;switch(bs_pinButtonPos){case _0xa776[23]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x7[_0xa776[8]](true)/ 2- _0x8b11x4/ 2;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x7[_0xa776[6]](true)/ 2- _0x8b11x3/ 2;break;case _0xa776[24]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ _0x8b11x7[_0xa776[6]]()- _0x8b11x3- 5;break;case _0xa776[25]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ 5;break;case _0xa776[26]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ _0x8b11x7[_0xa776[8]]()- _0x8b11x4- 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ _0x8b11x7[_0xa776[6]]()- _0x8b11x3- 5;break;case _0xa776[27]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ _0x8b11x7[_0xa776[8]]()- _0x8b11x4- 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ 5;break};var _0x8b11xc=_0x8b11x7[_0xa776[29]](_0xa776[28]);var _0x8b11xd=_0x8b11x7[_0xa776[33]](_0xa776[32])[_0xa776[31]](_0xa776[30]);var _0x8b11xe=_0x8b11xd[_0xa776[34]]();if( typeof bs_pinPrefix=== _0xa776[35]){bs_pinPrefix= _0xa776[36]};if( typeof bs_pinSuffix=== _0xa776[35]){bs_pinSuffix= _0xa776[36]};if(_0x8b11xd[_0xa776[31]](_0xa776[38])[_0xa776[37]]){pinitURL= _0x8b11xd[_0xa776[31]](_0xa776[38])[_0xa776[41]](_0xa776[40])[_0xa776[39]](/#.+b/gi,_0xa776[36])}else {pinitURL= _0x8b11x1(location)[_0xa776[41]](_0xa776[40])[_0xa776[39]](/#.+b/gi,_0xa776[36])};var _0x8b11xf=_0xa776[42]+ pinitURL+ _0xa776[43]+ _0x8b11xc+ _0xa776[44]+ bs_pinPrefix+ _0x8b11xe+ bs_pinSuffix+ _0xa776[45]+ bs_pinButtonURL+ _0xa776[46];var _0x8b11x10=_0x8b11x7[_0xa776[48]]()[_0xa776[47]](_0xa776[38])?_0x8b11x7[_0xa776[48]]():_0x8b11x7;if(!_0x8b11x10[_0xa776[51]]()[_0xa776[50]](_0xa776[49])){_0x8b11x10[_0xa776[52]](_0x8b11xf);if( typeof _0x8b11x2=== _0xa776[35]){_0x8b11x10[_0xa776[51]](_0xa776[17])[_0xa776[41]](_0xa776[53],_0xa776[54])}else {_0x8b11x10[_0xa776[51]](_0xa776[17])[_0xa776[41]](_0xa776[53],_0xa776[55])}};var _0x8b11x11=_0x8b11x10[_0xa776[51]](_0xa776[17]);_0x8b11x11[_0xa776[16]]({"x74x6Fx70":_0x8b11xa,"x6Cx65x66x74":_0x8b11xb});_0x8b11x11[_0xa776[16]](_0xa776[14],_0xa776[56]);_0x8b11x11[_0xa776[59]]()[_0xa776[58]](300,1.0,function(){_0x8b11x1(this)[_0xa776[57]]()})});_0x8b11x1(_0xa776[63])[_0xa776[67]](_0xa776[64],function(){if(_0x8b11x1[_0xa776[66]][_0xa776[65]]){var _0x8b11x12=_0x8b11x1(this)[_0xa776[51]](_0xa776[17]);var _0x8b11x13=_0x8b11x1(this)[_0xa776[48]](_0xa776[38])[_0xa776[51]](_0xa776[17]);_0x8b11x2= setTimeout(function(){_0x8b11x12[_0xa776[59]]()[_0xa776[16]](_0xa776[14],_0xa776[15]);_0x8b11x13[_0xa776[59]]()[_0xa776[16]](_0xa776[14],_0xa776[15])},3000)}else {_0x8b11x1(_0xa776[17])[_0xa776[59]]()[_0xa776[58]](0,0.0)}})}})
//This Pinterest Hover Button is developed by bloggersentral.com.
//Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html details
//Please do not remove this attribution
//]]>
</script>- Code line
79 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
centerin line 4 with the new position as listed below:toplefttoprightbottomleftbottomright
- [Added 22 Jan 2013] 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.
- Code line
- Save, view your blog, and start pinning.
Enjoy!
Follow me for more for more Pinterest tutorials.
Source: https://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html
