Navegando entradas de una etiqueta usando JSON

Sigamos mezclando cosas.

A partir de la navegación por entradas usando JSON, otra posibilidad es hacer algo similar con las etiquetas pero, usando algún otro dato que también nos dan los feeds y el resultado, será algo parecido a esta entrada pero, agregándole la posibilidad de avanzar y retroceder en la lista sin necesidad de salir de la página, cargándolas de manera dinámica.

Esta vez, en lugar de contar las entradas y paginarlas, vamos a usar el dato de página anterior y página siguiente que puede ser leido en el feed ya que las páginas son enlaces que tienen un atributo rel específico pero, hay varios enlaces generales así que las buscamos de esta manera:

var urlanterior = "";

var urlsiguiente = "";



for (var k = 0; k < json.feed.link.length; k++) {

  if (json.feed.link[k].rel == 'previous') {

    // si existe, guardamos la dirección a la página anterior

    urlanterior = json.feed.link[k].href;

  }

  if (json.feed.link[k].rel == 'next') {

    // si existe, guardamos la dirección a la página siguiente

    urlsiguiente = json.feed.link[k].href;

  }

}

El problema con esas direcciones es que son raras; no sé por que. Por ejemplo, dicen esto:

http://www.blogger.com/feeds/33571139/posts/default/-/iconos/-/iconos?alt=json-in-script&start-index=6&max-results=5&orderby=published

así que usaremos JavaScript para modificarla un poco eliminando una parte y que se adapte al formato que uno conoce.

Entonces, como en todos los casos anteriores, primero el JavaScript que ponemos antes de </head>:

<script type='text/javascript'>

//<![CDATA[

... aquí ponemos el contenido del script

//]]>

</script>

o bien cargamos desde un archivo externo:

<script type='text/javascript' src='URL_archivo.js' />

El script puede ser descargado desde este archivo de texto y allí, cada uno deberá hacer algunos pequeños cambios para agregar los datos personales:

// estos son los datos que deben definirse

var entradasporpagina = 5; // establecer la cantidad de entradas a mostrar

var urlsitio = "http://miblog.blogspot.com"; // cambiar por el nombre del sitio

var imgxdefecto = "http://xxxxxxxxxxx"; // establecer la dirección de la imagen por defecto a ser utilizada

var cualetiqueta = "nombreetiqueta"; // definir la etiqueta a mostrar



var flagfirst = 0;

var cantidadposts = 0;

var urlanterior, urlsiguiente;



// esta es la función genérica que elimina las etiqueas y crea el resumen

function eliminartags(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;

}



// esta es la misma función de siempres con algunas variantes

function showpageetiquetas(json) {

  var entry, posttitle, posturl, postimg, postcontent;

  var salida = "";



  // vamos a buscar las direcciones para navegar la lista

  for (var k = 0; k < json.feed.link.length; k++) {

    if (json.feed.link[k].rel == 'previous') {

      // esta es la página anterior

      urlanterior = json.feed.link[k].href;

    }

    if (json.feed.link[k].rel == 'next') {

      // esta es la página siguiente

      urlsiguiente = json.feed.link[k].href;

    }

  }



  // leemos tantas entradas como definimos

  for (var i = 0; i < entradasporpagina; i++) {



    // si no hay más, terminamos el bucle

    if (i == json.feed.entry.length) { break; }



    entry = json.feed.entry[i];



    // este es título de cada entrada

    posttitle = entry.title.$t;



    // buscamos la URL de la entrada

    for (var k = 0; k < entry.link.length; k++) {

      if (entry.link[k].rel == 'alternate') {

        // la guardamos

        posturl = entry.link[k].href;

        break;

      }

    }



    // buscamos el contendio de la entrada y lo guardamos

    if ("content" in entry) {

      postcontent = entry.content.$t;

    } else if ("summary" in entry) {

      postcontent = entry.summary.$t;

    } else {

      postcontent = "";

    }



    // buscamos la imagen o usamos una imagen por defecto

    if ("media$thumbnail" in entry) {

      postimg = entry.media$thumbnail.url;

    } else {

      postimg = imgxdefecto;

    }



    // terminada la lectura, vamos creando el código HTML

    salida += "<div class='paginaetiquetas'>";

    salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";

    salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";

    salida += "<p>" + eliminartags(postcontent,100) + " ...</p>";

    salida += "</div>";

  }



  // terminamos el bucle y escribimos el resultado que son las entradas encontradas

  document.getElementById("misetiquetas").innerHTML = salida;



  // vamos a crear la parte inferior con la navegación

  salida = "";



  // si hay una página anterior, ponemos el elnace y sino, sólo un texto

  if(urlanterior) {

    salida += "<a href='javascript:navpaginaetiquetas(-1);' class='anterior'>anterior</a>";

  } else {

    salida += "<span class='deshabilitado anterior'>anterior</span>";

  }



  // si hay una página siguiente, ponemos el elnace y sino, sólo un texto

  if(urlsiguiente) {

    salida += "<a href='javascript:navpaginaetiquetas(1);' class='siguiente'>siguiente</a>";

  } else {

    salida += "<span class='deshabilitado siguiente'>siguiente</span>";

  }

 

  // le agregamos un enlace a la primera página

  salida += "<a href='javascript:navpaginaetiquetas(0);' class='inicio'>inicio</a>";



  // escribimos el código

  document.getElementById("navegadionetiquetas").innerHTML = salida;

}



