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", "http://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="http://www.coldheat.de/...">Titel des Artikels</a></li>
<li><a title="2" href="http://www.coldheat.de/...">2</a></li>
<li><a title="3" href="http://www.coldheat.de/...">3</a></li>
<li><a title="4" href="http://www.coldheat.de/...">4</a></li>
<li><a title="5" href="http://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.
5 Kommentare
Ich suche verzweifelt … Wie kann ich den Inhalt mit anzeigen lassen ? Ansonsten wirklich gutes Skript !
MaikD, ein bißchen rumprobieren muß man schon… oder Ahnung haben ;o) Natürlich gibt es immer viele Möglichkeiten. Eine davon:
Kopiere die Zeile unter “hier geschieht die Magie…” mit “li”, füge sie darunter ein, und setze ein “+” hinter die erste Zeile. Tausche in der zweiten Zeile “itemtitle” gegen “itemdescription” aus. Falls Du “itemdate” noch benötigst, erstellst Du gleichermaßen eine dritte Zeile “itemdate”.
Wenn Du den “li” noch eine “class” zuordnest, kannst Du sie auch ansprechen ;o)
Im HTML-Dokument lautet die Ansprache im new rssdiplayer …“title,contentSnippet,publishedDate”
Hallo, Christian Muecke: Tolles Script - habe ich gerne im Einsatz! Und ansonsten ist es auch immer sehr informativ hier
)
ist es möglich, das datumsformat irgendwie zu beeinflussen!? im moment bekomme ich das mit deinem (wirklich tollem!) skript so ausgegeben:
Sonntag, 15. April 2007 16:00:31 | ÜBERSCHRIFT DES RSS-FEEDS
ich würde es aber gern derart haben:
15 Apr 2007 | ÜBERSCHRIFT DES RSS-FEEDS
geht da was!? dank und grusz. konstantin
Erstmal Folgendes: diese API hat sich mittlerweile sehr verändert. Es ist ein Wunder, dass diese Skript noch funktioniert. Zu der Frage: das Ausgabeformat des Datums, lässt sich sehr wohl verändern. Die entscheidende Stelle im Skript ist mit dem Kommentar “Formatierung fuer Datumsausgabe eines einzelnen Items” versehen. Wo jetzt steht
itemdate.toLocaleString(), muss was Neues stehen.Ich verweise mal auf eine kurze Erklärung bei Javaskriptkit. Dort wird unter der Überschrift Formatting the date field of a RSS item gezeigt, wie es funktioniert. Einfach ausgedrückt, zieht man die einzelnen Werte aus
itemdateheraus und fügt sie so zusammen, wie man sie braucht. In deinem Beispiel müsste man Tag, Datum und Jahr abfragen und dann in der Ausgabe schreiben lassen. Die Erklärung dort ist wirklich einfach.Ich hoffe es klappt.
Hi, netter Post aber wie adde ich den denn zu meinen RSS Feeds? Bin ich zu bloed?
Vorschau:
HTML ist in Kommentaren zugelassen. Erlaubt sind die HTML-Tags:
<a href>, <i>, <p>, <strong>, <em>, <ul>, <ol>, <li>, <blockquote>.
Alle themenfremden oder persönlichkeistverletzenden Beiträge werden gelöscht, also immer schön sachlich argumentieren.
schrieb: