How To Show The Pinterest Pin It Button's Pin Count For Any Image

This blog post was initially going to be about why the Pinterest Pin It button's pin count doesn't show up for the "Any Image" button type in the Widget Builder. But while doing research, I found out that Pinterest finally enabled this as sort of a hidden feature. The problem was that it still didn't work, and I was so close to just giving up until I decided to give it one last try. Luckily I was able to finally figure it out and get it working. This is after initially looking into this problem about two years ago.

So today I am happy to be able to show you how to make the pin count show up for any image, using a Drupal module called ShareBar as an example. Here we go:

1) The basics

https://business.pinterest.com/en/widget-builder#do_pin_it_button -> If you compare the code for "One Image" & "Any Image", you'll realize that the actual code that does the magic is as follows:

data-pin-config="above" -> This shows the pin count bubble above the pin it button.
data-pin-config="beside" -> This shows the pin count bubble next to the pin it button on the right side.

The main problem was that this code never worked for "Any Image". Until about a year ago.

2) When did the pin count start showing up for any image?

https://github.com/pinterest/widgets/issues/5 -> According to Kent Brewster (who is currently one of Pinterest's engineers), this was initially left out intentionally. But the feature started working on November 20, 2013 (even though it's still not in the widget builder as of today, which is almost exactly a year later).

@wwwjaylee we need to fix the widget builder so you can ask for a count on Any Image button. [adding to list]

— Kent Brewster (@kentbrew) November 18, 2014

Update: This is now on Kent Brewster's to-do list.

The problem was that even after including the code above, I still couldn't see the pin count and was about to give up.

3) The CSS problem

This is where I gave it one last try and eventually had my aha moment when I realized that the pin count bubble was actually there, but that the button right above this button hid it. So the following code is what made the pin count finally show up:

margin-top: 30px;

@wwwjaylee post seems fine, thanks for making it! I know about the padding bug, but am afraid that fixing it would break a lot of layouts.

— Kent Brewster (@kentbrew) November 18, 2014

Update: Kent Brewster already knew about this issue, but had a reason not to fix it.

4) The full code

Here is the full code that makes the magic happen:

<div style="margin-top: 30px;"><a href="http://jayl.ee//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-config="above"><img src="http://jayl.ee//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="http://jayl.ee//assets.pinterest.com/js/pinit.js"></script></div>

In the code above, the highlighted code is what's behind the magic. The rest came straight from the Widget Builder, with settings that are best suited to go well with other buttons in the ShareBar module ("Small" & "Gray", explained further in step #5).

So for the ShareBar module, the code above is what you put into the "Big Button" field (the vertical version). Can you guess what the code should be for the "Small Button" field (the horizontal version)? The following code should do the trick:

<a href="http://jayl.ee//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-config="beside"><img src="http://jayl.ee//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="http://jayl.ee//assets.pinterest.com/js/pinit.js"></script>

Note the highlighted code and the fact that the CSS code from step #3 is no longer needed, although you might need something like margin-right: XXpx; if you have another button to the right of this button and they're too close to each other. I should also mention that unlike the vertical version, the pin count will NOT show up for the horizontal version if the count is "0". It will start showing up though once the number is at least "1". Hopefully Kent Brewster will let somebody know about this and fix it. :P

@wwwjaylee that's another legacy thing, and is also on my list.

— Kent Brewster (@kentbrew) November 18, 2014

Update: Kent Brewster is already aware of this issue as well.

5) Customization

https://business.pinterest.com/en/widget-builder#do_pin_it_button -> You definitely want to play around in this page if you want to learn how to customize your button. Currently there are four settings that you can change, so let's take a look at a couple of main ones:

A) "Large" or "Small" -> You have a choice of a large or a small button.

B) "Red", "Gray" or "White" -> You have a choice of a red, gray or white button.

Note how the code changes as you change each setting, and you'll have a good idea of how it all works.

6) What does it actually look like?

The following is a screenshot from Mediography.by (I decided not to use it after all, due to yet another problem explained in step #7):

Pinterest Pin It Button's Pin Count

7) Colorbox / Lightbox issues

It looks nice, doesn't it? But after I got the pin count to show up, I realized that I still had one more problem because the button doesn't work with images that show up via Colorbox / Lightbox. This is of course the intended behavior since there is no way to press the button when you view an image via these plugins, since it gets disabled behind them.

So this is when I started looking into a module called Pinterest Hover Button, which should take care of this final problem for most people. But since it doesn't work well for Mediography.by, I had to figure out yet another way to make it work. My next blog post will cover this topic, which should be done within the next few days. Stay tuned! :)

P.S. If you want to visualize what I'm talking about at step #7, take a look at the following page and click the thumbnail image: http://mediography.by/artist/john-'00'-fleming