Jack Barber / Website Design

How Can I Display My Latest Tweet with jQuery?

Many social sites offer their users HTML widgets to embed into their websites.  Twitter provides a handy interface to enable its users to customise the style of their widget and get the code, you can have a look here if you don't know what I'm talking about.  However, these profile widgets all end up looking the same, no matter what colours you pick.

But there's an easy alternative to using Twitter's code: make use of Twitter's API and get your latest tweet with jQuery's .getJSON function.

Using Twitter's API

Twitter provides a pretty handy and full-featured API, enabling users to extract all kinds of data.  In this instance we're concerned with the 'user_timeline' call, documentation for which can be seen here.

Basically, this call requests the recent history of a defined user and returns the data in the usual JSON package.  All you need to do to start using this method is add your Twitter username to the following URL:

http://api.twitter.com/1/statuses/user_timeline/YOURUSERNAME.json

jQuery's .getJSON

Once you have your API URL, you need to create a jQuery function to get the data.  Obviously you need to have jQuery installed for this to work.  Your function should look something like this:

$.getJSON('http://api.twitter.com/1/statuses/user_timeline/yourusername.json?count=1&callback=?',
function(tweet){
     // extra code goes here
});

This function requests data from Twitter's API, and the .getJSON command returns what it finds in the package 'tweet' which we can then extract the message and/or other bits of data from.

Displaying the Tweet

Once the data has been returned, displaying the tweet is easy.  Just add this line into your function:

$("#tweet").html(tweet[0].text);

All this does is extract the tweet from the data and adds it to a tag with the ID of 'tweet'.  In this instance, I'll use a DIV, but it could be another element.  So to display the tweet on your site, you'll need to add something like this to the body of your page:

 

Now every time your page loads, Twitter API is called, returning your latest tweet data which is added to your page - easy!

Creating Links

The tweet displayed will be in plain text - any links contained within it will not be active.  To generate active links within the tweet you need to pass the text through a function which checks for URLs and automatically replaces the URL(s) within your tweet with an active hyperlink.  Here's the linkify function:

function linkify(string){
     string = string.replace(
     /((https?\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi,
     function(url){
          var full_url = url;
          if (!full_url.match('^https?:\/\/')) {
          full_url = 'http://' + full_url;
     }
     return '' + url + '';
     }
);
return string;
}

Just add this function into your Javascript file somewhere, then ammend your JSON function so it looks like this:

$.getJSON('http://api.twitter.com/1/statuses/user_timeline/yourusername.json?count=1&callback=?',
function(tweet){ tweet = linkify(tweet[0].text); $("#tweet").html(tweet); });

Conclusion

This is a really basic introduction to using Twitter's API - even within our simple call to get the last tweet it returns a whole host of other data which could be used to create a far more complex Twitter widget for your site.  However, most people only want to see the latest message so this is a simple solution.