Twitter sidebar hack

So by default the official Twitter HTML/Javascript badge doesn’t actually let you click-through hyperlinks, they’re just displayed as normal text the same as everything else.

The main JavaScript function from that badge is:

function twitterCallback2(obj) {
	var twitters = obj;
	var statusHTML = "";
	var username = "";
	for (var i=0; i<twitters.length; i++){
		username = twitters[i].user.screen_name
		statusHTML += ('<li><span>'+twitters[i].text+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>')
	}
	document.getElementById('twitter_update_list').innerHTML = statusHTML;
}

So basically it’s just inserting into the twitter_update_list  (the list in the sidebar)  the text of each tweet, and then a link to that particular tweet with the “relative time” as the link text, with a separate relative_time(datetime) function that just converts an actual timestamp to an ordinal name.

So because there’s no formatting inside the twitters[i].text, links are displayed in the same formatting as any other text.

So even though this is kind of a major design flaw (imho), especially coming from Twitter themselves as the official blog badge, it’s just them being simple with their function – low frills.

BUT, we can be a bit fancy with regular expressions. So, if we add another script that replaces the twitter_update_list with a formatted version (that we subject to a search-and-format for links using regexes), then we can force the Twitter sidebar to have true links.

document.getElementById('twitter_update_list').innerHTML = document.getElementById('twitter_update_list').innerHTML.replace(/https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?/g,"<a href="$&">$&</a>");

Overall, this shows that regexes can indeed, save the day.

this way is a waterslide-away-from-me-to-chase-her-fuller-everyday