HummingbirdUK main logo

HummingbirdUK

Coding solutions to business problems

About us

We use code to create solutions to business challenges, bottle-necks and headaches.

If you think your business has a problem that can be solved through code, we are happy to chat things through without any obligation.

Get in touch

Custom social sharing buttons Part 3 - Pinterest

Home / Blog / Custom social sharing buttons Part 3 - Pinterest

Written by Giles Bennett

(Note - if you haven't already, at the very least I suggest you read the first post in this series on custom social sharing buttons for Facebook, as it contains information that is necessary to the overall picture, but which isn't being repeated in this post. The second post in this series dealt with Twitter). As with the first two posts in this series, the aim of the game is two parts - firstly to get the relevant data from Pinterest's API, and secondly to update our custom social sharing button with the data returned. As always, the information is obtained through a JSON request to Pinterest's API - using the first line of the code (below), the count is returned in the following format : [php]receiveCount({"count": 0, "url": "https://www.hummingbirduk.com/custom-social-sharing-buttons-part-1-facebook"}) [/php] From that, it's a simple enough step to, as with the Twitter count before it, check and see that (a) the count is not 0, (b) is not null and (c) is not "-" (one of the potential values returned). All three of those being the case, we then use the count to update our custom Pinterest button. [php]$.getJSON("http://api.pinterest.com/v1/urls/count.json?url=<!--?php echo $canonURL ?-->&amp;callback=?", function(data) { if ((data.count != 0) &amp;&amp; (data.count != undefined) &amp;&amp; (data.count != null) &amp;&amp; (data.count != "-")) { $('#pinterestLink').removeClass('sharing-button-has-no-count'); $('#pinterestLink').addClass('sharing-button-has-count'); $('#pinterestButton').append(beforecounter + data.count + aftercounter); } }); [/php] The actual action part of the button, however, is a little more complicated than Twitter and Facebook, because Pinterest wants the description, the URL of the page to be pinned, and the URL of the image to be pinned, to be passed to it as parameters in the URL of the window being opened - it may well therefore take a little bit of trial and error to get this side of things working properly. The Google Event Tracking and window open code looks like this : [php]function pinterest_popup() { _gaq.push(['_trackEvent', 'Social Media (product page)', 'Pinterest', 'Pin',, false]); window.open( "http://pinterest.com/pin/create/button/?urlPAGE_URL&amp;media=MEDIA+URL&amp;description=DESCRIPTION", "pinterestWindow", "height=270,width=630,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0" ) } [/php] And there you have it.
Author : Giles Bennett

About the author

Giles Bennett built his first website in 1996, and is old enough to miss Netscape Navigator. Initially a lawyer, he jumped ship to IT in 2008, and after 5 years as a freelancer, he founded HummingbirdUK in 2013. He can be reached by email at giles@hummingbirduk.com.