Twitter Updates auf der eigenen Webseite

Dieser Artikel enthält keine bahnbrechenden Neuigkeiten. Genau genommen gab es alles schon irgendwo. Allerdings werden viele interessante Techniken in einem kleinen Programm verwendet, was vielleicht doch einen Blick wert ist.

Das Neueste bei Twitter auf firsttrimester.net

Die Aufgabe bestand darin, einen Microblog in eine Webseite einzubauen. Selber hosten wäre zu einfach und zu zuverlässig, ich entschied zugunsten von Twitter. Aus mehreren Gründen ist es ungünstig den Tweet in den Browser des Besuchers direkt von Twitter laden zu lassen, zum Beispiel mit Ajax oder einem iFrame. Erstens hat Twitter dann Informationen über die Besucher, zweitens dauert das durch den DNS Resolve von twitter.com und den nachfolgenden Aufbau der HTTP-Verbindung unnötig lange und drittens gäbe es bei einer HTTPS-Seite clientseitige Warnungen wegen mangelnder SSL-Verschlüsselung. Also kommt ein kleiner Proxy, man kann auch sagen Repeater auf den Webserver. Er braucht eigentlich nur den Tweet zu holen und an den Client durchzureichen. Wenn er schon mal da ist, kann er auch gleich mit einem Cache die langsame Twitter-API und die häufigen Twitter Downtimes abpuffern. Und nebenbei noch die Hashtags und User mit je einem preg_replace verlinken. Das sieht in PHP so aus:

<p class="twitterhead">
  Neuigkeiten auf
  <a href="http://twitter.com/firsttrimester"
    id="twitterupdatelink">twitter.com/firsttrimester</a>:
</p>
<?
if (filemtime("twitter-updates")+1000<time()) {
  $tweet=@file_get_contents("http://www.twitter.com/statuses/".
      "user_timeline/firsttrimester.json");
	if ($tweet) file_put_contents("twitter-updates",$tweet);
}
$tweet=file_get_contents("twitter-updates");
$tweet=json_decode($tweet);
for ($a=0;$a<4;$a++) {
  $text=$tweet[$a]->text;
	$text=htmlspecialchars($text,ENT_QUOTES,"UTF-8");
  $text = preg_replace( '/http:\/\/(\S+)/i',
      '<a href="\0">\1</a>',$text);
  $text = preg_replace( '/#([A-Za-zäöüÄÖÜ0-9-_]+)/i',
      '<a class="twitterhashtag" '.
      'href="http://twitter.com/#search?q=%23\1">\0</a>',
       $text);
  $text = preg_replace( '/@([A-Za-z0-9-_]+)/i',
      '<a class="twitterhashtag" '.
      'href="http://twitter.com/\1">\0</a>',
       $text);
  $age = time()-strtotime($tweet[$a]->created_at);
  if ($age<86400)
      $age="<span class=\"twitterage\">heute:</span> ";
  elseif ($age<604800)
      $age="<span class=\"twitterage\">diese Woche:</span> ";
  else $age="<span class=\"twitterage\">".
      date("j.n.Y",strtotime($tweet[$a]->created_at)).":".
      "</span> ";
  echo "<p>".$age.$text."</p>";
}
?>

In der Datei twitter-updates wird der Tweet zwischengespeichert. Ist der Cache älter als 1000 Sekunden, fordert das Script die neueste Version von Twitter an und speichert sie in der twitter-updates. Der Tweet kommt im recht kompakten Format Json und muss erst in ein Objekt und dann in HTML umgebaut werden. Der PHP-Code sollte nicht direkt in die Webseite, denn wenn die 1000 Sekunden um sind und Twitter hängt, lädt die ganze Seite nicht. Also wird eine extra PHP-Datei daraus gemacht und mit Ajax eingebunden. Meine Lösung in JQuery:

<div id="twitter">
</div><!-- twitter -->
<script type="text/javascript">
  $(function() {
    $.get("twitter.php", function(data){
      $("#twitter").html(data);
    });
  });
</script>

JQuery füllt das anfangs leere DIV-Element mit dem Tweet. Das Script kann an jeder beliebigen Stelle im Dokument gespeichert werden, nach Möglichkeit sollte er in den Header. Da es sich nicht um ein iFrame handelt, ist die Zeichencodierung die gleiche wie auf der restlichen Seite. Twitter schickt den Tweet in UTF-8.

Leave a Comment