Get your latest Tweet using the JSON timeline

August 31, 2011

There are a few ways in which I have seen to get the latets Tweet from Twitter to display on a site. The easiest solution I have found uses the JSON timeline of Tweets.

In the example below, I have used this method and formatted the tweets into a list. It can then be styled how you like from there.

The Javascript

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)://[^"s<>]*[^.,;'">:s<>)]!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">' + relative_time(twitters[i].created_at)+'</a></li>');
  }
  jQuery('.twitter_update_list').html(statusHTML.join(''));
}

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 twitterCallback2() function formats the Tweets nicely for you and uses the relative_time() function to get the time it was created and display that.

The HTML

Below is the HTML you should use to display the Tweets. If you want more than 1, simply change the value of ‘count’ so it is greater.

<ul class="twitter_update_list">
	<li>Tweets will replace this...</li>
</ul>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/captain_nick.json?callback=twitterCallback2&amp;count=2"></script>
<p>Follow <a href="http://twitter.com/#!/captain_nick" target="_blank">@captain_nick</a></p>