How To Show The Pinterest Pin It Button When Hovering Over Any Image

Last month I showed you guys how to show the Pinterest Pin It button's pin count for any image, and talked about a limitation with Colorbox / Lightbox. In today's blog post, I will show you guys how to show the Pinterest Pin It button when hovering over any image, including one that shows up via Colorbox / Lightbox. I'll use a Drupal module called Pinterest Hover Button as an example:

1) PInterest's Widget Builder

It's actually a good idea to take a quick look at Pinterest's Widget Builder, just to see how everything works and what's available for customization. If you take a look at the code for "Image Hover", you'll realize just how simple the actual code is that makes the magic happen (for the following, I chose "Small", "Rectangular", "Red" & "English" under "Appearance"):

<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer data-pin-color="red" data-pin-hover="true" src="http://jayl.ee//assets.pinterest.com/js/pinit.js"></script>

All you have to do is put this code into whatever page that has an image. So for Drupal, you just put the code in the header section of your theme's html.tpl.php file. The only catch here is that the Pin It button will show up on every single image that you hover over in your entire website. If you don't want this to happen, read on.

2) Pinterest Hover Button

This module should suffice for most newbies that don't want to mess around with any code whatsoever. The module is very simple and easy to install and set up, and the button can be enabled per content type. The problem for me was that it didn't work well for my company website, Mediography.by. So I had to think a bit before coming up with a solution that fit my needs.

3) Custom Configuration

Since the Views configuration I have on my website is not of a typical use case scenario, I eventually had to figure out my own way to make everything work exactly the way I wanted to. What was surprising though was that using the knowledge I gained from step #1, I realized that the only thing I actually had to do was to put the code from the Widget Builder into the header area of all the Views that had images (meaning I just had to add "Global: Text area" in the "HEADER" section, and add the code in there).

The most important lesson here is realizing just how easy it actually is to learn how the Widget Builder works, and the rest is just figuring out exactly where to copy & paste the code. And that's it. Good luck!

P.S. If you want to visualize how step #3 works with Colorbox / Lightbox, take a look at the following page:

http://mediography.by/artist/john-'00'-fleming/images

First, click any of the thumbnail images and hover over the resulting image in overlay mode to make the Pin It button show up towards the left top of it. Then click on the image to get to the next one, and hover over that on to see the new Pin It button showing up accordingly. Now rinse, repeat and have fun. ;)