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.


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 widgets on my home page, which also use jQuery plugins.

Dan Hounshell
Web geek, nerd, amateur maker. Likes: apis, node, motorcycles, sports, chickens, watches, food, Nashville, Savannah, Cincinnati and family.
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 “My Latest Photos” widget. It pulls in the 12 most recent pictures that I’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 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 account. Currently I’m displaying the 12 artists/albums that I’ve listened to the most on over the last week.