Twitterwall in wenigen Schritten selbstgebaut

Nachdem ich letztens mit dem Artikel Facebook Like-Button per Javascript nachladen bereits einen kleinen Tech-Talk zum sozialen Netzwerk Facebook gestartet habe, möchte ich mich heute auf Twitter konzentrieren. Auch für den Microblogging-Dienst gibt es selbstverständlich eine mächtige API, mit der man ohne Frage die twitter.com – Webseite 1:1 nachbauen könnte.

Dies soll heute aber nicht unsere Aufgabe sein, würde auch sicherlich den Rahmen eines smarten Blog-Artikels sprengen – wir beschränken uns auf eine sehr simple Twitterwall, für die  wir nicht einmal Zugriff auf die Twitter-API benötigen!

ACHTUNG: Dieser Beitrag stammt vom März 2011 und ist nicht mehr aktuell! Mittlerweile hat Twitter größere Änderungen an seiner API vorgenommen, so dass bestimmte Funktionen aus diesem Tutorial leider nicht mehr korrekt funktionieren werden.

Einsatzbereiche einer Twitterwall in der Praxis

Häufig werden Twitterwalls zu einem bestimmten Hashtag erstellt, um aktuelle Tweets zu Events oder Veranstaltungen gebündelt wiederzugeben. Sucht ihr bei Twitter zum Beispiel nach #Cebit, werde ihr mit Sicherheit alle paar Sekunden einen neuen Tweet von einem Cebit-Besucher hereinbekommen, der direkt von der Computermesse oder auch nur darüber berichtet. Vor allem bei spontanen, nicht planbaren Ereignissen, aber auch bei Katastrophen, haben sich Twitterwalls in der Vergangenheit bewährt. Einige dürften sich noch an das #Erdbeben letzten Monat erinnern. Twitter-Nutzer dürften diejenigen gewesen sein, die als erstes über dieses Ereignis informiert gewesen sind – außer natürlich denen wo wirklich alles gewackelt hat ;-)

Dann gibt es auch noch die Twitterwalls, welche lediglich bestimmte Tweets einer einzigen Person anzeigen. Da man für oben genannte Ereignis-Twitterwall einen Zugriff auf die API benötigt und dadurch die Geschichte einiges komplizierter wird, beschränken wir uns in diesem Artikel auf die Personen-Wall. Wenn ich im folgenden von der Twitterwall spreche, meine ich also immer eine Auflistung der letzten Tweets eines bestimmten Benutzers.

Dieser Benutzer müsst übrigens nicht ihr selber sein. Für meinen Artikel war @Ramminger so freundlich, sich und seinen Twitter-Account beispielhaft zur Verfügung zu stellen.

Twitter über die URL anzapfen

Wie gesagt, um Tweets eines bestimmten Nutzers anzeigen zu lassen, brauchen wir keine API. Es sind also auch keinerlei hinterlegte Login-Daten nötig, um an die Tweets zu kommen. Macht ja auch Sinn, schließlich kann jeder Nutzer auf die Tweets von anderen Nutzern (solange diese freigegeben sind) zugreifen.

Gebt diese URL doch mal in eure Adresszeile ein. Ihr dürftet eine Liste der letzten fünf Tweets von @Ramminger erhalten, welche nach den XML-Regeln formatiert ist.

Diese XML-Ausgabe von Twitter selbst stellt die Grundlage für unsere Twitterwall dar. Unsere Aufgabe ist es nun, auf die Ausgabe per PHP-Script zuzugreifen, diese auszulesen, zu verarbeiten und anschließend schön formatiert auszugeben. Los geht’s…

PHP-Script zum Verarbeiten der XML-Einträge

Ich habe mich entschieden, in diesem Artikel erst einmal mit den Basics anzufangen und das Script nach und nach zu ergänzen. So hoffe ich, dass jeder mitkommt und nicht vom Quellcode erschlagen wird.

