Mein Twitterwall-Skript

Warum eine eigene Twitterwall bauen?

Natürlich kommt die Frage auf, warum es unbedingt was eigenes sein sollte, und die im Netz verfügbaren nicht ausreichen. Mein Ziel war die Entwicklung einer Twitterwall für Veranstaltungen, im speziellen die Parteitage der Piratenpartei. Dort haben wir immer eine Twitterwall aus dem Netz genutzt. Leider war das nur eine schlechte Lösung, aus folgenden Gründen:

• Schlechtes Design

• Nicht Beamer-optimiert

• Nur einen Hashtag

• verbuggt

Also habe ich mich mal dran gesetzt, und selber eine Twitterwall gebaut bzw. angepasst.

Grundgedanken

Als ich mir die Dokumentation mal angesehen habe, sah ich, dass nur noch die 1.1er API unterstützt wird. Die braucht bekanntlich auf jeden Fall eine Authentifikation. Da die Twitterwall Multiuserfähig sein sollte, muss sich jeder selbst anmelden. Das war mein erster Knackpunkt. Als zweites bin ich einfach nicht durch die Streaming API durchgestiegen. Naja. Erstmal gelassen.

Dann bin ich mehr oder weniger aus Zufall auf die Twitterwall von Ahmet Topal gestoßen bzw. auf seinen Blog. Da er die Wall auch als Download anbietet, habe ich sie mir mal geschnappt und genauer analysiert. Hier wird alle X Sekunden ein Skript aufgerufen, welches den RSS-Feed einer Suche nach den Hashtags abgreift, aufdröselt und dann mit den bisherigen anhand der ID vergleicht. Wenn die ID neuer ist (der Tweet also nach dem neuesten angezeigten abgesetzt wurde), wird dieser in die eigentliche Website mit einer Animation zusammen eingefügt. Das war genau das was ich gesucht habe. Ich wusste nur nicht, dass der RSS-Feed noch geht. :D

Das ist also erst einmal eine Arbeitsbasis. Mich störten allerdings noch einige Sachen. So wurde der Lesefluss extrem dadurch gehindert, dass ein neuer Tweet direkt erscheint und nicht eingeslided wird, man also erstmal suchen muss, bei welchen Tweet nun grade gelesen wurde. Weiterhin springen die Profilbilder immer rechts und links, was auf Dauer leider sehr nervig ist.

Meine Anpassungen

Also musste ich mich ransetzen und den Code anpassen, so wie ich ihn haben wollte.

Design

Zuerst habe ich mich ans Design gesetzt. Der Blaue Hintergrund wurde durch ein dezentes graues Rauschen ersetzt, die Tweets wurden auf 100% Breite gesetzt. Ich habe eine neue Schriftart eingebaut und dieses rechts-links-Sprungsystem entfernt.

Weiterhin habe ich mich etwas länger mit der Animation beschäftigt. Vorher war es ein dreimaliges Blinken, inzwischen ist es ein vertikales Öffnen. Trick an der Sache ist, dass die Tweets erst ausgeblendet werden müssen. Wenn ein neuer Tweet da ist, erscheint er ja erstmal so. Erst dann kann das mitgelieferte JavaScript die Animation ausführen. Lösung? Ich blende den Tweet in einer kurzen Zeit aus. 1 Millisekunde war noch zu viel, man sieht dabei dann ein seltsames Hüpfen der unteren Tweets. Bei einer Mikrosekunde ignoriert der Browser dann die vorherige Darstellung, oder der Monitor kommt mit dem Anzeigen nicht hinterher. Egal, das Hüpfen ist weg. Dann kann ich die 1,5-sekündige einslide-Animation ablaufen lassen. Als letztes habe ich noch die Scrollbalken entfernt, sehen auf dem Beamer doof aus. Designmäßig passt jetzt alles.

Technik

Nachdem ich die Seite auf meinen uberspace geladen habe, viel mir irgendwann ein "springen" der Tweets auf. Die Tweets waren einfach ohne Animation da und/oder verschwanden nach einem Aktualisierungsintervall wieder. Lange habe ich nach der Ursache gesucht, irgendwann habe ich sie dann gefunden. PHP führt jeden Aufruf des Skriptes in einer virtuellen Umgebung aus, sodass sie sich dort nicht in die Quere kommen. An einer Stelle hatte ich aber eine einzige Verbindung in die Außenwelt, wenn man das mal so nennen kann. Die ID des letzten Tweets wird in einer einzigen .txt Datei gespeichert - natürlich ganz und gar nicht Multiuserfähig. Dadurch kann eine letzte ID dort von einer anderen Instanz drin stehen, die von meinem Skript erst noch aufgerufen wird. Das sorgt dann eben für diese Probleme.

Die Lösung? Kekse. Also auf Englisch, Cookies. Hat jetzt nichts mit dem Gebäck zu tun, es sind quasi kleine Krümel mit Inhalten, die lokal auf dem PC gespeichert werden. Also speichere ich die letzte ID in diesem Cookie. Die PHP-Skript-Instanz kann darauf zugreifen und findet immer die richtige ID. Zuletzt gebe ich noch ein JavaScript aus, das die neue letzte ID wieder als Cookie speichert. Jetzt funktioniert die Wall endlich perfekt.

Das einzige Problem, was es jetzt noch gibt: Tweets werden bei 140 Zeichen abgeschnitten. Im Normalfall kein Problem, allerdings werden Retweets so unter Umständen nicht komplett ausgeliefert. Hier hängt Twitter automatisch "RT @username:" vor den eigentlichen Text des Tweets. Somit könnten hier die 140 Zeichen überschritten werden und Twitter fügt nach den 140 Zeichen nur noch ein ... ein. Dies ist allerdings ein Problem von Twitter, da kann ich nichts dran ändern.

Einsatz auf dem eigenen Webserver

Bewusst habe ich keine Möglichkeit eingebaut, die Hashtags selber zu ändern (Kommt vielleicht noch in einer späteren Version). Das Skript ist dazu gedacht, es selber zu hosten und dann entsprechend anzupassen. Weiterhin kann man somit remote die genutzten Hashtags ändern, da diese jedes mal bei der Aktualisierung neu aufgerufen wird.

Das Skript könnt ihr weiter unten herunterladen. In dem Ordner liegt auch eine Readme.txt, in der alle Schritte zur Installation genau aufgelistet sind. Zum Betrieb nötig ist ein Webserver, der PHP-fähig ist und mit der Außenwelt (also Twitter) kommunizieren darf. Das wars auch schon!

Tja, es kam wie es kommen musste: Twitter hat die alte API abgeschaltet. Somit ist mein Skript leider nutzlos geworden. Aber ich arbeite schon an einer neuen Version, guckt also ab und an mal vorbei, um nichts zu verpassen. Alternativ könnt ihr natürlich auch den RSS-Feed abbonieren. Update: Inzwischen habe ich die Twitterwall weiterentwickelt. Infos dazu gibt es hier. Der Link oben weist nun auch auf die aktuelle Version hin.