5202

ein Blog über technische Fragen zu Blogger

Dynamische Ansichten: Archiv via Blogger JSON API

von
In meinem letzten Post habe ich anhand der Labels gezeigt, wie sich die Blogger JSON API dazu benützen lässt, in den dynamischen Ansichten gewisse Gadget-Funktionen 'nachzurüsten'. Das Thema führe ich heute weiter und zeige wie ihr ein simples Archiv aus dem JSON Feed erstellen könnt.

Beispiel
Wie das am Ende aussieht könnt ihr an meinem eigenen Archiv sehen. Das Archiv funktioniert sowohl in den dynamischen als auch 'normale' Ansichten und geht ursprünglich auf die Frage eines Lesers zurück, der als Archiv nur eine simple Liste seiner Posts haben wollte. Statt das 'normale' Archiv entsprechend umzubauen, habe ich gleich etwas neues gebaut und zwar eine Liste aus dem JSON Feed. Irgendwann habe ich dann festgestellt, das es - für mich - so eigentlich übersichtlicher und logischer ist, als die verschachtelte Form nach Monaten und Jahren. Okay, das mag jeder anderes sehen, auf jeden Fall hat der JSON Feed große Vorteile.
Blogger JSON API
Die Blogger JSON Schnittstelle kann auf zwei Arten benütrzt werden, nämlich entweder über die JavaScript Client Library for Google APIs oder eben über den JSON Feed. Ersteres ist ähm ... a bisserl komplizierter, letzteres geht mit ein paar Zeilen Javascript. Ich habe dazu als Demo eine Liste meiner letzten fünf Posts gebaut.

Demo: Fünf letzten Posts

Loading...

Wie funktioniert's?

Ausgangspunkt ist der JSON-Feed von meinem Blog mit einem Abfrageparameter, nämlich 'liste':
src="http://5202.blogspot.com/feeds/posts/default?alt=json&callback=liste

Es sollen fünf Post angezeigt werden, also geben wir einen weiteren Parameter über die maximale Anzahl der Posts:
http://5202.blogspot.com/feeds/posts/default?max-results=5&alt=json&callback=liste
Daraus bauen wir nun eine kleine Abfrage mit Javascript:
<script type='text/javascript'>
function liste(json){
var listhis='<ul>';
for(var i=0; i<json.feed.entry.length; i++){
var posttitle=json.feed.entry[i].title.$t;
for(var k = 0; k < json.feed.entry[i].link.length; k++){
if (json.feed.entry[i].link[k].rel == 'alternate') {
var postlink = json.feed.entry[i].link[k].href;
}
}
listhis+='<li><a href="'+postlink+'">'+posttitle+'</a></li>';
}
listhis+='</ul>';
document.getElementById('listen').innerHTML=listhis;
}
</script>

<script src="http://5202.blogspot.com/feeds/posts/default?
max-results=5&alt=json&callback=liste"></script>
Das Script listet bei der id listen die Werte für postlink und posttitel. Um das ganze auszugeben brauchen wir als Markup also noch ein Element mit der id listen - insgesamt schaut das Script also so aus:
<div id='listen'>
Loading...</div>

<script type='text/javascript'>
function liste(json){
var listhis='<ul>';
for(var i=0; i<json.feed.entry.length; i++){
var posttitle=json.feed.entry[i].title.$t;
for(var k = 0; k < json.feed.entry[i].link.length; k++){
if (json.feed.entry[i].link[k].rel == 'alternate') {
var postlink = json.feed.entry[i].link[k].href;
}
}
listhis+='<li><a href="'+postlink+'">'+posttitle+'</a></li>';
}
listhis+='</ul>';
document.getElementById('listen').innerHTML=listhis;
}
</script>

<script src="http://5202.blogspot.com/feeds/posts/default?
max-results=5&alt=json&callback=liste"></script>
Anpassen
Das Script könnt ihr so wie es ist in einem Post, einer Seite oder einem HTML/Java Gadget benützen, es wird überall funktionieren. Statt des Werts "5" könnt ihr "200" oder "500" einsetzen, damit bekommt ihr die letzten 200 oder 500 Post des Blogs ausgegeben. Statt meiner Blogadresse müsst ihr natürlich eure eigene Blogadresse eingeben, jeder blogspot.com Blog hat von Haus aus einen JSON Feed.

Achtung! Bug

Es gibt im HTML-Editor von Blogger einen ganz gemeinen Fehler, den ich hier noch mal wiederhole:

Zum Abschluss des <li> und <ul> Tags gibt es zwei kleine Schlussstriche:
listhis+='<li><a href="'+postlink+'">'+posttitle+'</a></li>';
}
listhis+='</ul>';
Wenn ihr die Seite/Post speichert und neu aufruft, setzt euch der HTML-Editor ein Steuerzeichen und bricht diese Schlussstriche um:
listhis+='<li><a href="'+postlink+'">'+posttitle+'</a></li>
';
}
listhis+='</ul>
';
Dadurch läuft das Script nicht mehr, wenn ihr die Seite neu öffnet und wieder speichert. Das heißt beim ersten mal funktioniert das Script, sobald ihr die Seite ein weiteres öffnet, geht nichts mehr. Ihr müsst also den Umbruch händisch jedesmal wieder rückgängig machen, wenn ihr die Seite, wo das Script liegt, bearbeitet. Das ist doof, eine andere Lösung gibt es aber leider nicht.

Anmerkung

Mit dem JSON Feed + Javascript lassen sich theoretisch viele Funktionen für die dynamischen Ansichten erstellen. Nur gibt es auf der Homepage keinen Platz, wo ihr das einbauen könnt, ihr müsst also auf die statischen Seiten ausweichen. Im Prinzip würden also auch in den dynamischen Ansichten Gadgets funktionieren, praktisch scheitert das daran, das die Scripte nirgendwo gehostet werden können, außer auf Unterseiten. Ich finde das ärgerlich, aber so ist es nun mal. Wenn ich irgendwann einmal einen langen, langweiligen Sonntagnachmittag habe, werde ich mal mit jQuery ein paar Spielereien mit dem JSON-Feed bauen - stay tuned!

Fragen, Anmerkungen, Probleme

Wenn es Probleme oder Fragen zu dem Script gibt, fragt in den Kommentaren nach.