Fachbeitrag
RSS-Ticker-Meldungen selbst einbauen

Leider gibt es unterschiedliche RSS-Formate im Web, die das Auslesen eines Feeds erschweren. Denn wenn sich die Syntax, also der Aufbau der RSS-XML-Datei, unterscheidet, muss das auslesende Parser-Programm die jeweilige Version »verstehen«. Glücklicherweise unterstützt das Open-Source-Script MagpieRSS alle wichtigen Formate wie RSS 0.9 bis RSS 1.0, RSS 2.0 und das noch relativ junge, aber äußerst erfolgreiche Atom-Format.

Um das Script (Version 0.61) auf ihrem Server zu installieren, downloaden sie das leichtgewichtige Paket von http://magpierss.sourceforge.net. Während sich in dem Paket auch schon Beispiel-Dateien für Experimente befinden, brauchen sie für diesen Workshop nur die Dateien mit der ».inc«-Endung als auch das Verzeichnis »extlib«. Legen sie für die Dateien ein Verzeichnis an, z.B. »rss«, und laden sie die Daten auf ihren Server. Außerdem sollten sie ein weiteres Unterverzeichnis namens »cache« anlegen. Das hat den Vorteil, dass die Feeds nicht bei jedem Seitenaufruf von der jeweiligen Website neu geladen werden müssen. Die Schreibrechte für dieses Verzeichnis müssen sie mit ihrem FTP-Programm auf »chmod 777« setzen.

Einfacher geht es nicht

Um eine Liste mit Schlagzeilen samt Links und dem dazugehörigen Anreißer auszugeben, reichen schon die folgenden Zeilen:

<?php
require_once('rss_fetch.inc');
$url = 'http://www.phlow.net/index.rdf';
$max_items = 8;
$rss = fetch_rss($url);
$items = array_slice($rss->items, 0, $max_items);
echo "<div id=\"rssfeed\"><h1>", $rss->channel['title'], "</h1>";
echo "<ul>";
foreach ($rss->items as $item) {
    $title = $item[title];
    $url = $item[link];
    $desc = $item[description];
    echo "<li><a href=\"$url\">$title</a><br />\n$desc</li>\n";
}
echo "</ul><h6><a href=\"$url\" target=\"_blank\">RSS-Link</a></h6></div>";
?>

Während die erste Zeile die Funktion für den Umgang mit dem Feed einbindet, schnappt sich die fünfte Zeile den Feed, der zuvor in der Variablen »$url« definiert wurde. In Zeile 4 begrenzen wir die auszugebenden Schlagzeilen auf 8 und überlassen dem Parser die Arbeit. Der gibt uns anschließend den Titel des Feeds aus – in unserem Falle »Phlow.net News«. Damit die Links samt Überschrift plus Anreißer ausgegeben werden können, durchläuft das Ganze eine Schleife, die die RSS-Datei ausliest. Der abschließende Link setzt unter unsere Tickermeldung den Link zum RSS-Feed.

Oft kommt es vor, dass Schlagzeilen-Anbieter, wie z.B. Heise oder Spiegel, nur die Überschriften samt Link liefern. In einem solchen Fall müssen Sie das obige Script bearbeiten und die Zeile mit der Variable »$desc« löschen.

Ein wenig Styling

Wird unser RSS-Ticker generiert, so entsteht ein <div>-Container, der eine ungeordnete Liste ausgibt. Diesen Container können Sie hervorragend in Ihren Webseiten integrieren, indem Sie den PHP-Befehl »include« benutzen.

<?php include("rss_ticker.php"); ?>

Dabei sieht der Container in seiner Rohfassung sehr nach alter HTML-Schule aus. Doch mit den richtigen Kniffen und dem Einsatz von CSS kann man die Box richtig schmuck aussehen lassen. Einerseits können sie dabei auf richtige Grafiken zurückgreifen und diese mittels CSS im Hintergrund positionieren, oder sie benutzen ausschließlich gestalterische Elemente wie »border«, »background-color« und »color«. Letztere haben natürlich den Vorteil, etwas den Traffic zu reduzieren.

Die Möglichkeiten, eine Box mit CSS zu stylen, sind vielfältig bis unendlich. Auf der Heft-CD finden sie das Material zu den beiden Boxen, wie sie im Bild zu sehen sind. Der CSS-Befehl »background« beinhaltet alle fünf individuellen Stylesheet-Eigenschaften des Hintergrundes in einer Stildeklaration zusammen. Er ermöglicht das perfekte Positionieren der Hintergrundbilder. Dabei ist er wie folgt aufgebaut:

background: #eee url(ecke_re_oben.gif) no-repeat top right;

Während »url(ecke_re_oben.gif)« die Verknüpfung zum Bild herstellt – absolute Pfade in der Form »http://www.xxx.de/bilder/bild.gif« sind auch möglich –, geben wir in unserem Beispiel außerdem den Befehl, dass Bild nicht zu wiederholen. Mit »top« und »right« schieben wir es in die rechte obere Ecke. Alternativ können hier auch Pixel-Angaben gemacht werden, z.B. »0px 0px«.

Sollte das Bild nicht vorhanden sein, wird der Bereich mit der Hintergrundfarbe »#eee« ausgefüllt und ansonsten überall dort, wo das Hintergrundbild aufhört.

Ein weiterer Styling-Tipp

Möchte man unserer Box links und rechts eine runde Ecke verpassen, muss man sich eines Tricks bedienen. Natürlich kann man der Box auch eine feste Breite geben und das Hintergrundbild auf diese Breite festlegen. Manche moderne Browser wie Mozilla/Firebird ermöglichen aber das Skalieren einer Website, falls der Surfer generell einen größeren Schriftgrad bevorzugt. Die Box würde in diesem Falle sehr hässlich aussehen. Da das HTML aber wie folgt aussieht, ergibt sich eine Möglichkeit, eine skalierbare Box zu entwerfen.

<div id="rssfeed"><h1>Phlow.net News</h1>

Während wir dem <div>-Container ein Hintergrundbild zufügen und dieses in die rechte obere Ecke schieben, fügen wir gleichzeitig auch dem <h1>-Tag ein kleines Hintergrundbild zu. Dieses schieben wir in die linke obere Ecke. Gemeinsam ergibt sich dann eine Box mit runden Ecken und einem sanften Farbverlauf. Das gleiche geschieht mit dem Ende der Box. Nur hier fügen wir dem <h6> als auch dem <a>-Tag einen Hintergrund zu. Schauen Sie sich dazu am besten unser Beispiel auf der CD an.

Weitere Services & Artikel

• wonko.com/software/mailfeed/ — Mailfeed ist ein PHP-Script, dass eine POP3-, IMAP- oder NNTP-Mailbox checkt und einen RSS-Feed mit den Nachrichten erstellt.
• mailbucket.org — Der Mailbucket konvertiert Emails in RSS-Feeds. Der Service ist kostenlos und schnell eingerichtet und funktioniert hervorragend.
• phlow.net/nu_archives/wasistrss.php — Ausführlicher Artikel von Alp Uçkan zum Thema RSS, News-Aggregatoren & Co.