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
