How to Get Pinterest Pin It Button on Image Hover

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. Pinning an image just got easier and more intuitive with this hover button. This time a button that appears when you mouseover or hover any image in your posts. Due to numerous requests from our readers, here we present yet another Pinterest pin it button widget.

This hover button combined with Pinterest skills and strategies will definitely help you generate traffic and gain brand exposure.

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

• 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.

Let’s proceed with the tutorial

Step 1 - Blogger: Go to Template > Edit HTML.
             WordPress: Go to Administration > Appearance > Editor > footer.php.

Step 2 - Locate the </body> tag near the bottom of the template.

Step 3 - Copy the code below and insert it right above the tag.

Note:
* 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:

topleft
topright
bottomleft
bottomright

* To block the button from appearing on an image, assign “nopin” class to the image tag, like this:

* 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:

PUT IMAGE TAGS HERE

* To add a prefix/suffix to the pin description, simply add your text inside the quotes, like so:
        var bs_pinSuffix = " by ProBlogTricks";
* Do not alter the code other than the URL and the position of the button.

Step 4 - Save, view your blog, and start pinning.

Enjoy!

Tweet