Twittering – and Customizing Twitter Code (How-To)

Jens Meiert, October 11, 2007 / April 13, 2009.

This entry is filed under Web Development.

At first I was a little bit sceptical, but I finally joined Twitter. For now I’m really surprised about it anyway, “twittering” already makes fun, and hopefully I won’t forget about more serious things

However, it’s probably interesting to note some technical things: Apparently it’s not only useful to add the Twitter Widget to the Mac OS Dashboard, but also to install the Twitter Updater plug-in for WordPress – unless it doesn’t work as seems to be the case with my blog.

Even more obvious appeared the idea to integrate Twitter into the own website, and after searching and browsing around I decided not to use and hack any other WordPress plug-ins but to bank on the Twitter “badges” instead. These, however, output code as expected but not as desired, so I decided to customize it a bit.

Quickly Hacking Twitter Code

This roundup’s probably most useful when you want to show only one Twitter snippet on your site without any time information.

The three things that bothered me the most were the new text attribute in text="text/javascript" – nice carelessness –, the HTML code in general as well as the “about … ago” information. type was added quickly, and the latter two issues have been located in the blogger.js file, obviously requiring but making it easy to create an own Twitter script file:

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 += (twitters[i].text)
  }
  document.getElementById('twitter').innerHTML = statusHTML;
}

The above code – probably still simplifiable? – only looks for an element with a “twitter” ID and, in conjunction with the other (JSON) script, fills it with your last Twitter message. Its file call just needs to replace the original script element calling blogger.js. So when you want to use it, simply put it in a script file or download mine and replace

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>

with

<script src="http://example.ms/twitter.js" type="text/javascript"></script>

Finally, your HTML now only needs to contain the aforementioned “twitter” ID. To sum that guerrilla tour up, here’s what I currently use on my homepage:

<p>Latest <a href="http://twitter.com/j9t">twitter</a>: <q id="twitter">Not available.</q></p>
<script src="/setup/js/twitter.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/j9t.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>

“Not available” means a quick fallback in case JavaScript’s deactivated; the q element appeared most appropriate. The result is a simple solution that works for me; hopefully, it’s helps some of you, too.

And now, if you’ll excuse me, I need to twitter

Update (March 3, 2008)

A few seconds ago, I removed the Twitter snippet from my homepage, as it was just too much to load. The example above should work nonetheless, that’s why I saved the customized Twitter script file in a different place now.

Enjoy the most popular posts, probably including:

Comments

On October 11, 2007, 23:47 CEST, Dirk Schürjohann said:

Twitter is boring Pownce was nice, but is kind of dead now.

Jens Meiert