Custom social sharing button (3) - Pinterest

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

receiveCount({"count": 0, "url": "https://hummingbirduk.com/custom-social-sharing-buttons-part-1-facebook"})

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.

$.getJSON("https://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);	
	}				
});

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 :

function pinterest_popup() {
	_gaq.push(['_trackEvent', 'Social Media (product page)', 'Pinterest', 'Pin',, false]);
	window.open( "https://pinterest.com/pin/create/button/?urlPAGE_URL&media=MEDIA+URL&description=DESCRIPTION", "pinterestWindow", "height=270,width=630,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0" )
}

And there you have it.