Möchte man seinen Twitter-Status auf einer Website anzeigen, werden einem von Haus aus zwei Möglichkeiten angeboten. Die eine, bestehend aus sogenannten Flash badges, ist hässlich und benutzt Flash, die andere verwendet Java Script ist im Prinzip ganz brauchbar, richtige Anwendung vorausgesetzt.

Twitter serviert hierfür folgenden Code:

<script type="text/javascript">
	function twitterCallback(obj) {
		var id = obj[0].user.id;
		document.getElementById('my_twitter_status').innerHTML = obj[0].text;
		document.getElementById('my_twitter_status_time').innerHTML = obj[0].relative_created_at;
	}
</script>
<span id="my_twitter_status"></span> <span id="my_twitter_status_time"></span>

<script type="text/javascript" src="http://www.twitter.com/t/status/user_timeline/1161711?callback=twitterCallback&count=1"></script>

Die Zahl 1161711 ist in diesem Fall meine Twitter-ID und ist natürlich bei jedem User eine andere.

Verbesserungspotenzial

Kopiert man diesen Quelltext einfach in seine Seite hinein, funktioniert das Ganze und der Twitterstatus wird an der Stelle des Codes angeziegt. Es funktioniert nur nicht sonderlich gut, da Twitter im Moment doch über weite Strecken ausgesprochen langsam lädt. Das hat zur Folge, dass aller Seiteninhalt, der auf den Twitteroutput folgt, erst dann geladen wird, wenn die Daten von Twitter abgerufen wurden. Und das kann in im Moment gerne auch mal 60 Sekunden und mehr dauern. Währenddessen wird dort, wo der Status erscheinen soll, überhaupt nichts angezeigt. Das ist beides nicht schön, aber zum Glück leicht zu beheben.

Optimierung des Ladevorgangs

Zunächst gilt es zu verhindern, dass das langsame Laden von Twitter den Seitenaufbau blockiert. Dazu verfrachtet man einfach das zweite <script>-Element an das hinterste Ende seiner Seite. Denn erst dieses Element leitet den Twitter-Ladevorgang ein und wenn es am Ende des Quelltextes steht, blockiert es nichts, wenn es mal länger dauert.

Analog hierzu sollte man auch das erste <script>-Element, das die Funktion für den Ladevorgang enthält, in den <head> seiner Seite oder in eine externe JS-Datei verschieben.

Eyecandy

Ist das getan, bleibt immer noch das unschöne Loch an der Stelle, in die nach einiger Wartezeit der Twitterstatus geladen wird. Diese lässt sich am besten mit einen schicken Ajaxloader füllen, den man einfach per HTML an die Stelle setzt, an der später der Status erscheint - im Originalcode wäre das im <span>-Element. Sobald die Twitter-Daten geladen wurden, verschwindet das Loaderbild automatisch und wird durch den Status ersetzt.

Führt man diese zwei nun wirklich nicht sonderlich schwierigen Schritte aus, hat man die Twitterei in seiner Seite sofort entscheidend verbessert. Ist Twitter mal wieder lahm, stört das niemanden, weil es dann nur ein wenig länger dauert, bis der Loader verschwindet... und nicht mehr ganze Spalten in Weblogs nur noch bis zur Hälfte laden.

Nachtrag: Update bei Twitter

Twitter hat kürzlich (April 2007) etwas an der Ausgabe der Zeit seit dem letzten Update geändert. Deswegen ist es nicht mehr ratsam, den im ersten Abschnitt dieses Artikel geannten JS-Code zu kopieren. Alles andere (Platzierung des Codes, Eyecandy) gilt und funktioniert aber weiterhin.