El misterioso JSON

Hay decenas de trucos que agregamos y que nos dicen cosas como "acá debemos poner la dirección de los feeds". Lo hacemos porque es sencillo, funcionarán o no funcionarán pero ¿qué demonios es un feed? ¿Magia negra? Nada de eso, en realidad, no es otra cosa que un archivo común y corriente.

Los feeds son archivos creados por el servidor (Blogger en nuestro caso) y si los miramos, veremos que contiene una serie de etiquetas con información de lo que se ha publicado en nuestro sitio; como muchas otras cosas en la web, hay muchos formatos de feeds y la diferencia entre ellos poco nos interesa, será RSS (Rich Site Summary) o Atom o XML, da igual y serán los lectores de feeds los que se encarguen de interpretarlos.

Como decía, muchos scripts que utilizamos en Blogger hacen referencia a los feeds; los usamos para mostrar los últimos comentarios, las últimas entradas, los posts relacionados, aleatorios, etc, etc. Es que, al no tener acceso a esos datos, nos vemos en la necesidad de emplear un camino alternativo y ese camino tiene nombre y lo hemos utilizado muchísimas veces, se llama JSON (JavaScript Object Notation) que no es otra cosa que un "archivo especial", también creado por el servidor y que tiene un formato diferente; allí, los datos, están guardados de tal forma que podemos leerlos con JavaScript.

Esto parece algo complicadísimo pero en realidad no lo es ... bueno, más o menos. En términos generales, para hacerlo sólo necesitamos dos cosas, cargar el script indicando que queremos que esté en ese formato y tener alguna función que lo interprete o lo manipule:

<script type="text/javascript">
  function leerfeeds(json) {
    // esta es la función y aquí haremos algo
  }
</script>

<script src="http://miblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=leerfeeds"></script>

Esto suele ser mucha información, demasiada, así que, generalmente, se nos dice que agreguemos parámetros para indicar la cantidad de información que solicitamos o la forma en que queremos que se nos envie. Por ejemplo, así solicitamos que nos envien sólo las últimas diez entradas, ordenadas por fecha:

<script src="http://miblog.blogspot.com/feeds/posts/default?max-results=10&orderby=published&alt=json-in-script&callback=leerfeeds"></script>

Claro, una de las claves es justamente, resolver eso de "aquí haremos algo" pero empecemos por saber qué datos son accesibles y cómo leerlos así que vamos a ver cómo sería una función elemental:

<script type='text/javascript'>
//<![CDATA[
function leerfeeds(json) {

  var entry, posttitle, posturl, postimg, postcontent, postcategoria, postfecha;
  var numposts = 10; // la cantidad de entradas a leer

  // con un bucle, leemos las diez entradas que solicitamos, una por una
  for (var i = 0; i < numposts; i++) {

    // los datos de cada entrada se guardan en la variable entry
    entry = json.feed.entry[i];
    // como puede ser que no haya tantas entradas como solicitamos, si ya no hay más, terminamos
    if (i==json.feed.entry.length) { break; }

    // el título de la entrada lo leemos leyendo entry.title.$t
    posttitle = entry.title.$t;

    // la URL de la entrada hay que buscarla ya que hay varias
    // una contiene la URL del blog, otra la de la entrada, otra la de los archivos adjuntos, etc
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        // la encontramos: esta es la direccion URL de la entrada
        posturl = entry.link[k].href;
        break;
      }
    }
    
    // buscamos el contenido de la entrada que puede estar completa o no
    postcontent = "";
    if ("content" in entry) {
      // el contenido de la entrada en un feed completo
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      // el contenido de la entrada en un feed corto
      postcontent = entry.summary.$t;
    }
    // en ambos casos, el contenido es nuestra entrada en formato HTML

    // y hay muchos más datos que pueden ser leidos

  /*
    entry.category[] y entry.category[x].term nos permitirá leer las etiquetas que tiene esa entrada
    entry.published.$t es la fecha de publicación
    entry.updated.$t es la fecha de la ultima actualización
    entry.author[] y entry.author[x].name.$t nos permitirá leer el nombre de los autores
  */

    // ..........................................
    // ya tenemos los datos así que acá vamos a escribirlos en nuestra página
    // ..........................................

  }
}

//]]>
</script>

¿Cómo escribirlos? No hay una sola forma de hacerlo sino tantas como diseños se nos ocurran así que eso lo veremos luego ...

REFERENCIAS:Google Code