Written by Giles Bennett
So, belatedly, the follow-up to this post on how to create your own custom sharing buttons (complete with counts).
Again, the principle is the same - step one is to get the information, and step two is to show the information. Since the second step is the same whether it's Twitter, Google+, Facebook or Pinterest, I don't intend to repeat the guide on how to use ajax after the page has loaded to update the count - you can read about it in the first post in this series.
As with the Facebook button, the first line of the script puts in a JSON call to Twitter's API which returns the tweet count for the page in question (which we've fed to it dynamically, ideally).
The actual information returned looks like this :
{"count":0,"url":"http:\/\/blog.gilesbennett.com\/"}
...and as it's plain to see, the bit of the data we want to get our hands on is the 'count'. So as long as the count isn't equal to zero, undefined or null (it would be one of the latter two if the JSON call hadn't worked, for whatever reason, so include these to err on the side of caution), then we add the data count, along with a change
The complete bit of code looks like this (again, the classes and the like won't make much sense if you haven't read the first post in the series, so I suggest you do that first).
$.getJSON('https://urls.api.twitter.com/1/urls/count.json?url=PAGE_ADDRESScallback=?', function(data) {
if((data.count != 0) && (data.count != undefined) && (data.count != null)) {
$('#twitterLink').removeClass('sharing-button-has-no-count');
$('#twitterLink').addClass('sharing-button-has-count');
$('#twitterButton').append(beforecounter + data.count + aftercounter);
}
});
Next in the series (in a couple of months' time, at this rate) I'll cover Pinterest and Google+, so watch this space.
