JSON y las etiquetas

En un comentario reciente, Ariane hablaba sobre la forma de utilizar Json para generar una plantilla novedosa donde se mostrarán las entradas resumidas de ciertas categorías (ver demo) y se basaba en un código publicado por simplexdesign pero, el problema que se le presentaba era que ese código no funcionaba en Internet Explorer.

El error, en realidad, no tiene sentido explicarlo y las soluciones para evitarlo deben ser varias pero, como no soy versado en esto del JavaScript, se me ocurre que lo más simple es lo más seguro aunque no sea demasiado profesional así que, cumplo con Ariane y trataré de explicar la idea general que podría aplicarse en cualquier modelo de diseño ya que esto es posible agregarlo en la plantilla, en un widget de tipo HTML, en una página estática o incluso en un post.

Primero el script que podemos poner antes de </head>:

<script language="JavaScript">
//<![CDATA[
imgr = new Array();
var contarlabels = 0;

// esto es lo que deberíamos configurar
imgr[0] = "URL_imagenxdefecto"; // establecer la imagen por defectoq euse va a utilizar
showRandomImg = true; // poner false si no se quiere que la imagen sea aleatoria
summaryPost = 60; // cantidad de caracteres del resumen
summaryTitle = 25; // cantidad de caracteres del título
numposts = 5; // cantidad de entradas a ser mostradas

// la lista de etiquetas que queremos mostrar; acá hay dos pero puede haber mas
// siempre entre comillas y separadas por una coma
labelname = new Array("iconos","Twitter"); // los nombres de las etiquetas a mostrar
labeltitle = new Array("iconos","Twitter"); // los títulos a mostrar

// esta es la función general que elimina las etiquetas HTML
function removeHtmlTagEtiquetas(strx,chop){
  var s = strx.split("<");
  for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
      s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }    
  }
  s =  s.join("");
  s = s.substring(0,chop-1);
  return s;
}

// esta es la función que analiza las entradas y las muestra
function showrecentpostsetiquetas(json) {

  var salida = "";
  var salidainner= "";
  j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
  img  = new Array();

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    if (i == json.feed.entry.length) break;

   // el titulo de la entrada
    var posttitle = entry.title.$t;

    // buscamos al url del post
    var posturl;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == "alternate") {
        posturl = entry.link[k].href;
        break;
      }
    }

    // buscamos el contenido del post
    if ("content" in entry) {
      var postcontent = entry.content.$t;
    } else
      if ("summary" in entry) { var postcontent = entry.summary.$t; }
    else var postcontent = "";

    // aquí se busca entre las imágenes y se selecciona una
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent;
    a = s.indexOf("<img");
    b = s.indexOf("src=\"",a);
    c = s.indexOf("\"",b+5);
    d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    // terminada la lectura de cada post, se crea el HTML del contenido
    var trtd = "";
    trtd += '<a href="' + posturl + '"><img src="' + img[i] + '"></a>';
    trtd += '<a class="tlabel" href="' + posturl + '">' + removeHtmlTagEtiquetas(posttitle,summaryTitle) + '</a><br/>';
    trtd += removeHtmlTagEtiquetas(postcontent,summaryPost);
    trtd += ' ...<div class="botline"></div>';

   // y continuamos con el siguiente
    salidainner += trtd;
    j++;
  }

  // una vez que se lee la cantidad de posts indicada en numposts, se crea el HTML del DIV y se muestra
  salida += '<div class="featured">';
  salida += '<h3>' + labeltitle[contarlabels] + '</h3>';
  salida += salidainner;
  salida += '<a class="morelabels" href="http://vagabundia.blogspot.com/search/label/' + labelname[contarlabels] + '?max-results=10">ver otras entradas de  '+ labelname[contarlabels] +'</a>';
  salida += '</div>';
  document.write(salida);
  contarlabels ++;

}
//]]>
</script>

El script ese ha sido modificado un poco del original pero el concepto general es el mismo que con todos los scripts que utilizan Json; leemos, guardamos los datos que vamos a usar y leugo, creamos el HTML que es lo que se mostrará; en este caso, elimino etiquetas como <b></b> y le pongo clases a los diferentes sectores ya que de ese modo es mucho más fácil controlar el diseño mediante CSS que es lo que haremos a continuación de lo anterior:

<style>
  .featured { /* es el rectángulo contendor de cada etiqueta */
    float: left;
    font-size: 11px;
    height: 390px;
    margin: 0 10px;
    overflow: hidden;
    padding: 10px;
    width: 270px;
  }
  .featured h3 { /* el título general */
    background-color: #555;
    border-bottom: 1px solid #888;
    color: #BBB;
    margin: 0 0 10px;
    padding: 5px 0;
    text-align: center;
  }
  .featured img { /* las miniaturas */
    background-color: #555;
    float: left;
    height: 50px;
    margin: 0 8px 0 0;
    padding: 2px;
    width: 50px;
  }
  .featured .botline { /* la línea divisoria */
    border-bottom: 1px dotted #555;
    clear: both;
    margin-bottom: 5px;
    padding: 0 0 5px;
  }
  .featured a.tlabel { /* el título de cada post */
    font-size: 11px;
    display: block;
    float: left;
    max-width: 205px;
    overflow: hidden;
    white-space: pre;
  }
  .featured a.morelabels { /* el enlace final a las etiquetas */
    background-color: transparent;
    color: #AAA;
    display: block;
    padding: 4px 0;
     text-align: center;
  }
  .featured a.morelabels:hover {background-color: #555;}
</style>

Hecho todo eso no pasará nada; nos falta llamar a laa función tantas veces como etiquetas querramos ver y eso, lo hacemos con otro script tal como lo hacemos en todos los ejemplos anteriores y colocamos esos scripts exactamente allí donde quisiéramos que se mostraran; por ejemplo:

<div id="miejemplo">
  <script src="http://miblog.blogspot.com/feeds/posts/default/-/UNA_ETIQUETA?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostsetiquetas"></script>
  <script src="http://miblog.blogspot.com/feeds/posts/default/-/OTRA_ETIQUETA?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostsetiquetas"></script>
  <!-- y seguimos agregando todos los que se nos ocurra mostrar -->
</div>
<div style="clear:both;"></div>

Allí, solo debemos poner la URL de nuestro sitio e ir cambiando el nombre de la etiqueta que siempre, debe ser escrita con exactitud ya que es sensible a mayúsculas y minúsculas.