Besonders bei Events beliebt – die sogenannte Twitterwall. Diese einfache Sammlung von Tweets wird auf einer Webseite dargestellt und bietet eine Informationsquelle über das Geschehen zu einem bestimmten Begriff (Hashtag). Die 140-Zeichen-feeds werden bei vielen “Walls” in der Form einer Sprechblase dargestellt.
Natürlich muss der Besucher der Webseite nicht ständig die Seite aktualisieren, denn das macht das Plugin nämlich selbst.
Twitter bietet eine erstaunlich einfache, aber dennoch mächtige API, welche in modernen Anwendungen per REST im JSON-Format angesprochen wird. Als clientseitige Hilfe wird das jQuery-Framework verwendet (Funktion: getJSON), welche die Abfrage bei Twitter’s API zum Kinderspiel macht.
Vorteil dieser Variante ist jener, dass keinerlei server-seitiger Code benötigt wird, somit die Webseite nicht belastet wird und keine zusätzlichen Ressourcen, bis auf das kleine Plugin selbst, benötigt.
Einbau
Die js und css Dateien referenzieren (Ebenfalls momentjs und underscore hinzufügen, falls noch nicht im Projekt vorhanden):
<link rel="stylesheet" href="twitterwalljs.css" /> <script type="text/javascript" src="twitterwalljs.js"></script>
Das Plugin im document-load Event der Seite aufrufen:
$(document).ready(function () {
$("#twitterWall").twitterWall("javascript", { refresh: true, refreshTimeout: 5000 });
});
Nach Angabe der JS und CSS Datei wird beispielsweise im load-event das Plugin auf ein HTML-DIV-Element mit der id twitterWall erstellt. Im obigen Beispiel werden die 100 neuesten Tweets zum Thema Javascript geladen und alle 5 Sekunden auf neue Einträge aktualisiert.
Mögliche Optionen sind:
refresh: true, refreshTimeout: 15000, maxTweetsInWall: 200, firstLoadResults: 100, language: 'de', detectLanguage: true, // ab 1.1.0 apiUrl: 'http://search.twitter.com/search.json?callback=?&result_type=recent&q=' + search
Die Parameter sollten selbsterklärend sein. Intern ruft das Plugin über getJSON die API-URL auf und gibt bei Bedarf eine max_id mit. Diese wird für das paging verwendet, sprich für das nicht ständige, komplette Neuladen aller Tweets, sondern nur noch jener, welche nicht geladen wurden. Zum Beispiel:
- Eine Abfrage aller Einträge zum Thema Javascript liefert neben den 100 Tweets eine max_id von 100 zurück.
- In der nächsten Abfrage wird diese als since_id mitgegeben und anhand dieser werden nur Einträge mit einer neueren ID zurückgeben.
Zu beachten gilt, dass Twitter seit einiger Zeit für die ID’s der Einträge den unsigned integer Datentyp verwendet und diese somit keiner inkrementellen Reihenfolge entsprechen.
Der Code sowie ein Beispiel befinden sich auf Github.
Für eine Livedemo siehe auf twitterwall.it
Update:
Version 1.1.0 bietet nun multi-language support. Die gewünschten Sprachdateien für MomentJs können auf der Projektseite heruntergeladen werden. Es wird empfohlen, nur die benötigten Sprachen zu referenzieren oder eine Datei zu erstellen, welche alle benötigten Sprachen beinhaltet (zum Beispiel: moment.de-it-en.js). Standardmäßig wird die Sprache des Browsers (bei Webkit-Browsern) bzw. die Sprache des Systems (IE-Browser) verwendet.