Custom social sharing buttons (4) - Google+

Note to readers - if you haven't done so already, I suggest you read, at the very least, our initial post on custom social sharing buttons (which lays the groundwork and covers Facebook), and also the separate posts on Twitter and Pinterest.

Unlike the other main social networks, dealing with Google+ is a little messy because Google hasn't released an API to allow you to get the number of +1's a page has. This means two things - firstly, any route to obtain this information is going to be ugly at best, and secondly, it's liable to be turned off at any time, without notice. So whilst we all had plenty of notice of Twitter's retirement of their API v.1, the likelihood that the method outlined below suddenly stops working overnight for no apparent reason is quite high...but let's plug on anyway.

The only real way, at this stage, to get the count is to rip it out of the URL that the Google+ button uses. This is incredibly un-pretty, as you can imagine, but it's all that's open to us at this stage. This also means, however, that unlike the other social buttons, where the work can all be done through jQuery, there has to be some server side stuff, so it's a combination of PHP and jQuery.

The below example is from this very page, where it's being used in a Wordpress environment.

The actual work is done by the PHP getGoogleCount() function, but first we need to line up a couple of bits :

<!--?php $url = get_permalink();
</pre-->

This first line just puts the URL of the page to be checked into the $url variable - as I say, this is being used on a Wordpress install where we can just get_permalink(), but you'll have to populate it with the relevant URL some how.

function getGoogleCount($url) {
    $googleURL = file_get_contents('https://plusone.google.com/_/+1/fastbutton?url=' .  $url );
    preg_match('/window\.__SSR = {c: ([\d]+)/', $googleURL, $results);
    if( isset($results[0]))
        return (int) str_replace('window.__SSR = {c: ', '', $results[0]);
    return "0";
}
?>;

The first line of the function gets the HTML that we would get if we'd called the +1 button's address 'properly' and loads those contents into the $googleURL variable. This, then, is

The second line the processes that result, looking for a JSON-esque bit of code in them. If the window.__SSR object holds a 'c' variable with a value, then that's the count we're looking for - if not, then either the call has failed, or there's no +1s for this page (if that's the case, 'c' doesn't hold '0', it just doesn't exist).

So if 'c' is set, our script returns that value as the result of the function, and if not, then it returns 0.

We now switch from PHP to jQuery, but include a tiny bit of PHP in the first line to call our function.

googleCount = "<!--?php echo getGoogleCount($url);?-->";
if ((googleCount != 0) &amp;&amp; (googleCount != undefined) &amp;&amp; (googleCount != null) &amp;&amp; (googleCount != "-")) {
	$('#googleLink-<!--?php echo $suffixString ?-->').removeClass('sharing-button-has-no-count');			
	$('#googleLink-<!--?php echo $suffixString ?-->').addClass('sharing-button-has-count');	
	$('#googleButton-<!--?php echo $suffixString ?-->').append(beforecounter + googleCount + aftercounter);	
}				

This then loads the googleCount variable with the results of our function, and updates our custom counter (as with the previous counters in the previous posts, so I don't intend to re-hash old ground) if there is a value other than zero.