5202

ein Blog über technische Fragen zu Blogger

Dynamische Ansichten: Labels durch JSON-Feed auslesen

von
Tom von thor78.com hat eine clevere Idee gehabt, wie man sich für die dynamischen Ansichten ein Label-Verzeichnis bauen kann. Mir ist dabei eingefallen, dass ihr dafür statt des XML-Feeds auch den JSON-Feed nehmen könntet. Was der JSON-Feed ist und wie ihr ihn bekommt, habe ich schon mal als Kurzbeschreibung gegeben. Die dynamischen Ansichten benützen JSON für ihren Inhalt und warum nicht die Labels direkt aus JSON auslesen?

Demo: Label 'Skizzenbuch' mit JSON

Loading...

Das ist natürlich ein anderes Prinzip als das was Tom gemacht hat. Er hat einen Link, wodurch ihr auf alle Post dieses Labels kommt - ich habe die Posts dieses Labels mit Titel und Link aufgelistet. Hat beides Vor.- und Nachteile, ich denke das ist Geschmacksache was einem besser gefällt.

Javascript

Den JSON-Feed in der Demo habe ich mit einem kleinem Javascript ausgelesen.
<div id='auflisten'>
Loading...</div>

<script type='text/javascript'>
function listemall(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('auflisten').innerHTML=listhis;
}
</script>

<script src="http://5202.blogspot.com/feeds/posts/default/
-/Skizzenbuch?max-results=200&amp;alt=json&amp;callback=listemall"></
script>
Wenn ihr das ausprobiert, müsst ihr natürlich meinen Blognamen http://5202.blogspot.com durch euren eigen Blognamen ersetzen und statt Skizzenbuch ein entsprechendes eigenes Label nahmen. Beachtet, das Labels auch in JSON case-sensitiv sind, d.h. bild und Bild sind zwei verschiedene Labels.
Label-Kombination
Mit JSON ist viel mehr möglich als mit XML. Ihr wollt zum Beispiel nur Posts mit zwei bestimmten Labals anzeigen lassen? Eh voila ....
Demo: JSON mit zwei Labels
Loading...

Labels lassen sich im JSON-Feed nach dem Muster ...posts/default/-/Label1/Label2?... miteinander kombinieren. Angezeigt werden dann nur solche Posts, die mindestens diese beide Labels haben [aber können natürlich noch weiter Labels tragen ...]
Anwendung
Die dynamischen Ansichten haben bekanntlich keine HTML/Java Gadgets und deswegen müsst ihr das Javascript im HTML Modus vom Editor direkt auf eurer Seite/Post einbauen. Das funktioniert auch beim ersten mal ohne Probleme, nur haben die dynamischen Ansichten einen ultrafiesen Bug, für den ich 'ne Stunde gebraucht habe um den zu debuggen.


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. Es nützt auch nichts, das in einem richtigen Editor zu normalisieren, der Blogger Editor setzt euch stur dieses Zeichen wieder rein. Das einzige was hilft ist jedesmal wenn ihr die Seite/Post aufgerufen hat - etwa um irgendetwas zu ändern -, den Umbruch händisch wieder rückgängig zu machen. Yeah, Technik vom feinsten ... okay ich will aber gar nicht lästern, das es einen JSON-Feed gibt ist schon sehr, sehr gut.

Ausblick

Wenn es eine Möglichkeit gäbe, in den dynamischen Ansichten Javascript direkt auf der Homepage zu hosten, könnte man damit ein Archiv/Label/whatever Gadget bauen. Mein 'Archiv' auf der Archivseite funktioniert etwa auch in den dynamischen Ansichten - damit habe ich das JSOn-Feed zum ersten mal ausprobiert.


Soweit ich das verstanden habe, wollen die Blogger-Entwickler für die dynamischen Ansichten einen Satz Gadgets über die Blogger API mit JSON bauen. Wie ihr sehen könnt funktioniert das auch, nur ist die Frage, was mit den 'normalen' Gadgets passiert. Mal sehen was da in Zukunft kommt.

Fragen?

Wenn es Fragen/Probleme zu dem Script gibt, einfach einen Kommentar hinterlassen.