JMiur [E]

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.

34 comentarios:

Adalberto  

Vaya muy bueno, cada vez pules más los trucos.
¿Habría forma de agregar varías etiquetas como el tutorial de JSON y las Etiquetas o sólo se puede con una?

Responder
Graciela  

Jmiur, ésto es genial, cuando tenga tiempo lo pruebo!

Que tengas un día bonito :P

Responder
Adrián J. Messina  

La verdad es que el mundo de JSON, es fantástico.
La forma en la que obtiene los datos es realmente muy útil para los blogs con muchas entradas, con ingenio se puede explorar un blog grande muy cómodamente.
Gracias por enseñarnoslo.

Responder
Beben Koben  

wek's...brand new anymore...hohoho :O

Responder
JMiur  

Adalberto:
Es probable que si pero sería muy engorroso ya que debería repetirse la función apra cada etiqeuta, mezclar los datos y luego mostrarlos. No existe (antes existía) la posibilidad de ller un feed con etiquetas combinadas.

Pruebe, Graciela, n otendrá problemas.

Adrián:
Eso mismo creo yo y además, es la única forma de hacerlo en Blogger.

Responder
Uchiha Madara  

Te quedó genial Jmiur, una pregunta crees que se pueda hacer esto no solo para una etiqueta, en el caso que uno ocupe varias de estas "tablas de contenido",en diferentes post para mostrar las entradas de cierta categoría, crees que se pueda llamar a la funcion y enviarle el nombre de la etiqueta como parametro?

Saludos!

Responder
JMiur  

Entiendo que sí. En este caso, la etiqueta es definida por la variable cualetiqueta por lo tanto, bastaría enviar ese dato con cualquier valor. No lo he probado pero, imagin oque es posible.

Responder
jαvιєя.ɢm  

Hola JMiur, quería saber si existe alguna forma de integrar esto a WordPress.org
Estoy recién integrándome a ese sistema, por necesidad más que por gusto, y no sé cómo utilizar cosas que tenía en blogger.

Saludos

Responder
JMiur  

Esto ue se meustra acá.lee los feeds; hay múltiples formas de leer los feeds en WordPress ya que allí puede usarse PHP; lo más sencillo es usar las funciones de simplexml pero, también hay plugins para integrar Json.

En realidad, es innecesario ya que hay muchas formas de acceder a la base de datos y extraer la información con cualquier grado de detalle.

Responder
Administrador ArucasBlog  

pues lo intento y lo intento pero no logro que funcione

Responder
JMiur  

Sin un ejemplo que se pueda ver, nada puedo agregar.

Responder
Felipe  

Este es uno de esos gadgets que son impresionantes y muy útiles, estaba tenta y por fin lo puse, quedó muy bien. :D

Durante el proceso me surgió una duda, si en el script cambiamos esta línea:

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

por esta otra:

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

¿cargar el feed resumido puede acelerar un poco (nada sustancial) la carga de las entradas?

Otra cosita chiquitita, en los estilos para
#navegadionetiquetas span
sobra un corchete de cierre. ;)

Responder
JMiur  

Al ser más corto, se cargará más rápido pero, no tendrá los mismos datos; por ejemplo, la imagen.

Responder
Felipe  

Fijate que la imagen si aparece :D

Responder
JMiur  

Pues, yo no la veo:
http://vagabundia.blogspot.com/feeds/posts/summary/-/json
es posible que esté como dato interno pero no se muestre.

Responder
Felipe  

Fijate que en este si aparece el elemento media$thumbnail
http://vagabundia.blogspot.com/feeds/posts/summary?alt=json-in-script&prettyprint=true

Responder
JMiur  

Sí. Es lo que quise decir, que no se ve de manera directa pero, que es parte de los datos.

Responder
Pacheta  

¿Se puede mostrar mas de una etiqueta?
Gracias, muy útil.

Responder
JMiur  

Los feeds son individuales, no hay feeds que combinen etiquetas; para hacer eso, deben leerse por separado y luego ver que se hace con toda esa información.

Responder
Pacheta  

Gracias!

Responder
Anyelo Gonzalez  

amigo como lo gologo dentro un elemento HTML es decir hice todo el precedimiento pero como lo coloco dentro de un elemento para mostrarlo por ejemplo en la sidevar

JMiur  

No sé qué queires colocar en ese elento HTML, sólo es necesario el DIV de salida tal como indica la entrada:

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

Responder
Ronny Deddy Rondonuwu  

Nice, I want to try in my blog :) Thanks for sharing

Responder
Rey  

como se pondria en las entradas con X etiqueta ?

JMiur  

Aclara la pregunta porque no se entiende.

Rey  

si disculpa luego de haberla echa me di cuenta , me refiero a que quiero agregarlo en un sidebar , pero solo quiere que se muestre en las entradas que contenga "x" etiqueta ( no en la pagina principal )

me refería a eso disculpa no haber echo la pregunta correctamente , así como haces vos si me explico ?

JMiur  

Blogger no dispone de una condición para eso; a qué etiqueta pertenece el post que se muestra, es un dato que sólo se puede leer en el includable posts así que es allí donde debería haber alguna clase de script que verifique si es la etiqueta que quieres mostrar y luego, debería usarse ese dato para ejecutar o no el script que muestra esta entrada.

Creo que hacer todo eso es demasiado complicado.

Responder
Domin-Omega  

Obra maestra.

Responder
Adolfo Fernandez  

Hola Jmiur... Quisiera saber como puedo usar este Gadget, pero en ves de mostrar una "etiqueta", me gustaria mostrar como gadget de entradas relacionadas, asi como lo tienes tu, en la sidebar de este blog. Cual es la parte del codigo que habra que modificarse?

JMiur  

No entiendo la pregunta ya que el gadget que se muestra en la entrada es el mismo que aparece en la sidebar de este blog y las entradas relacionadas son eso, entradas que tienen la misma etiqueta.

Responder
Adolfo Fernandez  

Segun lo que Explicas en Este post, entiendo que este Gadget sirve para navegar las entradas de una sola etiqueta.

Entiendo que aqui hay que difinir la etiqueta (var cualetiqueta = "nombreetiqueta"; // definir la etiqueta a mostrar)

Pero que pasa si quiero que el gadget cambie de etiqueta automaticamente, en funcion a la entrada que este visitando en ese momento?. Asi como lo tienes en el sidebar de este blog.

JMiur  

Teiens que combinar lo que dice la entrada con esta otra entrada donde se muestra la forma de crear una variable que contendrá la etiqueta del post ( var etiquetasRelacionadas ) pero solo una etiqueta y no varias.

Luego, en el script de la sidebar, se usa esa variable para crear la url del feed:

var cualetiqueta = etiquetasRelacionadas; // definir la etiqueta a mostrar.

Adolfo Fernandez  

Voy a probarlo Jorge... a ver si se ve tan bien como en tu blog, saludos... y una ves mas, gracias por responder!

Responder
Pepe Pilato  

Pero a ti te aparecen la etiqueta segun la entrada, es como entradas relacionadas, ¿no?

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR