5202

ein Blog über technische Fragen zu Blogger

Blogger: Archivseiten über Feeds

von

Das Blogger Archiv-Gadget ist bekanntlich nicht sonderlich flexibel. Manchmal möchtet ihr vielleicht ein Teil eurer Posts in einer strukturierten Form auf einer Archiv Seite präsentieren.

Ein total gelungenes Beispiel finde ich etwa diese Rezept-Seite von dem Blog Leckermussessein - das hat einen echten Mehrwert für den Besucher, oder?

So eine Seite lässt sich mit dem 'normalen' Archiv-Gadget nicht bauen, sondern dazu braucht ihr Feeds und ein paar Zeilen Javascript.

Nachdem das ganze nicht allzu schwer ist und viel Potential hat, möchte ich heute den Aufbau von so einer Archivseite a bisserl näher anschauen.

Was ist mein Blogger-Feed?

Jeder öffentlicher Blogger Blog hat von Haus aus einen Feed, d.h. der Inhalt eures Blogs liegt in einer strukturierten und für Programme lesbaren Form vor.

Es gibt bei Blogger zwei Formate, nämlich ATOM und RSS, die ihr beide verwenden könnt. Der Einfachheit halber gebe ich allen Code nur für das RSS Format an - wenn gewünscht, kann ich das aber auch noch für ATOM nachliefern.

Der RSS Feed für euren Blogger Blog schaut in der allgemeinen Form so aus:

http://euerBlog.blogspot.com/feeds/posts/default?alt=rss

Heads up! Eure Blog URL müsst ihr als sogenannte Cannonical URL schreiben, also mit .com am Ende.

Damit das ganze nicht zu abstrakt wird, lesen wir im folgenden einen echten Feed aus, den uns Myri von bekreatief zur Verfügung stellt. Nochmals danke an der Stelle.

Der allgemeine RSS-Feed von bekreaktiv sieht also so aus:

http://bekreatief.blogspot.com/feeds/posts/default?alt=rss

In diesem Feed liegen Standardmässig de letzten 25 Posts von dem Blog - falls ihr mehr Posts auslesen wollt, müsst ihr den Feed um das Attribut max-results erweitern:

http://bekreatief.blogspot.com/feeds/posts/default?alt=rss&max-results=500

Ich habe hier den Feed auf insgesamt 500 Posts erweitert. Ein höherer Wert ist sinnlos, weil die Google API nicht mehr als 500 Posts [oder 512KB] gleichzeitig zulässt.

Falls ihr mehr als 500 Posts auslesen wollt, müsst ihr den Feed splitten und zwar mit einem weiteren Attribut, nämlich start-index.

Hier in diesem Beispiel lese ich die letzten 700 Posts aus und zwar von dem Startzeitpunkt 200[Posts] - das ergibt insgesamt einen Wert von 500 Posts.

http://bekreatief.blogspot.com/feeds/posts/default?alt=rss&max-results=700&start-index=200

Mehr als 1000 Posts auszulesen sind über die Google Feeds API übrigens nicht möglich - falls Bedarf besteht, müsst ihr über die Blogger API gehen ... das ist aber andere Baustelle :D.

Ich habe also einen Feed, was kann ich nun damit machen?

Okay, ihr habt jetzt euren Feed und jetzt wollt ihr damit irgendetwas sinnvolles anstellen :D.

Im Normalfall bedeutet das, ihr wollt aus dem Feed Überschriften, Teaser oder ganze Posts ziehen. Das geht simpel mit ein paar Zeilen Javascript - oder bequem und noch einfacher mit einem jQuery Plugin, das verschiedene Parameter zur Einstellung anbietet. Das beste Plugin dazu, das ich kenne, ist der zrssfeed Reader. Das Plugin ist so gut, dass ich über den Donate Link einen Zehner gespendet habt - der Entwickler hat es verdient!

Ihr müsst dieses Plugin zuerst runterladen und auf eurem Server/Dropbox/Google Drive hosten. Falls ihr das nur mal kurz ausprobieren wollt, könnt ihr das auch über meine Dropbox bekommen. Denkt aber daran, das Plugin selber zu hosten, wenn ihr es dauerhaft verwenden wollt!

Außerdem braucht ihr noch ein jQuery Framework und ein weiteres Script, dass das Plugin startet. Alles zusammen schaut das so aus:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>  
<script src='https://dl.dropboxusercontent.com/u/12178319/javascripts/jquery.zrssfeed.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function () {
 $('#test').rssfeed('http://bekreatief.blogspot.com/feeds/posts/default?alt=rss');
});
</script>

Packt das ganze Script in eurem TESTBLOG in der HTML Ansicht vom Editor in eine statische Seite. Darüber braucht ihr jetzt nur noch den Tag, worauf ihr den Feed darstellt - schreibt das so:

<div id="test"></div>

Veröffentlich nun eure Seite und schaut euch das Ergebnis an - ihr bekommt die 25 letzten Posts von Myri mit Überschrift, Datum und Teaser!

Laaangweilig ... ist das alles, was ich damit machen kann?

Soweit ist das ganze noch relativ unspektakulär :D. Der zrssfeed Reader hat nun eine ganze Menge Parameter, mit denen ihr rumspielen könnt. Ein paar Spielereien habe ich auf meiner Testseite gebaut.

Was zum Beispiel möglich ist [und immer mal wieder gefragt wird], ist eine reverse Darstellung der Feeds, d.h. entgegen dem Zeitpunkt ihrer Entstehung. Die Parameter für das Start-Script sieht etwa so aus:

<script type="text/javascript">
$(document).ready(function () {
 $('#test').rssfeed('http://bekreatief.blogspot.com/feeds/posts/default?alt=rss&max-results=500&start-index=181', {
    limit: 50,
    dateformat: 'date',
    sort: 'date',
    sortasc: true
   });
});
</script>

