giu's journal » Den aktuellsten Twitter-Eintrag mittels jQuery-AJAX und SimplePie (RSS Parser) anzeigen (für Wordpress und Sonstiges)

Den aktuellsten Twitter-Eintrag mittels jQuery-AJAX und SimplePie (RSS Parser) anzeigen (für Wordpress und Sonstiges)

Written by Giu · 24.06.2008

seit geraumer zeit benutze ich das Twitter for Wordpress-plugin um den aktuellsten twitter-eintrag anzeigen zu lassen. wie wir alle wissen, ist twitter.com mit dem thema erreichbarkeit so gut befreundet wie’s barack obama mit john mc cain ist.

das problem mit dem plugin: meine ganze seite wurde immer blockiert bzw. nur halb geladen, sobald das script den twitter-feed neu abfragen musste. die teils langen ladezeiten, die dank dem plugin entstanden, waren sehr nervig. wirklich.

vor einigen tagen habe ich meinen persönlichen rss-reader “ajaxifiziert“. mit jquery. die seite wird nicht immer blockiert, sobald ein feed aktualisiert wird. da habe ich mir gedacht, dass ich das gleiche mit dem twitter-feed machen kann: mittels jquery-ajax den aktuellsten eintrag aus meinem twitter-feed abholen und anzeigen. und so hab ich’s kurz implementiert. meine seite wird jetzt immer schön vollständig geladen und der aktuellste twitter-eintrag wird mittels ajax geladen und angezeigt, inklusive animation solange bis der eintrag angezeigt wird. keine lange ladezeiten mehr. kein blockieren. nichts!

Um was geht’s in diesem Beitrag

in diesem beitrag möchte ich euch nun zeigen, wie man mittels jquery-ajax und simplepie (ein rss parser) mir meinen letzten twitter-eintrag in der sidebar anzeigen lassen kann (ohne dass die seite blockiert (und nur halb geladen) wird). dieses tutorial kann auch für andere seiten verwendet werden, die nicht mit wordpress laufen. dazu gibt’s weiter unten den passenden download! von wordpress verwende ich in diesem tutorial lediglich die bloginfo('stylesheet_directory') funktion und die ordner-struktur. ansonsten ist alles andere wordpress-unabhängig und kann überall angewandt werden.

Inhaltsverzeichnis

Zu allererst das Wichtigste: Die Zutaten

für unser kleines twitter-plugin benötigen wir folgende sachen (bitte alle punkte ganz durchlesen):

die aktuellste version von jquery. die heruntergeladene datei kann man auf jquery.js umbenennen und gleich danach in den ordner wp-content/themes/dein-theme platzieren.
die aktuellste version von simplepie (simplepie.inc)die heruntergeladene datei kann man auch gleich in den ordner wp-content/themes/dein-theme platzieren.
einen ordner namens cache im gleichen ordner erstellen, in welchem sich die simplepie-datei simplepie.inc befindet. in diesem ordner – oh wunder – wird unser twitter-eintrag gecached. ohne diesen ordner will simplepie nicht arbeiten! wichtig: für den ordner müssen die unix-rechte 766 gesetzt werden, sodass simplepie da reinschreiben kann. falls mit 766 nichts geht, kann man die unix-rechte auf 777 setzen. dann wird’s funktionieren, ganz sicher.
die feed-adresse eures twitter-accounts
eine grafik die beim laden des twitter-eintrags angezeigt wird (bei ajaxload.info kann man sich einige generieren lassen, in allen schönen farben der welt). die grafik kopiert ihr dann in den wp-content/themes/dein-theme/images-ordner.
die header-datei des aktuellen theme (zu finden im ordner wp-content/themes/dein-theme mit dem unvorstellbaren namen header.php), in welcher wir einige zeilen javascript einfügen werden
die sidebar-datei des aktuellen theme (auch zu finden im ordner wp-content/themes/dein-theme mit dem noch unvorstellbaren namen sidebar.php), in welcher wir unseren twitter-eintrag anzeigen lassen
eine neue datei namens twitter.php (im ordner wp-content/themes/dein-theme), welche mittels simplepie uns immer den aktuellsten twitter-eintrag anzeigt und wir diese datei mittels jquery-ajax aufrufen, um den twitter-eintrag anschliessend in der sidebar anzuzeigen.
kontrolle: die dateien jquery.js, simplepie.inc, twitter.php und der ordner cache sollten sich alle im gleichen ordner – wp-content/themes/dein-theme – und auf gleichere ebene befinden (keine unterordner).

