Both Twitter and Facebook have little JavaScript widgets that allow you to share a page using the respective service, displaying a running total of users who have done so. While that’s fine for most purposes, what if you just need the count, for some atypical application?
It’s not well-documented, but the two social media sites have JSON APIs for that purpose.
With a little bit of jQuery magic, you can collect the values on page load and update the DOM with the number. Here’s something I threw together for a project I was working on:
(function() {
var url = 'http://xkcd.com/792/';
jQuery.getJSON("http://urls.api.twitter.com/1/urls/count.json?url="+url+"&callback=?", function(data) {
jQuery('#socialstuff span.twcount').html(data.count);
});
jQuery.getJSON("https://graph.facebook.com/"+url+"&callback=?", function(data) {
jQuery('#socialstuff span.fbcount').html(data.shares);
});
}());
As long as you remember to include jQuery, and have the right HTML elements for the JavaScript to populate, it’s pretty much plug-and-play.
You can see it in action here.
I didn’t quite understand. Could you please explain a bit more what this is actually counting ?
The Twitter stat is the number of times a URL has been retweeted. The Facebook one is the number of times a URL has been Liked, e.g. using the Like button you see on websites.
Thanks for this tip! I ended up modifying it to pull number of comments on a page (using Facebook comments).
Using the method suggested by Facebook here didn’t work, all.js kept throwing errors for some reason:
http://developers.facebook.com...../comments/
Thanks again!
Ah, that uses FBML. Make sure you have this on your page if you want to use anything shown on that guide:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>