Web development

Getting Twitterific with jQuery

November 5th, 2008  |  Published in Web development

I was researching dynamic site update options for a project at work and stumbled upon Damien du Toit’s blog. Damien has developed a plugin for jQuery that allows you to pull in data from Twitter. Naturally I had to try it out for myself, so it’s now featured in the sidebar of my blog.

From Damien’s blog:

Introducing jQuery plugin for Twitter v1.0 - View Demo
A simple, unobtrusive and customisable client-side method for easily embedding a Twitter feed into a web page.

To begin, download the source files (.zip) and familiarise yourself with the necessary JavaScript and CSS files that need to be included in your page:

<link rel="stylesheet" href="jquery.twitter.css" type="text/css" />
<script src="jquery.twitter.js" type="text/javascript"></script>

Next, add a div element with id “twitter” to your page, wherever you want the feed to appear:

<div id="twitter"></div>

Lastly attach the plugin to that div with the following jQuery code (the customisation options are pretty much self-explanatory I think):

$(document).ready(function() {
	$("#twitter").getTwitter({
		userName: "jquery",
		numTweets: 5,
		loaderText: "Loading tweets...",
		slideIn: true,
		showHeading: true,
		headingText: "Latest Tweets",
		showProfileLink: true
	});
});

It’s obviously a little more involved, but that should be enough to get you up and running!