You can see what the output will look like by using the form below:

Enter your Twitter Username:
Select number of Tweets: 12345678910

The Javascript to parse the JSON from the call:

 function printTweet(data) {
 var html = [''];
 var currentStatus = "CURRENT TWITTER STATUS: <br />";
 var re_url = /(http:\/\/[\d\w\/\.\-_]+)(\s*.*)/;
 var re_user = /@(\w+)/g;
 for(var i = 0; i < data.length; i++){
  var tweet = data[i];
  var text = tweet.text;
  text = text.replace(re_url, "<a href='$1' target='_new'>$1</a>$2");
  text = text.replace(re_user, "@<a href='http://twitter.com/$1' target='_new'>$1</a>");
  var user = tweet.user.screen_name;
  var url = "http://twitter.com/" + user + "/statuses/" + tweet.id;
  var a = '<a href="' + url + '" target="_new">' + relative_time(tweet.created_at) + '</a>';
  var postedBy = " - posted by: <a href=\"http://twitter.com/" + user + "\" target=\"_new\">@" + user + "</a>";
  if(i > 0){
   currentStatus = '';
   postedBy = '';
  }
  html.push("<div class=\"tweetBody\">" + currentStatus + text + "<div class=\"tweetDate\">" + a + postedBy + "</div></div><br />");
 }
 document.getElementById("tweet").innerHTML = html.join("");
}
 
 

Lets walk through this code. There is a bit of layout code included for presentation. I left this code in to give an example of how to create your own widget with a look and feel to match your site.

First, when making a call to JSON, you need to use a callBack. In this case, I called the callBack printTweet. This is attached to the end of the JSON call (see example below). The data from the JSON callBack then needs to be parsed. If you download the JSON data, you will see that there are lots of other items and content included in each element. You can find the user's icon, if the status was a replay, and if so what status was it a reply to, etc. For the purpose of what I want to display, I didn't need to parse this data.

We start by building an empty html element. Next, we set two regular expression matches to deal with links and with other users who may appear in the data. We will use these later for link and display purposes.

I pieced much of this together from other sites, and most of them only retrieved the most current status from Twitter. However, it made sense to me to go ahead and build a way to loop over multiple status records. So, we take the length of the data (this is controlled by the count in the callBack), and loop over it. Next, take the current value of data and load it into the variable tweet. Next, we just want the "text" of the tweet object. Using the regular expression defined earlier, we replace all links, and then all references to other users (determined by @username).

We select the user, and then build a link to the current status message. Using the relative_time function below, we clean up the time to be more user friendly. At this point, I've added some more style and layout elements. After all the variables have been either defined or cleared, we need to "push" all of them into the html variable.

Finally, we join all of them together, and replace the documentID "tweet", which is an empty div, with the parsed data.

As mentioned earlier, you can add more data and content from the JSON. Once you have the basic pattern, manipulating it to suit your needs is easy.

You can try out a form version above, and see what the output will look like.

The Javascript to parse the date. This code came directly from the Twitter Support Blog:

function relative_time(time_value) {
 var values = time_value.split(" ");
 time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
 var parsed_date = Date.parse(time_value);
 var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
 var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
 delta = delta + (relative_to.getTimezoneOffset() * 60);
 if (delta < 60) {
  return 'less than a minute ago';
 } else if (delta < 120) {
  return 'about a minute ago';
 } else if (delta < (60 * 60)) {
  return (parseInt(delta / 60)).toString() + ' minutes ago';
 } else if (delta < (120 * 60)) {
  return 'about an hour ago';
 } else if (delta < (24 * 60 * 60)) {
  return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
 } else if (delta < (48 * 60 * 60)) {
  return '1 day ago';
 } else {
  return (parseInt(delta / 86400)).toString() + ' days ago';
 }
}

The last portion is to call and display the content from the two functions. Place the following code where you want the content to be displayed:

 <div id="tweet"></div><br />
 <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?count=3&callback=printTweet"></script>

You will need to replace "username" with your username, and "count" with the number of records you want returned.