all posts

Adding a Twitter Widget to any web site with jQuery

Published to Blog on 19 Jan 2010

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.

CropperCapture[54]

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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript" ></script>
<script src="jquery.livetwitter.js" type="text/javascript"></script>

<div id="twitterTimeline" class="tweets"></div>
<script type="text/javascript">
     $('#twitterTimeline').liveTwitter('bacon', {limit: 5, rate: 5000});
</script>

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.


Dan Hounshell
Web geek, nerd, amateur maker. Likes: apis, node, mobile, motorcycles, watches, food, Nashville, Savannah, Cincinnati and family. Dislikes: mean people
Dan Hounshell on Twitter


  • On 22 Jan 2010 Add a YouTube widget to any web site with jQuery said:

    Another new addition to the home page of my blog is the “Latest Videos” widget. It pulls in the 6 most recent videos that I have tagged as favorites on YouTube. It also has the option to pull in only videos that I have uploaded, but since I rarely upload

  • On 22 Jan 2010 Add a Flickr widget to any web site with jQuery said:

    One of the new additions to the home page of my blog is the &ldquo;My Latest Photos&rdquo; widget. It pulls in the 12 most recent pictures that I&rsquo;ve uploaded to Flickr. It also gives a nice large preview of the image when you mouseover a thumbnail

  • On 26 Jan 2010 Add a Last.fm widget to any web site with jQuery said:

    This is my next to last blog post about the new widgets on my home page.&#160; The “Lastest Music” widget pulls data from my Last.fm account. Currently I’m displaying the 12 artists/albums that I’ve listened to the most on Last.fm over the last week.