08 November 2008

Matt Raible added Twitter updates to his blog. (Exhibit A). I decided to the do same. First, you'll need the twitter.js JavaScript. This can be found here. I would download this one. Install that script onto your site, ie:

 <script type = "text/javascript" src="/js/twitter-1.11.2.min.js" ></script> 

Finally, add the code on your page to configure and use it.

This looks something like this:

<script type = "text/javascript"  > 
     getTwitters('twitter_box', {
        id: 'YOUR_TWITTER_ID', 
        prefix: '', 
        clearContents: false, // leave the original message in place
        count: 3, 
        withFriends: true,
        ignoreReplies: false

This javascript tells the script to load the latest 3 updates (count) in the HTML element (in my case, a regular old DIV element) having ID "twitter_box". It tells the script that, if there's already something inside that DIV element, it should merely append to it, not overwrite it.

The prefix attribute let's you specify what code you want to have inserted above and beyond the link and status text. This javascript has its own little macro substitution routine! You can dynamically insert variables like the url of your tweet ("tweet being what a single status update on twitter is called.) into the prefix string and it'll get replaced at runtime.

Finally, make sure to insert the HTML element where you want the Twitter updates to display somewhere on your page.

The html is easy, and could be as simple as

 <div id = "twitter_box"> My <a href="http://www.twitter.com">Twitter.com</a>. <div>  

Thanks, Matt!