es ist wichtig, dass ihr diese 9 schritte durchlest, da ansonsten ziemlich sicher im späteren verlauf dieses tutorials bei euch etwas nicht funktionieren wird. ich möchte auch noch erwähnen, dass ich hier nur das technische erkläre und getrost auf design-spezifische sachen – mit namen cascading stylesheet – verzichte. ihr könnt dann selber euren twitter-eintrag so umgestalten wie ihr wollt. so, und nun weiter:

Die Datei `twitter.php`: Den aktuellsten Twitter-Eintrag abholen und anzeigen (mit SimplePie)

in der datei twitter.php wird mittels simplepie der twitter-feed abgeholt und der aktuellste eintrag mittels echo ausgegeben. nichts besonderes.

da der code eigentlich nichts besonderes ist, werde ich zuerst den vollständigen code zeigen und anschliessend erklären. der vollständige (und simple) code, der in die datei twitter.php eingefügt werden sollte, ist nämlich folgender:

<?php
require_once('simplepie.inc');
 
/* hier kann man die feed-adresse zum eigenen twitter-feed angeben */
$feed= new SimplePie("http://is.gd/EJ8");
 
$feed->set_cache_duration(120);
$feed->init();
$feed->handle_content_type();
$feed_items= array_slice($feed->get_items(), 0, 1);
 
foreach($feed_items as $item) :
?>
<?php echo str_replace("_giu: ","",$item->get_title());  ?> <a href="<?php echo $item->get_permalink(); ?>" class="twitter-link">#</a>
 <span class="twitter-timestamp"><abbr title="<?php echo $item->get_date('j.n.Y @ H:i:s'); ?>"><?php echo $item->get_date('j.n.Y @ H:i:s'); ?></abbr></span>
<?php
  endforeach;
?>

für interessenten erkläre ich jetzt die einzelnen code-teile (andere können die nächsten paar zeilen überspringen. ich möchte noch erwähnen, dass ich auf die php-tags in den folgenden code-ausschnitten verzichtet habe):

und nun zur erklärung der code-teile:

als erstes müssen wir simplepie einbinden, mit welchem wir den rss-feed abfragen und den feed anschliessend cachen:

require_once("simplepie.inc");

