Wie kann ich einen externen RSS-Feed auf meiner Seite anzeigen?

weblica bietet mit dem Aufmacher einer bequeme Möglichkeit, eigene RSS-Feeds für die Inhalte Ihrer Website bereit zu stellen. Mit etwas jQuery-Code können Sie auch einen RSS-Feed einer anderen Website auf Ihrer Website anzeigen. Der vorliegende Artikel, zeigt, wie Sie das machen.

Wir verwenden das Google Feed-API, um die externe Feed-Quelle einzulesen und anschliessend mit Javascript zu verarbeiten. Das geht dank jQuery und dem kleinen aber feinen Google Feed-API jQuery Plugin von Malsup einmal mehr recht einfach.
Sie benötigen:
  • Die Feed-URL des gewünschten RSS-Feeds, den Sie einbinden möchten.
  • Zugriff auf die Google Feed-API per Javascript-Anweisung im HTML-Head der Seite
  • Das Malsup jQuery Google Feed-API Plugin.
  • Ein paar wenige Zeilen Javascript-Code für die Anzeige der Feed-Daten.

Die Feed-URL

Besorgen Sie sich die gewünschte URL des RSS-Feeds, den Sie verwenden möchten. Wir verwenden im Beispiel die Feed-URL der weblica Website:
http://www.weblica.ch/_rss/feed_6.xml.

Hinweis: Nutzungsrechte

Beachten Sie unbedingt die Nutzungsbedingunen für den RSS-Feed, den Sie auf Ihrer Website anzeigen möchten! Manche Feed-Anbieter untersagen die Verwendung ihrer Feeds auf Webseiten Dritter.

Die Google Feed API verwenden

Die Google Feed API ermöglicht es Ihnen, einen beliebigen RSS-Feed auszulesen und mittels Javascript zu verarbeiten.  Binden Sie als erstes diese Feed API mit folgender Anweisung in den Seiten-Eigenschaften im HTML-Head ein:
<!-- include Google Feed API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 

Das Google Feeds API - jQuery plugin von Malsup einbinden

Mit Hilfe des Google Feed API jQuery Plugins von Malsup erhalten Sie einen einfachen Zugriff auf diese Google-Schnittstelle zur Verarbeitung von RSS-Feeds.
Laden Sie das Plugin von hier herunter: Google Feeds API jQuery Plugin.

Anschliessend importieren Sie das Plugin in Ihr Projekt; vgl. hierzu die weblica Hilfe: Der Umgang mit Dateien. Binden Sie das Plugin dann auf der Seite ein, auf der Sie die externen Feed-Daten anzeigen möchten; vgl. hierzu den Artikel Wie binde ich eine Javascript-Datei auf einer Seite ein?.

Feed-Daten einlesen und anzeigen

Das Einlesen und Anzeigen der Feed-Daten ist schnell erledigt. Fügen Sie hierzu an der gewünschten Stelle auf der Seite einen HTML-Absatz ein. Kopieren Sie das nachstehende Code dann in diesen Absatz:
<!-- In das nachstehende Div werden die Beiträge per Javascript eingefügt -->
<div id="weblica-feed"></div>

<script type="text/javascript">

$(document).ready(function() { 
    // add a feed manually 
    $('#weblica-feed').gFeed({  
        url: 'http://www.weblica.ch/_rss/feed_6.xml',
        title: 'Der weblica Web-Feed eingebunden',
        max: 3
    });     
}); 

</script>
Im Skript sehen Sie in Rot die verwendete Feed-URL und am Ende des Skripts die Zahl der einzulesenden Feed-Beiträge, im Beispiel sind es drei.
Die Id des DIV-Elements (im Beispiel weblica-feed) können Sie frei wählen, achten Sie hierbei darauf, dass Sie im Skript die gleiche Id verwenden, um die Beiträge anzuzeigen.