Thursday, October 2, 2008

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.

8 comments:

Nimal said...

That's really useful... Good work...

Seems this is another little application of REs. :)

Senaka said...

Yeah... RegEx :).. hehe..

Nimal said...

seems there is little bug in it... for @user... (?)

Senaka said...

Yeah, I corrected it, the order of the two statements is important. :)...

Nimal said...

Nice work...!

Vijay said...

Great script. Works fine in my blog. Thanks.
I found you throuh @talkout :)

Senaka said...

Thanks Vijay. And, many thanks to Nimal for helping me get this to work.

btw, I paid a visit to http://www.catscanman.net/blog/. Wow! that's a great blog on health/medicine. Good job.

Regards,
Senaka

Bill Walsh said...

Always good to find yet another method to help cut down on time and increase the syndication of content.

thanks for sharing