Erklärung: Die vollständige Liste der Parameter findet ihr auf der zrssfeed Reader Seite. Ich habe einen 'gesplitteten' Feed mit dem Start-Index von 181 genommen, sortiere ihn nach Datum und zwar in reverser Ordnung [sortasc: true] und limitiere ihn auf 50 Stück.

Probiert das aus - heraus kommen die ersten 50 Posts, die Myri in ihrem Blog geschrieben hat.

Auf der Seite findet ihr unzählige weitere Beispiele ... seit kreativ!

Wie habe ich das mit den Knöpfen auf meiner Testseite gemacht?

Ihr könnt auch verschiedene Feeds zur Auswahl geben - ich habe das auf meiner Seite so gemacht, dass ich die Ausgabe des Feeds als Funktion geschrieben habe:
function rssFeed1() {
  $('#test').rssfeed('http://bekreatief.blogspot.com/feeds/posts/default?alt=rss&max-results=500&start-index=181', {
   limit: 50,
   dateformat: 'date',
   sort: 'date',
   sortasc: true
   });
};

Aufrufen tut ihr die Funktion dann per Click - in dem Fall auf einen Schalter mit der ID click1.

$('#click1').on('click', rssFeed1);

Der gesamte Code auf einem Blick:

<div id="click1">Click</div>
<div id="test"></div>

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>  
<script src='https://dl.dropboxusercontent.com/u/12178319/javascripts/jquery.zrssfeed.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function () {
$('#click1').on('click', rssFeed1);
 function rssFeed1() {
  $('#test').rssfeed('http://bekreatief.blogspot.com/feeds/posts/default?alt=rss&max-results=500&start-index=181', {
   limit: 50,
   dateformat: 'date',
   sort: 'date',
   sortasc: true
   });
};</script>

Ihr könnt beliebige Schalter und Funktionen dazu schreiben - dürfte selbsterklärend sein, oder?

Kann ich Labels auslesen?

Noch spannender wird die Sache, wenn ihr wisst, wie ihr damit spezifische Labels auslesen könnt. Ich gebe euch mal ein Beispiel aus dem Blog von Myri - das hier ist der Feed mit dem Label 'Cupcake':

http://bekreatief.blogspot.com/feeds/posts/default/-/Cupcakes?alt=rss

Heads up! Labels sind case-sensitiv, d.h. ihr müsst Groß.- und Kleinschreibung beachten.

Labels mit Spatium [Zwischenraum] schreiben sich so - hier etwa 'crème pâtissière':

http://http://bekreatief.blogspot.com/feeds/posts/default/-/crème%20pâtissière

Ihr könnt auch zwei Labels miteinander kombinieren - hier ist der Feed für alle Posts, die das Label 'Rezept' und 'Kuchen':

http://bekreatief.blogspot.com/feeds/posts/default/-/Rezept/Kuchen?alt=rss

Diese Labelfeeds könnt ihr genauso erweitern und splitten wie 'normale' Feeds. Beispielsweise 500 Feeds mit dem Label 'Schokolade':

http://bekreatief.blogspot.com/feeds/posts/default/-/Schokolade?alt=rss&max-results=500

Zum auslesen dieser Art von Labelfeeds geht ihr ansonsten genauso vor, wie beim 'normalen' Feed. Auf Feeds #2 zeige ich ein paar weitere Ideen.

Cool - wie funktioniert das nun mit der Rezeptseite aus der Einleitung?

Das ist aber immer noch nicht alles, was ihr mit Feeds machen könnt :D!

Es gibt ein phantastisches Tool namens Yahoo Pipes zur Manipulation von Feeds, mit dem ihr so gut wie alles anstellen könnt, was euch so durch den Kopf geht.

Die Rezept-Seite ist etwa durch Yahoo Pipes erzeugt. Das Ausgangs Problem ist, alle Feeds nach bestimmten Anfangsbuchstaben zu filtern - und das geht mit Yahoo Pipes hervorragend. Auf Feeds #3 könnt ihr etwa das Ergebnis von so einem Filter sehen.

Yahoo Pipes ist ein mächtiges Tool, aber leider nicht unbedingt intuitiv. Eine Einführung in Pipes würde den Rahmen hier sprengen. Wenn es euch interessiert, könnt ihr aber damit mal rumspielen. Der Filter ist einfaches Regex, also ein Filterkriterium in der Textsuche.

Hier ist etwa der Filter für die Buchstaben A, B und C jeweils in Groß.- und Kleinschreibung:

^[aA]|^[bB]|^[cC]

Ihr könnt in Pipes einen Feed einlesen, ihn mit Regex filtern und anschließend bekommt ihr einen Yahoo Pipes Feed zurück. Das hier ist etwa der Feed von Myri mit dem Label 'Schokolade' - nur die Posts mit dem Anfangsbuchstaben A, B und C:

http://pipes.yahoo.com/pipes/pipe.run?_id=176c848065842d0e2a3ee7746be3c0f0&_render=rss

Diesen Feed könnt ihr dann mit dem zrssfeed Reader wie vorher auslesen und anzeigen.

Schließende Gedanke

Ich denke, es gibt für diese Technik ein paar sinnvolle Einsatzzwecke, wie etwa die erwähnte Rezept-Seite. Ihr könnt damit große Mengen an Posts sortieren und darstellen, Archivseiten 'von-vor-einem-Jahr' bauen oder sonst was, was ich mir jetzt noch gar nicht vorstellen kann :D.

Ich bin ehrlich gesagt immer wieder davon überrascht, auf was für Ideen ihr kommt - falls ihr also einen ungewöhnlichen oder überraschenden Einfall habt, lasst von euch hören!