Skript zum Einbinden von RSS-Feeds auf Webseiten

Skript zum Einbinden von RSS-Feeds auf Webseiten

Meine Link-List auf der Start-Seite bzw. der dazugehörige Feed, sind nichts anderes, als meine Empfehlungen im Google-Reader. Ein Klick im Reader und die Überschriften erscheinen auch hier. Zwar bietet Google dafür extra eine vorgefertigte Lösung, die mir aber zu aufgebläht in der Struktur und insgesamt zu unflexibel ist. Google bietet aber auch eine eigene API zum Sammeln und ausgeben von Feeds auf Webseiten, damals noch einfach Google Feed API genannt, heute schon als Google AJAX Feed API betitelt.

Der Zusatz AJAX sorgt für noch aufgeblähteren Quellcode und völlig fehlende Semantik, weshalb ich auch hier wieder einen großen Bogen um die fertigen Lösungen mache und was Eigenes bastle. Es folgt ein kurzes Tutorial zum Javaskript der Feed-Darstellung.

Inhalte verlinken nicht stehlen

Nichts gegen die immer beliebter werdenden Feed-Aggregatoren – Webseiten, die praktisch nur Inhalte anderer Seiten mit Hilfe derer Feeds bei sich darstellen – ich halte eine solche Praxis für aüßerst fragwürdig. Hier entsteht der Eindruck fremde Inhalte als eigene verkaufen zu wollen. Links zur Quelle hin oder her, falsch bleibt falsch. Komplette Feed-Items sollte man einfach nicht absaugen und einfach so bei sich darstellen, das ist einfach schlechte Schule. Gute Schule dagegen ist ein einfacher Link der Überschrift, hin zur fremden Seite. Nichts anderes bringt das folgende Skript mit.

warum keine fertige Lösung?

Fertige Lösungen gibt es zwar viele, aber bei allen bin ich immer irgendwo eingeschränkt. Sei es viel zu komplexer Quellcode, langsame Skript-Performance, oder Grenzen bei der CSS-Gestaltung. Nur bei einer eigenen Lösung ist man alle Probleme los. Hinzu kommt, dass es kinderleicht ist, mit Google’s APIs zu arbeiten. Was man als erstes benötigt ist ein API-Schlüssel von Google, der sich hier holen lässt. Meine Version ist damals noch mit der alten Version dieser API entstanden, gehe aber mal stark davon aus, dass Schlüssel und API abwärtskompatibel sind und somit mein Skript, auch mit neuen Schlüsseln funktioniert.

Dieser API-Schlüssel wird dann auf der jeweiligen Seite, mit einem Skript-Verweis im Head aktiviert:

<script type="text/javascript" src="http://www.google.com/jsapi?key=sgj[...]"></script>

feed-display.js

Das fertige Skript auf den eigenen Server packen und auf der eigenen Seite, wie schon den API-Schlüssel einbinden:

<script type="text/javascript" src="http://www.meinewebsite.de/feed-display.js"></script>

Nun kann man mit folgender Syntax munter Feeds auf der eigenen Seite darstellen lassen. Wer zum Beispiel eine Liste mit Links zu den letzten 5 Einträngen dieser Seite, in einer Div mit der id „cold-heat“ haben möchte, bekommt es mit folgendem Aufruf im HTML:

<script type="text/javascript">
new rssdisplayer("cold-heat", "https://www.coldheat.de/feed", 5, "title")
</script>

Die Ausgabe mit HTML sieht dann wie folgt aus:

<div id="cold-heat">
<ul>
    <li class="blogtitle">Titel des Blogs</li>
    <li class="tagline">Blog-Beschreibung</li>
    <li><a title="Titel des Artikels" href="https://www.coldheat.de/...">Titel des Artikels</a></li>
    <li><a title="2" href="https://www.coldheat.de/...">2</a></li>
    <li><a title="3" href="https://www.coldheat.de/...">3</a></li>
    <li><a title="4" href="https://www.coldheat.de/...">4</a></li>
    <li><a title="5" href="https://www.coldheat.de/...">5</a></li>
</ul>
</div>

Eine einfache valide Struktur, ohne große Schnörkel. Für jeden Feed benötigt man dann einen separaten Aufruf des Skripts. Wer unbedingt die kompletten Inhalte nutzen möchte, sollte sich das Skript genauer anschauen, es beinhaltet alle Zutaten auch komplette Inhalte der Links darzustellen. Die Schlüssel-Zeile ist im Skript ausreichend kommentiert.