nun müssen wir eine SimplePie-instanz erstellen, die im konstruktor als parameter die feed-adresse des abzuholenden feeds entgegen nimmt - in unserem fall die feed-adresse unseres twitter-accounts. hier verwende ich die feed-adresse meines twitters-accounts (ich hab die feed-adresse mit http://is.gd gekürzt um mein blog-design nicht zu sprengen):

$feed= new SimplePie("http://is.gd/EJ8");

als nächstes setzen wir die zeit in sekunden, nach welcher der cache aktualisiert werden sollte. man kann sie natürilch auf 0 stellen und den feed immer wieder neu abfragen, aber das sehen die leute bei twitter nicht so gerne. deshalb habe ich bei mir bescheidene 2 minuten eingestellt:

$feed->set_cache_duration(120);

mit den nächsten 2 zeilen initialisieren wir alles nötige (auch die oben-gesetzte cache-zeit, inklusive das cachen) und schauen, dass die richtige zeichen-kodierung benutzt wird:

$feed->init();
$feed->handle_content_type();

um die einzelnen einträge im feed abzuholen, stellt simplepie eine methode namens get_items() zur verfügung, welche ein array mit allen einträgen im feed zurückliefert. für unser kleines twitter-plugin benötigen wir jedoch nur den letzten eintrag. die methode array_slice($array, $start, $length), die von php bereitgestellt wird, liefert uns ein neues array zurück, mit $length anzahl elementen, angefangen von $array[$start]. da wir aber nur den letzten eintrag benötigen, sieht unser array_slice wie folgt aus:

$feed_items= array_slice($feed->get_items(), 0, 1);

als nächstes geben wir mittels foreach-schleife unseren twitter-eintrag aus. warum die foreach-schleife verwenden, wenn man doch mittels $feed_items[0] gleich alles ausgeben kann? einerseits ist's ein wenig einfacher zum schreiben und andererseits ist die foreach-schleife praktisch, wenn man mehr als nur einen twitter-eintrag anzeigen will:

<?php
foreach($feed_items as $item) :
?>
<!-- hier kommt das html-konstrukt für den anzuzeigenden twitter-eintrag -->
<?php
endforeach;
?>

in der foreach-schleife geben wir nun den inhalt des feed-eintrags ($item->get_title()), den direkten link zum twitter-eintrag ($item->get_permalink()) und das erstellungs-datum des twitter-eintrags ($item->get_date("j.n.Y @ H:i:s"). siehe date bei php.net) aus. beim inhalt des twitter-eintrags entferne ich mittels str_replace meinen nick aus dem inhalt, da ich das "_giu @ twitter" schon vorne dran habe. ihr könnt natürlich das str_replace weglassen und stattdessen nur $item->get_title() mittels echo ausgeben. folgenden code-ausschnitt bauen wir beim oberen code-ausschnitt der foreach-schleife ein (dort wo sich der html-kommentar  befindet):

<?php echo str_replace("_giu: ","",$item->get_title());  ?> <a href="<?php echo $item->get_permalink(); " class="twitter-link">#</a>
&nbsp;<span class="twitter-timestamp"><abbr title="<?php echo $item->get_date("j.n.Y @ H:i:s"); "><?php echo $item->get_date("j.n.Y @ H:i:s"); ?></abbr></span>

so, das wäre mal die datei twitter.php gewesen. die datei in aktion könnt ihr unter http://giu.giustyle.com/wp-content/themes/simplistic/twitter.php sehen. nichts spezielles.

Das nötige HTML-Konstrukt für die Sidebar

wir benötigen nun in der sidebar (in welcher der twitter-eintrag angezeigt werden sollte. suche nach einer datei namens sidebar.php im aktuellen theme-ordner) einige html-felder, die wir mittels jquery anzeigen, verstecken, animieren etc. folgender html-code könnt ihr in eure sidebar-datei einfügen (angenommen ihr habt eure lade-grafik im wp-content/themes/dein-theme/images-ordner kopiert):

<div>
  <span id="twitter-message-loader" style="display:none;"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/loader.gif" alt="twitter-message wird geladen" title="twitter-message wird geladen" /> letzter tweet wird geladen</span>
  <span id="twitter-message-text"></span>
</div>

wichtig: bloginfo("stylesheet_directory") funktioniert nur in der wordpress-umgebung!

der span mit der id twitter-message-loader wird anfänglich mittels display:none; versteckt, da dieser span erst dann angezeigt wird, wenn die ajax-anfrage startet und wieder versteckt wird sobald die ajax-anfrage beendet ist und der twitter-eintrag angezeigt wurde. im span mit der id twitter-message-text wird dann der inhalt des twitter-eintrags reingeladen.

jQuery im Einsatz: Twitter-Eintrag mittels AJAX-Aufruf anzeigen

für diesen task brauchen wir die header-datei des aktuellen theme (suche nach einer datei namens header.php im aktuellen theme-ordner) und die aktuellste datei von jquery, welche wir im wp-content/themes/dein-theme-ordner platziert haben (siehe 8 schritte oben).

kurze information: alle folgenden code-zeilen werden im head-teil (...) der header-datei platziert. für die einen selbstverständlich, für andere vielleicht nicht.

als erstes müssen wir jquery.js einbinden, damit wir dessen funktionalität benutzen können. dies geschieht anhand folgender html-zeile:

<script type="text/javascript" src="<?php bloginfo("stylesheet_directory"); ?>/jquery.js"></script>

wichtig: bloginfo("stylesheet_directory") funktioniert nur in der wordpress-umgebung!

nun können wir noch das nötige javascript einfügen, mit welchem wir die daten abholen. der dazugehörige code, der ebenfalls im head-teil eingefügt werden kann, sieht wie folgt aus (die einzelnen code-teile erkläre ich gleich nach dem code-ausschnitt):

<script type="text/javascript">
$(document).ready(function(){
  $("#twitter-message-loader").bind("ajaxStart", function(){
    $("#twitter-message-text").hide();
    $(this).show();
  }).bind("ajaxStop", function(){
    $(this).hide();
    $("#twitter-message-text").fadeIn();
  });
});
$(window).ready(function(){
  $("#twitter-message-text").load("<?php bloginfo("stylesheet_directory"); ?>/twitter.php");
});
</script>

wie wir oben im html-konstrukt gesehen haben, handelt es sich beim span mit der id twitter-message-loader um die lade-grafik, die angezeigt werden sollte, sobald die ajax-anfrage gestartet wurde. dies wird mit folgendem code-ausschnitt ermöglicht:

$(document).ready(function(){
  $("#twitter-message-loader").bind("ajaxStart", function(){
    $("#twitter-message-text").hide();
    $(this).show();
  }).bind("ajaxStop", function(){
    $(this).hide();
    $("#twitter-message-text").fadeIn();
  });
});

der ganze jquery-code wird immer zwischen $(document).ready(function(){ ... }); geschrieben und nur dann ausgeführt, wenn er sich tatsächlich dort drin befindet (dies gilt auch für $(window).ready(function(){ ... });). dank $(document).ready(function(){ ... }); wird der code immer vor dem seiten-inhalt geladen und dank $(windows).ready() und $(document).ready() wird immer bewerkstelligt, dass das DOM zuerst vollständig geladen wurde!

$("#twitter-message-loader") selektiert den oben-erwähnten span und mittels .bind("ajaxStart", function(){ ... } wird beim start der ajax-anfrage (ajaxStart) der twitter-eintrag zuerst versteckt ($("#twitter-message-text").hide();) und die lade-grafik angezeigt ($(this).show();. this könnte man mit "#twitter-message-loader" ersetzen.). ist die ajax-anfrage zu ende (ajaxStop), wird zuerst die lade-grafik wieder versteckt ($(this).hide();) und der aktualisierte twitter-eintrag angezeigt ($("#twitter-message-text").fadeIn();).

der twitter-eintrag wird dank folgendem code-ausschnitt in das span mit der id twitter-message-text geladen (der twitter-eintrag wird von der datei twitter.php bereitgestellt):

$(window).ready(function(){
  $("#twitter-message-text").load("<?php bloginfo("stylesheet_directory"); ?>/twitter.php");
});

Dateien herunterladen

in der folgenden zip-datei namens twitter-ajax.zip findet ihr eine laufende umgebung (inklusive simplepie.inc und jquery.js). ihr müsst die zip-datei auspacken und an einen ort kopieren, in welchem php ausgeführt wird (stichwort: htdocs-ordner von apache) und schon sollte das ganze laufen! ein funktionierendes beispiel findet ihr unter http://giu.giustyle.com/file/twitter-ajax/

download: twitter-ajax.zip.

für wordpress habe ich auch eine zip-datei zusammengestellt, bei der es sich aber um kein plugin handelt, in welcher aber folgende 3 dateien vorhanden sind:

header-code.php: das javascript für die ajax-anfrage, animationen etc. der code in der datei sollte in den header (header.php) des aktuellen theme platziert werden.
sidebar-code.php: das html-konstrukt, dass von jquery modifiziert wird und in welchem der twitter-eintrag angezeigt wird. den code in der datei kann in die sidebar (sidebar.php) des aktuellen theme platziert werden.
twitter.php: die php-datei, mit welcher mittels simplepie und ein bisschen magie der aktuellste twitter-eintrag aus dem twitter-feed ausgelesen wird

download für wordpress (kein plugin!): twitter-ajax-wordpress-files.zip.

Schlusswort

ich hoffe das tutorial nützt dem einen oder anderen etwas. das ist sicherlich der grösste beitrag in diesem blog momentan (datum: 24.6.2008). hat mir auch ein bisschen zeit gekostet, aber das ergebnis lässt sich sicher sehen. denke ich mal. für fragen und feedback könnt ihr wie immer die kommentar-funktion benutzen oder ein mail schicken.

Comments

claude:

danke :)

18.8.2008, 00:13:31 · ∞