HTML aware Twitter

Twitter, an online status update tool, can easily be integrated to blogger to enable live updates to your blog in the form of miniature 160 character messages. Twitter does provide a widget that can be added to your blog, which is capable of doing the hard work of fetching and publishing the required information for you. However, the widget provided by Twitter (Twitter Badge for Blogger), as of today is not HTML aware.

However, on your twitter homepage, you will notice that Twitter intelligently replaces URLs and friend names with hyperlinks. To add a friend name in your message, you will simply have to append an @ sign in front of the name (ex:- senaka -> @senaka). Once done, Twitter will create a hyperlink to your friend from your post.

The problem I'm answering here is how to bring in this functionality to your blog. This though you might believe is hard, is apparently very simple. All that needs to be done is to simply add this text under your twitter code.

  <script type='text/javascript'>
    document.getElementById('twitter_update_list').innerHTML
      = document.getElementById('twitter_update_list').innerHTML.replace(
        /([^\"\'])(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/g,
        '$1<a href="$2">$2</a>');
    document.getElementById('twitter_update_list').innerHTML
      = document.getElementById('twitter_update_list').innerHTML.replace(
        /@([a-zA-Z]+)/g,'@<a href="http://twitter.com/$1">$1</a>');
  </script>

Once, you have done this, your Twitter updates will become HTML aware. The method employed here is the use of regular expressions and javascript to change the way in which the Twitter feed is published.