Tweet tweet..

If you are reading this blog and are !(family||friend) then chances are that you would have heard of the microblogging platform known as twitter. It was released about 2 years ago. I had previously rejected the idea as a ludicrous waste of time and unnecessary invasion of privacy.. but digg and slashdot have rammed the idea down my throat and I have finally given in to the idea of using twitter.

The main reason I have joined the twitter bandwagon is because I don't have enough time to update this blog, be visible on social networking websites like orkut and facebook or even keep in touch with enough friends. Twitter solves the problem by letting me broadcast a one liner to all these places with just a single IM message to twitter@twitter.com... nifty.

Twitter provides a javascript/json based script to update the status badge on blogger. This badge occupies a rectangular area and if I was forced to use it, I would have put it in the sidebar. Not only does it messes with the Feng-shui but also eats a chunk of my screen estate. People hardly even notice the sidebar (according to the stats by various analytics).

After messing about 30 minutes with the badge code, I came up with the following fully functional twitter status line(not badge) which has all the functional elements of the badge. The title links to twitter's follow me and a mouseover action would display the update time as a tool tip.

Here's the code:

<script type="text/javascript">
function twitterCallback2(obj) {
var twitters = obj;
var statusHTML = "";
var username = "";
username = twitters[0].user.screen_name
statusHTML = '<span title="'+relative_time(twitters[0].created_at)+'"><b>
<a href="http://twitter.com/codeyman">Twitter Update:</a></b>&nbsp;'+
twitters[0].text+'</span>';
document.getElementById('twitter_update_list').innerHTML = statusHTML;
}

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 'Updated less than a minute ago';
 } else if(delta < 120) {
   return 'Updated about a minute ago';
 } else if(delta < (60*60)) {
   return 'Updated '+(parseInt(delta / 60)).toString() + ' minutes ago';
 } else if(delta < (120*60)) {
   return 'Updated about an hour ago';
 } else if(delta < (24*60*60)) {
   return 'Updated about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
 } else if(delta < (48*60*60)) {
   return 'Updated 1 day ago';
 } else {
   return 'Updated '+(parseInt(delta / 86400)).toString() + ' days ago';
 }
}
</script>

<div id="twitter_div">
<div id="twitter_update_list" align="left"></div>
</div>
<script type="text/javascript" 
src="http://twitter.com/statuses/user_timeline/codeyman.json?
callback=twitterCallback2&count=1">
</script>

Of course, since I am not a web developer by a mile, I agree that this code might still be ugly and can still be optimized, but hey.. its smaller than the older code, doesn't do any lookups for external javascripts.

If any web dev out there could optimize it even further.. do let me know.