Blogger Tipp Nr.5 - Feeds auslesen und anzeigen

Oft möchte man ja andere Inhalte von Webseiten auslesen und in seine eigene Webseite integrieren z.B. Twitterergebnisse, News usw. Natürlich ist es nicht erlaubt fremde Inhalte als seine eigenen auszugeben. Bitte beachtet das Urheberrecht! Wer auf seinen Seiten eine serverseitige Scriptsprache wie z.B. PHP verwenden kann hat da keine Probleme. Schwieriger ist das wenn diese Mögleichkeiten nicht vorhanden sind wie z.B. hier bei Blogger.com. Dann bleibt euch nur die Möglichkeit dies über Javascript zu tun.
Am einfachsten ist es wenn euch ein Feed im JSON-Format angeboten wird. Wenn diese Möglichkeit nicht besteht, oder ihr mehrere Quellen zusammenfassen wollt könnt ihr die über Yahoo Pipes machen. Solch eine Pipe ist recht einfach zu erstellen. Die Ausgabe kann in vielen Formaten erfolgen, eine Möglichkeit ist JSON. JSON Ausgaben ermöglichen die Angabe einer Callback-Funktion und in dieser Funktion könnt ihr dann die Elemente des Feeds  auslesen und entsprechend anzeigen. Ein Beispiel für eine solche Ausgabe sieht wie folgt aus:

   1:  function(json){

   2:     var listhis='<ul>';

   3:     var ende=-1;

   4:     for(var i=0; i<json.count; i++){

   5:          var posttitle=json.value.items[i].title;

   6:          var postlink = json.value.items[i].link;

   7:          var inhalt="";

   8:          try{

   9:                inhalt=json.value.items[i].description;

  10:          }

  11:          catch (e) {}

  12:          ende=inhalt.indexOf("<a name='more'>");

  13:          if (ende != -1){

  14:              inhalt=stripHTML(inhalt.slice(0,ende))+ "...";

  15:          }else {

  16:             ende=inhalt.indexOf("<br");

  17:             if (ende > 500){

  18:                 inhalt=stripHTML(inhalt.slice(0,ende))+ "...";

  19:             }else inhalt=stripHTML(inhalt).slice(0,500)+ "...";

  20:          }

  21:          if (inhalt=="...")inhalt="";

  22:              listhis+='<li><a href="'+postlink+'" target="_blank">'+posttitle+'</a><br />'+inhalt+'<br /></li><hr />';

  23:          }

  24:          listhis+='</ul>';

  25:          document.getElementById('auflisten').innerHTML=listhis;

  26:  });

  27:   

  28:  function stripHTML(str){

  29:      var tmp = str.replace(/(<.*['"])([^'"]*)(['"]>)/g, 

  30:             function(x, p1, p2, p3) { return  p1 + p3;}

  31:      );

  32:      return tmp.replace(/<\/?[^>]+>/gi, '');

  33:  }

Was nach "json." steht hängt von eurem empfangenen JSON-Feed ab. Das heisst ihr müsst diesen JSON im Browser öffnen und sehen welche Namen ihr benötigt. Siehe im Script zeilen  4 bis 6 und 9. Der Rest schneidet nur die Texte ab und enfernt alle Formatierungen und Bilder.  Natürlich muss noch ein entsprechendes Ausgabeelement in HTML vorhanden sein:

<div id="auflisten">Loading...</div>

Dann fehlt nur noch der Teil zum Laden des JSON, hier als Beispiel das laden einer Pipe von Yahoo. Dazu ist die Zeile 1 im ersten Script-Snippet zu ersetzen mit:

$.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=PIPE_ID&_render=json&_callback=?',{}, function(json){

PIPE_ID ist dann durch eure ID die ihr abrufen wollt zu ersetzten. Beachtet auch die unterschiedliche Schreibweise des Parameters Callback, mal mit mal ohne Unterstrich, je nach Anbieter! Damit das Ganze aber auch funktioniert muss die JavaSript-Library jQuery eingebunden sein. Wer das noch nicht hat kann das zum Beispiel so tun:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

Kleiner Tipp noch zum Schluss, auch euer Blog bei Blogger/Blogspot bietet JSON Feeds an! An eure normalen Feeds einfach

?alt=json

anhängen. Der Callback-Parameter muss hier ohne Unterstrich geschrieben werden!