I’ve spent a couple of hours this afternoon solving an irritation. I like to keep an eye on how many Twitter followers I have, not as an obsession of course but just out of interest. Doing so involves going to my Twitter page: www.twitter.com/kevpartner or clicking on my profile in Tweetdeck (having found a recent tweet). What I want is a way to see the number all the time, preferably updating every few minutes.
So I created a simple Windows Sidebar gadget that interacts with the Twitter API using jQuery to retrieve this bit of data (it could retrieve anything, of course) every five minutes and display it in the sidebar.
I’m just going to show you the crucial bit. You’ll need to create a blank Sidebar Gadget using Microsoft’s instructions and make it look however you want. The code would work in exactly the same way if inserted in a web page if you’d prefer.
This bit goes in the <head> section. It assumes you have jQuery in a subfolder called js.
<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
getfollowers();
function getfollowers(){
requestURL = "http://api.twitter.com/1/users/show/kevpartner.json?callback=?";
$.getJSON(requestURL, callback);
}
function callback(data)
{
var now = new Date();
var theminutes=now.getMinutes();
if(theminutes<10)
{
theminutes="0"+theminutes;
}
var thehours=now.getHours();
var thetime=thehours+":"+theminutes;
$('#time').text("at "+thetime);
$('#gadgetContent').text(data.followers_count+" followers");
setTimeout(getfollowers, 300000);
}
});
</script>
</head>
There are two main functions. getfollowers() calls the Twitter API and asks it to return (in this case) my user data. It uses the getJSON method to do that and, once it gets a response, it calls the second function callback
callback calculates the current time (so I can see when it last updated) and also pulls out the followers_counts JSON element. These bits of information are then inserted in the appropriate span object using standard jQuery notation. The setTimeout function repeats the process every five minutes.
And this is the bit in the body:
<body> <g:background id="imgBackground"> <span id="gadgetContent"></span> <span id="time"></span> </g:background> </body>
This is very rough and ready with no visual styling at all. But it does the job and does it nicely! I might polish it up into a proper widget which will allow users to insert their own user name. If I do decide to do that, I’ll publish it. Follow me on Twitter to find out when this happens!
.gif)