Adding a Twitter Widget to any web site with jQuery

While redesigning my blog I chose to add more of a lifestream effect to the home page of the site. I also made a conscious effort use as much AJAX with jQuery as I could and was appropriate, both to improve perceived performance and just for fun. There are tons of great jQuery examples and plenty of plugins that will do nearly everything you can imagine. I did not have to look very far to find a Twitter plugin that did exactly what I wanted.

The Latest Tweets section on my home page is powered by the jQuery LiveTwitter plugin. You can see a demo of it in action here. One cool feature that I did not implement is the auto-updating functionality. You can set the rate for how often you want it to update and it will automatically refresh.

Usage was as simple as adding the script references for jQuery and the plugin, adding a div to hold the rendered results and adding a single line of javascript to put it into action.

Once I had the results displaying I used Firebug to figure out the structure of rendered HTML (whether it was divs, uls, etc) so I could tweak the CSS to get it to display like I wanted.

And there you have it. Voila, done.

I plan on following this post with explanations of the Flickr, YouTube, Google Reader and Last.fm widgets on my home page, which also use jQuery plugins.