Getting Twitterific with jQuery
November 5th, 2008 | Published in Web development | 2 Comments

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!
February 3rd, 2009 at 10:06 am (#)
Hi,
Just the ticket - demo works a treat, if only I could get it to work! Your demo loads the function from the document but the .js external script uses $.fn.getTwitter.defaults = instead of $(document).ready(function(), which you’ve used in the demo . How do you load the function using $.fn.getTwitter.defaults - all I get is an empty box at the moment with no call to twitter.
Cheers
//Jane
February 3rd, 2009 at 10:24 am (#)
Jane,
As I mentioned above I didn’t create this demo, but I’ll do my best to help you.
You shouldn’t need to modify the plugin script to get it to work. In $(document).ready you are initializing the script and telling it where to insert the data from Twitter. Make sure the div you created has an ID of “twitter” (or change the selector in the JS).
I’m using this script currently on this blog (see column to the right) so that should give you an additional example to look at.
Good luck!