I’ve recently become a Twitter user and I’m starting to use the service on a more regular basis. Considering how much I’m using the service now, I wanted to integrate some of the messages posted there onto my blog.

The folks at Twitter have 3 badges for use with custom made blogging engines. The first two are Flash based and I ruled those out quickly. The third was based on HTML and Javascript. This option gives me the most flexibility as far as configuration was concerned so I chose to go that route.

The process of getting the Twitter badge/updates to render on my site is fairly simple. Include some HTML and the following Javascript files:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" 
src="http://twitter.com/statuses/user_timeline/eddorre.json?callback=twitterCallback2&amp;count=5">
</script>

Usually Javascript files are loaded from the HEAD section of an HTML file, but the Twitter page specifically suggests to move the Javascript lines to the bottom of the page. The rationale behind this is simple; if Twitter is down and the their Javascript files are in the HEAD section then your page won’t load! In theory, by moving the Javascript lines to the bottom of the page they will be activated last after your page has already loaded.

Unfortunately, different browsers render Javascript and the DOM differently and there is no guarantee that a failure of the Twitter service will result in your page loading. The solution is to wait until the DOM is fully loaded before including or calling those Javascript files.

With any modern Javascript library such as Prototype (it’s what I use), jQuery, YUI, etc., it’s simple to interrogate the DOM to find out if it’s been loaded or not. The solution that I wanted was to display a “loading” graphic while the Twitter updates were loading and once they were finished, then the “loading” graphic would disappear; a standard ajax-y interface.

My solution was to render the “loading” graphic, wait until the DOM was loaded and then append the Javascript to the end of the BODY element.

Here is my implementation:

//Wait for DOM to fully load
Event.observe(window, 'load', function () {
	loadTwitterJSFiles("http://twitter.com/javascripts/blogger.js");
        	loadTwitterJSFiles("http://twitter.com/statuses/user_timeline/eddorre.json?callback=twitterCallback2&count=5");

//Hide twitter_spinner div
$('twitter_spinner').hide();
});

function loadTwitterJSFiles(url) {
      var urlRef = document.createElement('script');
      urlRef.type = "text/javascript";
      urlRef.src = url;

      if (typeof urlRef != "undefined")
          document.body.appendChild(urlRef);
};

There were a couple of adjustments that I had to make in order for it to work right. First off, notice the second Javascript line that Twitter gives you. In it, it refers to & where my code just has the & symbol. I had to make this change because I noticed when using the appendChild method it would insert a double & and therefore breaking the URL.

The second thing that I had to modify was the original DOM checking mechanism. In the Prototype documentation it says that you can observe the DOM loading by the following:

document.observe("dom:loaded", function () {
Your code here
});

This never worked out for me as it would never display the “loading” graphic even while getting the updates from Twitter was slow. I’m not sure if it hid it immediately or not, but I changed it to the code above that waits for the “window” to load and it’s worked out for me.

So that’s it. This works in IE7, Safari 3, and Firefox 3.