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' />

// 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.