Wiennat

Recently, I'm getting addicted to Twitter. Since I've moved to my new host, this is a good opportunity to try something new.

Twitter, in fact, does provide a pack of pre-built badges. But they are not my type, 2 flash badges and a html/javascript one. Fortunately, Twitter also provides a set of API over JSON/REST to query almost everything out. After take a look at API, I ended up with an idea to create a new one. I want to display either my friends' or mine in the timeline so I picked 'friend_timeline' method over the 'user_timeline' method because the latter will return only your own tweets. After that, I want the result in JSON therefore I have to ping to http://twitter.com/statuses/friends_timeline/wiennat.json.

Next step is to figure how do I use the json result from twitter. Because of security reason, AJAX call cannot go across the domain. This reason has an impact on me, I can't call to timeline url directly. Then, proxy call came into my head but I hesitated to do it so because I remembered that I found many websites with twitter badges and I was sure they didn't use this technique. After doing some research, I knew the solution, Twitter provides a way to set up a callback by using 'callback' parameter. This reflects a change to target url, http://twitter.com/statuses/friends_timeline/wiennat.json?callback=cbfn (where cbfn is the name of callback function). Instead of only JSON data, using callback parameter causes Twitter to return the JSON data as a parameter of specified function call.

To make it possible in HTML, I wrapped the url in script element and put it at the end of element. I delayed this process by using $(document).ready to wait until DOM is ready before loading the timeline. This prevents the timeline to be loaded while the page still is not loaded completely.

var Twitter = {
_twitter_parent:'',
_tweet_count : 20,
init : function (username, parent, count){
$(document).ready( function() {Twitter.loadTwitter(username); });
Twitter._twitter_parent = parent;
Twitter._tweet_count = count || 20;
}

loadTwitter : function(username){
var ttdata = document.createElement("script")
ttdata.src = 'http://twitter.com/statuses/friends_timeline/'+username+'.json?count='+Twitter._tweet_count + '&callback=Twitter.twcb';
document.body.appendChild(ttdata);
}
.... // still not complete

After append twitter script to the body element, timeline will be loaded and will call the function specified with callback parameter, inthis case Twitter.twcb. Twitter.twcb is a function that processes the returned data and put it in desired element.

twcb : function(ob) {
var twitterpane = $('#' + Twitter._twitter_parent);

ot = '<ul id="'+twitterpane.id+'_inner" class="twpane">';
for (var j=0;j<Twitter._tweet_count ;j++ ) {
at = Twitter.relative_time(ob[j].created_at);
us = ob[j].user.screen_name;
id = ob[j].id;
tx = ob[j].text;
ot += ('<li><span class="twus"><a href="http://twitter.com/' + us + '">'+us+'</a></span>: ' + tx + ' <span class="twdtxt"><a href="http://twitter.com/'+us + '/statuses/'+ id+'">#</a> <small>~'+at+'</small></span></li>');
}
ot += '</ul>';
ot += '<div style="font-size:xx-small;text-align:right">powered by <a href="http://twitter.com">twitter</a></div>';
twitterpane.css('overflow', 'hidden');
twitterpane.css('height',0);
twitterpane.html(ot);
twitterpane.animate({
height: twitterpane[0].scrollHeight
}, 750 );

As for relative time, I copied it out from the twitter badges. Actually, jquery doesn't provide blind effect likes script.aculo.us. To do it so, set the overflow property of desired element to hidden and then animate its dimension to achieve the effect. In this step, I got struck for 4 hrs. because I don't know how to specified target height dynamically. Thank you iPats for his advice on scrollHeight. To run this script, I put the script into external script and initialize the script with this code

<script type="text/javascript" src="/misc/twitterj.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Twitter.init('wiennat', 'itwitterpane', 7); });
</script>
<div id="itwitterpane"> <img src="/images/spinner.gif" />loading... </div>

That's not too hard for me to create such a simple badge like this.