In building this iteration of the blog, I decided to follow that trendiest of trends and embed my latest Twitter status on my sidebar. Despite having been on Twitter for awhile and having my site linked from my Twitter account, I didn’t really have anything pushing people from my site back to Twitter.

Problem solved: add status to sidebar. But what’s the best way to keep it up to date? I could pull in my Twitter status via PHP and display it on every request. Polling that often isn’t very practical. I could cache that data. That makes sense. This is how I do the delicious.com sidebar links. About once an hour, it’ll pull in the 5 most recent links and display them.

However, I can sometimes get into a spree of updates and I don’t necessarily want the sidebar to get out of sync too quickly. It’s also not critical information. Due to the transient nature of this less important information, I wanted to keep the burden on my servers to a minimum. As a result, I decided to look at embedding a Twitter badge on my site.

Twitter Badges

Twitter offers up a few different ways to embed a badge on your site that automatically pulls in your latest status updates. If you choose Other, you have the choice between Flash or HTML-based widgets.

I took a look at the HTML-based version and noticed that it calls in two scripts. One has a function that creates new nodes in an HTML unordered list. The other makes a call to the API but using a callback approach:

<script src="http[...].json?callback=twitterCallback&amp;count=5"></script>

Within the JSON API call, a callback function is specified along with a count. All I had to do then was define my own callback function and change the count to 1 (since I only want the very latest entry).

The callback approach returns a JSON format and passes that information through to the function name I specified.

The HTML

First, let’s take a look at what my default HTML looks like:

<div id="twitter" class="container">
	<a href="http://twitter.com/snookca"><img src="/img/twitter.png" alt="Follow me on Twitter"></a>
	<p><a id="twitter-post"
		href="http://twitter.com/snookca">I say witty things on Twitter.</a></p>
</div>

When users don’t have JavaScript enabled (or if the script fails to run for whatever reason), the default code is perfectly usable. It still links people to my twitter account with a little tagline to hopefully draw people to check it out.

I’ve added an ID, twitter-post, to the link as I’ll use that to retrieve the element in my callback function.

Always consider what should happen when users don’t have JavaScript enabled.

The JavaScript

Here’s the callback function that Twitter will call:

function twitterCallback(o) {	o = o[0]; // o is always an array, so just get the first (and only entry)	var e = document.getElementById('twitter-post');	e.innerHTML = o.text;	e.href = 'http://twitter.com/snookca/status/' + o.id;}

When Twitter runs the callback, it’ll return an array of statuses. With only one status to retrieve, the script goes ahead and assigns that to a simple variable. Then I grab my twitter-post link and change the contents from my witty default to my current status. I also change the URL to point to that specific tweet, instead of simply linking to my Twitter home page.

And that’s it! Four lines of code with not a single JavaScript framework to be found!

• No Related Post