5202

ein Blog über technische Fragen zu Blogger

Postlisten mit Ajax erzeugen

von

Ich hatte die Woche eine spannende Diskussion um die Frage, wie man in Blogger Listen von Blog-Elemente erzeugen kann, etwa eine Liste aller Post-Titel.

Das geht prinzipiell über den JSON-Feed und ist in den einschlägigen Tutorials&Tricks Blogs schon zigmal beschrieben worden - nach meinem Gefühl schreiben dabei alle von Scorpy ab. Scorpy ist ein sehr, sehr kreativer Top-Beitragender aus dem englischsprachigen Blogger-Help-Forum und sein Post zeigt zugleich das größte Problem, wenn ihr mit dem Feed arbeitet, nämlich dass das alles wenig intuitiv ist.

Ich denke, deswegen verwendet das auch keiner :(.

Aus der oben erwähnten Diskussion ist nun eine neue, simple Idee entstanden - ihr könnt über ein XMLHttpRequest auch nur Fragmente eures Blogs laden - zB. nur die Post-Titel.

Probiert das in der Demo aus. Die Links in dem grünen Alert laden alle Post-Titel oder nur die Post-Titel eines bestimmten Labels. In der Demo sind zwar nur vier Post-Titel - funktionieren würde das natürlich auch mit mehr Titel!

Was ist Ajax?

Die Javscript-Technik dafür nennt sich Ajax und dabei holt eure Seite mit einem XMLHttpRequest Daten dynamisch vom Server, ohne dass dazu die Seite neu geladen werden muss.

Das klingt a bisserl komplex [was es letztlich auch ist] - aber dank jQuery hat sich die Syntax für solche Aufrufe derart vereinfacht, dass es fast schon DAU kompatibel ist :D.

Wir wollen Beispielsweise 100 Posts mit Ajax laden und beim Element #main anzeigen:

   $("#main").load("/search?max-results=100")

Damit werden alle 100 Posts geladen. Wenn wir Beispielsweise nur das Element .post-title wollen, geben wir das mit an:

 $("#main").load("/search?max-results=100 .post-title");

Das ist alles. Analog dazu bekommen wir die Post-Titel von Posts nur mit dem Label foo:

 $("#main").load("/search/label/foo?max-results=100 .post-title");

Probiert weitere Sortierungen selber aus!

Praktische Beispiele

Ich gebe euch zwei praktisches Beispiel - zuerst wollte ihr mit Klick auf ein Link alle Post-Titel anzeigen lassen.

Legt dazu in der Sidebar in ein HTML/Javascript Gadget oder wo sonst ihr auch immer den Button haben wollt, einen Link:

<a href="" id="click_a“>Alle Posts</a>

Am Ende vom Blog, direkt oberhalb vom schließenden Tag kopiert ihr das Script:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var b = $("#click_a"),
    b.on("click", function(a) {
        $("#main").load("/search?max-results=100 .post-title");
       return !1
    });
});
//]]>
</script>

Das ist alles - mit Klick auf den Link wird die Post-Liste anstelle eurer Posts geladen!

Klick ist doof - ihr wollt eine Post-Liste auf einer statische Seite haben? Das geht mit dem Script innerhalb eines konditionalen Tag super-super einfach:

<script src = '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' />
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
        $("#main").load("/search?max-results=100 .post-title");
    });
    //]]>
    </script>
</b:if>

Statt foo schreibt ihr den Namen eurer Seite in der exakten Groß.- und Kleinschreibung, also etwa liste o.ä. - Fertig!

Probiert rum, spielt mit der Technik - wer was spannendes damit macht, darf das gerne hier in den Kommentaren teilen!