Quantcast

Twitter Implements Callbacks!

posted by rajbot on September 26th, 2006  

Less that one day after I called them on the phone, the good folk at Twitter have already pushed out callback support, and we’re now using it on this site!

Here is the email I just got:

Hi!

Cool stuff you are working on =)

I’ve just deployed callback support for the api:

http://twitter.com/statuses/user_timeline/6760.json?callback=myCallback

If you have any questions, etc.. let me know.

Ciao!
Florian

Note that this URL is different from their standard badge URL.. Thanks Twitter!!!

Here is a short tutorial on how to add your twitter badge to your webpage, in such a way that it doesn’t slow down the initial page load.

1. Put this html snippet somewhere on your webpage. Replace USERID with your actual twitter numeric id.

<div id="my_twitter_status_USERID"><img src="spinner.gif"></div>
<div id="my_twitter_status_time_USERID"></div>

2. Add an onload attribute to the BODY tag in your html:

<body onload="initTiki();">

3. Add three javascript functions to the HEAD portion of your webpage:

<head><script type="text/javascript">
function twitterCallback(obj) {
	var id = obj[0].user.id;
	document.getElementById('my_twitter_status_' + id).innerHTML = obj[0].text;
	document.getElementById('my_twitter_status_time_' + id).innerHTML = 'sent ' + obj[0].relative_created_at;
}
 
function twitterStatus(url) {
	var twitScript  = document.createElement("script");
	twitScript.setAttribute("type", "text/javascript");
	twitScript.setAttribute("src", url);
	document.getElementsByTagName('head')[0].appendChild(twitScript);
}
 
function initTiki() {
	twitterStatus('http://twitter.com/statuses/user_timeline/USERID.json?callback=twitterCallback&count=1');	
}
</script>
</head>

That’s it. If you want to be sure that your badge is very up-to-date, you can get around some JS caching issues like by adding a random parameter to the url. This is more of an issue for IE users, and since we don’t know any of those, and we don’t like waiting, we don’t use this technique. Here is an example, tho:

function initTiki() {
	var rnd = '&rnd=' + Math.random();
	twitterStatus('http://twitter.com/statuses/user_timeline/USERID.json?callback=twitterCallback&count=1'+rnd);	
}

Filed under: , · 1 Comment

One Response to “Twitter Implements Callbacks!”

  1. Robyn California
    March 26th, 2007 | 4:49 pm

    Dude! So far, it rocks! I am having trouble implementing this a second time *but* it works great so far.

    What if I wanted an image to pop up to replace the spinner and then have the text appear afterward (eg: <img src=”blah.gif” align=”left”> ) ? Thoughts?

Leave a reply