Twitterwall mit Javascript: Twitterwalljs

written by devangelist on November 12, 2012 in Allgemein and API and Javascript and jQuery and jQuery UI and JSON and Twitter with 8 comments

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.

Twitterwall mit Javascript: Twitterwalljs: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,75 von 5 Punkte, 4 abgegebene Stimmen.
Loading ... Loading ...

About the Author

Roberto Bez ist passionierter Webentwickler und TechLead bei der HolidayCheck AG. Für Roberto bedeutet das Entwickeln nicht nur Arbeit, sondern auch Freude, Motivation und täglich neue, aufregende Herausforderungen. Besonders gerne setzt er sich mit neuen Webtechnologien sowie Datenbanken aller Art auseinander und versucht diese in die tägliche Anwendungsentwicklung miteinzubringen. Neben dem Entwickeln trifft man ihn gerne Abends beim Laufen oder im Sommer bei Mountainbike-Touren durch die schönen Berge Südtirols.