January 19, 2010

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.

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.

Comments,

  • Trackbacks,
  • and Pingbacks
blog comments powered by Disqus

 

Trackbacks and Pingbacks


  1. 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

  2. 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

  3. 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.

Shortcuts

Where is Dan?


My Blog
My Blog
Twitter
Twitter
Facebook
Facebook
LinkedIn
LinkedIn
Flickr
Flickr
YouTube
YouTube
Delicious
Delicious
Foursquare
Foursquare
Pinterest
Pinterest
GetGlue
GetGlue
Pintley
Pintley
XBOX Live
XBOX Live
Last.fm
Last.fm
Windows Live
Windows Live
Telligent.com
Telligent
Graffiti CMS on CodePlex
Graffiti CMS
Popular

Recent Posts