• Zeile 2-3: In einer PHP-Variablen speichern wir zuerst den Namen des Twitter-Nutzers, deren Tweets ermittel werden sollen. Die zweite Variable legt fest, wie viele Tweets angezeigt werden sollen. Die Sortierung beginnt automatisch mit dem neuesten Tweet. Geben wir also eine 5 an, werden in unserem Fall die fünf letzten Tweets von @Ramminger angezeigt.
• Zeile 5: Eine sehr wichtige Stelle im Script. Mit der PHP-Funktion simplexml_load_file(), welche erst in PHP5 hinzugekommen ist und das parsen von XML-Dateien erleichtert, greifen wir auf die oben erwähnte Twitter-API-Url zu. Unsere beiden definierten Variablen finden hier ihre Verwendung. Außerdem schreiben wir ein @-Zeichen vor die Funktion, um eine Fehlerausgabe zu unterdrücken, falls Twitter mal nicht Erreichbar ist oder etwas anderes schief geht.
• Zeile 8: Mittels einer foreach()-Schleife lassen wir das in Zeile 5 gewonnene simplexml-Object durchlaufen. Wer sich dafür interessiert, welche Informationen alle in der $tweet-Variablen versteckt sind, sollte einmal print_r($tweet); nutzen – sehr interessant!
• Zeile 10: Wir erhalten den eigentlichen Tweet-Text aus der Variablen $t->text. Um eine fehlerfreie Ausgabe der Umlaute und Sonderzeichen auf den meisten Seiten zu gewährleisten, führen wir noch ein utf8_decode() aus. Falls die Umlaute bei euch fehlerhaft dargestellt werden, entfernt diese Funktion oder versucht sie durch utf8_encode() zu ersetzen.
• Zeile 11: In unserem kleinen Beispiel beschränken wir uns auf den Tweet-Text und die Ausgabe der jeweiligen Uhrzeit. Natürlich können viel noch auf viele viele weitere Parameter zugreifen, dass Muster bleibt jedoch immer das selbe: $t->parametername. Wie die einzelnen Parameter heißen, erfahrt ihr, wenn ihr die API-Url direkt mit dem Browser aufruft. Zurück zur Uhrzeit: Da das Datum in einem unhandlichen Format übergeben wird, formatieren wir es mittel der twitter_timestamp($str)-Funktion in einen gültigen PHP-Timestamp. Auf die Funktion in Zeile 22 möchte ich nicht näher eingehen, da sich diese aus recht komplexen regulären Ausdrücken zusammensetzt. Uns reicht es an dieser Stelle zu wissen, dass sie das von Twitter erhaltene Datumsformat abändert und einen Timestamp zurückliefert.
• Zeile 13: In der Variable $ausgabe erzeugen wir für jeden Tweet einen neuen div-Container und hängen ihn an. Der Text kommt jeweils in ein p-Element, genau wie das Datum. So lassen sich die Bereich später über CSS schön formatieren. Natürlich kann man die Klassen auch umbenennen oder die Reihenfolge verändern usw. Mittels der PHP date()-Funktion geben wir zuerst das Datum des Tweets im Format dd.mm.yyyy und anschließend die Uhrzeit im Format hh:mm aus.
• Zeile 20: Alle in der Variable $ausgabe gesammelten Tweets geben wir hier per echo-Befehl aus. Einige werden nun denken, dass man die Tweets auch gleich per echo ausgeben kann – das ist auch richtig, jedoch gibt es gleich noch eine kleine Modifikation so dass wir diese Variable schon jetzt mit einbauen.

Fertig ist unsere kleine aber feine Twitterwall mit den fünf letzten Einträge von @Ramminger. Im folgenden Screenshot seht ihr, wie die Ausgabe zum jetzigen Zeitpunkt und mit ewas CSS-Formatierung beispielsweise aussehen könnte.

Twitter-Auszeiten per Cache umgehen

Bei der praktischen Verwendung der Twitterwall auf meinem eigenen Portfolio ist mir aufgefallen, dass unangenehm häufig keine Ergebnisse übermittelt werden. Den genauen Grund kenne ich nicht und am Script konnte ich keine Schwachstellen ausmachen, also vermute ich, dass Twitter entweder die Zugriffe auf die öffentliche API limitiert hat oder ab und zu einfach mit den Anfragen überfordert ist.

Doch kein Problem, auch dieses Problem kriegen wir mit einer kleinen Code-Änderung in den Griff.

Schauen wir uns die Passagen an, welche sich geändert haben:

• Zeilen 24-26: Nach der Ausgabe der Tweets öffnen wir zusätzlich eine Textdatei, welche sich im gleichen Verzeichnis befinden und ausreichend Schreibrechte (CHMod 777) besitzen sollte. Diese Datei habe ich im Beispiel einfach mal twitter.txt genannt. Wir öffnen die Datei mit dem w-Flag zum Schreiben und geben ihr den Inhalt der $ausgabe-Variable. Anschließend schließen wir die Verbindung zur Datei wieder.
• Zeile 6: Hier ist eine neue if-Abfrage hinzugekommen. Wir schauen, ob im $tweet-Array überhaupt Einträge angekommen sind. Falls keine Verbindung zu Twitter hergestellt werden konnte, bleibt diese Variable natürlich leer. Wenn dies der Fall ist, geht es in Zeile 29 weiter, ansonsten wie gewohnt in Zeile 8.
• Zeile 30-35: Wie bereits erwähnt: Wenn die if-Abfrage in Zeile 6 ein negatives Ergebnis erbrachte, öffnen wir die Datei twitter.txt mit dem r-Flag zum Lesen. Den Inhalt der Datei speichern wir in der Variable $content, welche wir in Zeile 35 ausgeben.

Auf diese Weise haben wir uns ein kleines Cache-Modul für unsere Twitterwall geschrieben.

Weitere Verbesserungsvorschläge

In der Twitterwall auf meinem Portfolio gibt es noch einige weitere nützliche Funktionen, die an dieser Stelle allerdings den Rahmen sprengen würden. Der Vollständigkeit halber möchte ich sie hier trotzdem erwähnen, einige findige Entwickler werden sie mit Sicherheit in kurzer Zeit nachbauen können.

• Die Twitterwall mit AJAX auslagern. Klar, ein Zugriff auf die Twitter-Server tut der Ladezeit nicht gut. Eine Möglichkeit wäre, die Twitterwall erst zu laden, wenn die sonstige Seite komplett fertiggeladen ist. Mit jQuery & Co. dürfte dies kein Problem darstellen.
• Echtes Caching implementieren. Momentan wird bei jedem Aufruf die Twitter-API angezapft. Mittel einer SQL-Datenbank könnte man eine Sperre einbauen und die Abfrage zum Beispiel nur alle 10 Minuten gewähren. In der restlichen zeit würde auf die Cache-Datei twitter.txt zurückgegriffen.
• Links automatisch maskieren. Es ist ganz nett, wenn Links und Hashtags auch automatisch verlinkt würden. Mit den richtigen regulären Ausdrücken eine Sache von wenigen Sekunden.

Quellcode herunterladen

Wenn ihr den gesamten Quellcode samt CSS-Formatierungen wie im oberen Beispiel herunterladen wollt, klickt einfach auf den folgenden Button:

Dieser Artikel wurde am 02.03.2011 veröffentlicht