Usar JSON para mostrar las entradas del blog

Suponiendo que hemos entendido cómo funciona JSON, vamos a ver si podemos usarlo para mostrar cosas y se me ocurre que como ejemplo, bien podríamos intentar crear un script para mostrar las últimas entradas y, como esto es poco original, vamos a ver cómo es posible leer la imagen que Blogger utiliza como thumbnail y que es la misma que se muestra cuando usamos el gadget Lista de blogs.

Para esto, necesitamos tres pasos, primero, leer los datos, luego mostrarlos, por último, diseñar al forma en que queremos verlos.

El primer paso es el que está explicado de manera elemental en la entrada anterior, necesitamos cargar los feeds y ejecutar una función. La única diferencia notable con ese modelo es que en el bucle, verificaremos si hay una imagen con algo así:

if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
} else {
  postimg = "URL_imagen_por_defecto";
}

Como el contenido de nuestras entradas es HTML, también, agregaremos una función extra para eliminar las etiquetas y dejar sólo el texto.

Coloco entonces las funciones antes de </head>.

<script type='text/javascript'>
//<![CDATA[

// esta función devolverá el texto de la entrada, eliminando las etiquetas
// la llamamos indicando la cantidad de caracteres a mostrar para crear una especie de resumen
function eliminattags(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen =  resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
}

function mostrarentradasconthumb(json) {

  // defino la cantidad de entradas que mostraremos
  var numposts = 4;
  // defino la imagen por defecto que voy a utilizar
   var imagenpodefecto = "URL_imagen";
  // defino la longitud de los resúmenes
   var lenresumen = 100;

  var entry, posttitle, posturl, postimg, postcontent, salida;

  // el bucle que leerá las entradas
  for (var i = 0; i < numposts; i++) {
    // leo y guardo el dato
    entry = json.feed.entry[i];

    // este es el título de la entrada
    posttitle = entry.title.$t;

    // busco la dirección URL de la entrada
    if (i == json.feed.entry.length) { break; }
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        // esta es la dirección de la entrada
        posturl = entry.link[k].href;
        break;
      }
    }

    // busco el contenido de la entrada
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    // este es el contenido resumido
    postcontent = eliminattags(postcontent,lenresumen);

    // busco la imagen de la entrada
    if ("media$thumbnail" in entry) {
      // hay una imagen
      postimg = entry.media$thumbnail.url;
    } else {
      // no hay imágenes asi que uso la que tengo definida
      postimg = imagenpodefecto;
    }

    /*
       ya tengo los datos, podría agregar otros pero, para mi, estos son suficientes:
       posttitle es el título
       posturl es la dirección
       postimg es la imagen
      postcontent es el resumen
    */

    // ACÁ TENDRÉ QUE MOSTRARLOS
    // EL CODIGO DE SALIDA

  }
}
//]]>
</script>

Para mostrar esos datos, tengo que pensar el diseño. Lo más sencillo es colocarlos en un DIV con una clase especial y así, separar el CSS del script. Entonces, podría, por ejemplo, hacer que se mostraran de este modo:

<div class='miresumen1'>
  <a href='URL_entrada' target='_blank'><img src='URL_imagen' /></a>
  <h6><a href='URL_entrada' target='_blank'> título e la entrada </a></h6>
  <p> el resumen de la entrada ... </p>
</div>

Así que, haré que el script escriba eso, usando las variables. Lo que debería poner en EL CODIGO DE SALIDA es esto:

salida = "<div class='miresumen1'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "<p>" + postcontent + " ... </p>";
salida += "</div>";
document.write(salida);

Ahora, llamaré a la función, agregándola en algún post, debajo de estos, en una página estática o donde quiera mostrarlo:

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

Con un poco de CSS que ponemos antes de </b:skin>, lo armamos estéticamente.

.miresumen1 {
  border-bottom: 1px solid #555;
  float: left;
  height: 190px;
  margin: 0 5px;
  padding: 5px;
  width: 135px;
}
.miresumen1:hover {
  background-image: -moz-linear-gradient(100% 100% 90deg, #555, #000);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#555)), to(#000));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF555555');
}
.miresumen1 a {
  color: #FC0;
  display: block;
  font-size: 12px;
  text-align: center;
}
.miresumen1 img {
  height: 72px;
  width: 72px;
}
.miresumen1 h6 {
  border-bottom: 1px dotted #888;
  height: 30px;
  margin: 5px 0 0;
  padding-bottom: 2px;
}
.miresumen1 p {
  color: #CCC;
  font-size: 11px;
  line-height: 1.3em;
  margin: 5px 0 0;
}

Modificando la salida, cambiamos la forma de mostrar los datos. Otro ejemplo donde no mostramos el contenido de las entradas:

salida = "<div class='miresumen2'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "</div>";

.miresumen2 img {
  border: 5px solid transparent;
  padding: 3px;
  height: 72px;
  width: 72px;
}
.miresumen2 img:hover {
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455);
border:5px solid #555;
}
.miresumen2 a {
  color: #FFCC00;
  display: block;
  font-size: 12px;
  font-weight: normal;
  text-align:center;
}
.miresumen2 a:hover {
  font-weight: bold;
}
.miresumen2 h6 {
  height: 30px;
  margin: 5px 0 0;
}

Y un ejemplo más donde vamos a reducir la información y aumentar la cantidad de entradas a ser mostradas:

salida = "<div class='miresumen3'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "</div>";

.miresumen3 {
  border: 1px solid #555;
  float: left;
  height: 35px;
  margin: 1px;
  padding: 5px;
  width: 190px;
}
.miresumen3 a {
  color: #DDD;
  display: block;
  font-size: 11px;
  font-weight:normal;
}
.miresumen3 img {
  float: left;
  height: 36px;
  width: 36px;
}
.miresumen3 h6 {
  float: right;
  height: 45px;
  margin: 0;
  width: 145px;
}
.miresumen3:hover {
  background-image: -moz-linear-gradient(100% 100% 90deg, #338, #33F);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');
  border: 1px solid #33F;
}