// esta es la funcion que creará la dirección del feed que vamos a leer

function navpaginaetiquetas(direccion){

  var p, parametros;

  if(direccion==-1) {

    // página anterior

    p = urlanterior.indexOf("?");

    parametros = urlanterior.substring(p);

  } else if (direccion==1) {

    // página siguiente

    p = urlsiguiente.indexOf("?");

    parametros = urlsiguiente.substring(p);

  } else {

    // página inicial

    parametros = "?start-index=1&max-results=" + entradasporpagina + "&orderby=published&alt=json-in-script"

  }

  parametros += "&callback=showpageetiquetas";

  

  incluirscript(parametros);

}



// esta es la funcion que carga el script de manera dinámica

function incluirscript(parametros) {

  // si no es la primera vez, borramos el script anterior

  if(flagfirst==1) {removerscript();}

  // borramos todo y ponemos un texto o una imagen de carga

  document.getElementById("misetiquetas").innerHTML = "<div id='loadingscript'></div>";

  document.getElementById("navegadionetiquetas").innerHTML = "";

  // este es el archivo con los feeds

  var archivofeeds = urlsitio + "/feeds/posts/default/-/" + cualetiqueta + parametros;

  // lo cargamos y ejecutamos

  var nuevo = document.createElement('script');

  nuevo.setAttribute('type', 'text/javascript');

  nuevo.setAttribute('src', archivofeeds);

  nuevo.setAttribute('id', 'OTROTEMPORAL');

  document.getElementsByTagName('head')[0].appendChild(nuevo);

  flagfirst = 1;

}



// esta es la función que remueve el script cargado previamente

function removerscript() {

  var el = document.getElementById("OTROTEMPORAL");

  var padre = el.parentNode;

  padre.removeChild(el);

}



// cuando se cargue nuestro sitio, iniciamos las funciones

onload=function() { navpaginaetiquetas(0); }

Un poco de CSS para darle forma. Lo ponemos debajo de lo anterior:

<style>

  #misetiquetas { /* el contenedor */

      margin: 0 auto;

      width: 314px;

  }

  #loadingscript { /* el texto o imagen de carga */ }

  .paginaetiquetas { /* cada una de las entradas */

    border: 2px solid #101921;

    height: 72px;

    margin: 5px 0;

    padding: 5px;

    width: 300px;

  }

  .paginaetiquetas img { /* la miniatura */

    float: left;

    height: 72px;

    padding-right: 5px;

    width: 72px;

  }

  .paginaetiquetas h6, .paginaetiquetas h6 a { /* los títulos de las entradas */

    font-size: 11px;

    font-weight: normal;

    margin: 0;

  }

  .paginaetiquetas p { /* los resúmenes */

    font-size: 11px;

    margin: 5px 0;

  }

  #navegadionetiquetas { /* el contenedor con los enlaces para navegar */

    border: 1px solid #404951;

    color: #BBB;

    font-size: 18px;

    text-align: center;

    margin:0 auto;

    width:314px;

  }

  #navegadionetiquetas a { /* los enlaces para navegar */

    color: #BBB;

    display:block;

    font-size: 18px;

    padding: 5px 10px;

  }

  #navegadionetiquetas span { /* los textos deshabilitados */ 

    color: #666;

    padding: 5px 10px;

  }

  /* las posiciones de los enlaces para navegar */

  #navegadionetiquetas .siguiente {float: right;}

  #navegadionetiquetas .anterior {float: left;}

  #navegadionetiquetas .inicio {text-align: center;}

</style>

Bien; sólo nos falta ponerlo en algún elemento HTML, en un post o en la plantilla misma:

<div id="misetiquetas"></div>

<div id="navegadionetiquetas"></div>

Y eso es todo.