Display Twitter Followers & Stats
I’ll be leading you through how to do this using jQuery and a small section of the Twitter API.
So, you are an avid user of Twitter like me, and you want to display all of these awesome stats on your website for the world to be jealous of.
You could of course use one of the many widgets that there are out there available to use, however, they don’t offer a large amount of customisation.
The Prelude
We’re going to be using jQuery - so that means we’ll need to include the awesome library. Aside from that we’ll be querying the users/show section of the Twitter API.
We’ll then be simply assigning the sections that we want to the various ID-ed elements on the HTML page.
The Basics
HTML is simple, and we’ll be using barebones stuff in this, nothing complex - just what we need to get the job done. To start with we have an HTML5 document, we then include the jQuery library, and begin a code block. This code block will run on the ready event of the window element:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Twitter Stats</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(function(){
});
</script>
</head>
<body>
</body>
</html>
Now that we have the basics down, we’ll look to add some jQuery into the fun. We’ll be using the $.ajax() function, but remembering that we have to set dataType to jsonp.
All code posted from this point forward will be sitting within the function(){ } above.
Some More Code!
On success we’ll be saving the required sections to likely id-ed elements on the page. The items we’re interested in are:
- statuses_count - total tweets sent
- followers_count - total number of people following you
- friends_count - total number of people you follow
- status.text - Text of most recent tweet sent
- status.created_at - Time most recent tweet was sent
There are plenty of other returned items that you can use & access if you so wish, however, in this example we’ll only be concentrating on the first three in the list above.
So with that said & done. We’ll move the JavaScript forward, we’ll be tying the populating of the elements into the success event of the ajax call:
var username = 'michaelw90';
$.ajax({
url: 'https://api.twitter.com/1/users/show.json?screen_name=' + username + '&include_entities=false',
dataType: 'jsonp',
success: function(data){
$('#statuses_count').html(data.statuses_count + " Tweets");
$('#followers_count').html(data.followers_count + " Followers");
$('#friends_count').html(data.friends_count + " Following");
}
});
Remember to ensure that you have the elements within your HTML that have the same `id` as those mentioned above.
Also, there is a username variable at the top of the script that will allow you to define your Twitter username and it is used within the API call.
Further Thoughts
- Error Handling
You need to consider what you’ll do if the call fails, and you’re left with some empty boxes, you could make it so that the elements are hidden by default & then shown within the success event.
- Number Formatting
The numbers returned are non-comma separated numbers, this means that if you end up with a large number of followers/tweets you could end up with some ugly looking numbers. I’d suggest using some code to add commas into these numbers to make them look more sexy.
- Caching
I’d always advise against using JavaScript to display statistics from a website as each page load will count as a call against the API - this meaning that you could soon end up breaking the API count limit.
Instead, I’d suggest using PHP & caching the numbers in a database - doing so means you can create some awesome stats too!
Wrap Up + Live Demo
Well, that’s the end of this very short tutorial - written mainly for me to get into this Tumblr business, but also to answer a request that someone had for a while.
If you’d like to see the full code that I wrote it’s available to view on my test site, you can find me on Twitter @MichaelW90.
Till next time …
