Posts relacionados con miniaturas usando Json

 

Hay varias entradas bastante viejas (el reloj de la web es particularmente cruel y todo es viejo en cinco minutos) donde se explican diferentes métodos para mostrar entradas relacionadas en Blogger 

Muchos otros emplean LinkWithin que es un sistema externo que permite agregar un gadget para diferentes plataformas y es un método muy usado porque se ha puesto de moda y también porque muestra un imagen junto con el título y el enlace: Ver detalles en El escaparate de Rosa 

Como no me gustan las modas ni los servicios externos, vamos a ver una forma de transformar el método original que mostraba una lista con los títulos y los enlaces de las entradas relacionadas para que sea similar al otro y se le añadan las miniaturas de las entradas.

Para eso, basta seguir con la idea de lo explicado en las entradas que hablaban de JSON y de la forma en que podemos acceder a los diferentes datos de los feeds de nuestro blog. Uno de ellos es justamente ese, la miniatura (si es que existe una imagen en el post) así que bastaría modificar aquellos scripts originales para leer más datos y luego, cambiar la forma en que son mostradas.

Repaso el tema de los posts relacionados.

Tiene tres partes; la primera es el script en si mismo que es el que puede descargarse completo en este archivo de texto y que agregamos a la plantilla antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  ... acá pegamos el contenido del archivo de texto ...
//]]>
</script>

Allì sólo es necesario establecer los datos personales:

var relmaxamostrar = 4; // cantidad de entradas a ser mostradas
var relmaxlen = 100; // la cantidad de caracteres de los resumenes
var relimagenpodefecto = "URL_imagen"; // la imagen por defecto

Las otras dos partes requieren desplegar los artilugios de la plantilla. Buscamos el código donde se muestran las etiquetas en el footer de cada entrada y allí agregamos lo indicado en color:

<b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  <b:if cond='data:label.isLast != "true"'>,</b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=leerpostetiquetas&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
</b:loop>

Eso, condicionará el llamado a JSON para que sólo funcione en las entradas individuales y leerá los feeds de las etiquetas de nuestro blog.

callback=leerpostetiquetas es la función de JavaScript que se ejecutará e interpretará esos datos
max-results=50 es la cantidad de datos a leer y puede ser cualquier número pero, siempre debe tenerse en cuenta que si el número es muy alto, el proceso será más largo y por lo tanto, la carga del blog será más lenta

El tercer paso es decidir donde vamos a mostrarlo. Normalmente, debajo de las entradas así que deberemos buscarlo y eso no es fácil de explicar porque depende de cada plantilla pero, por ejemplo, podemos intentar encontrar alguno de los DIVs donde se muestran el autor, la fecha, los botones para compartir, etc que suelen estar en algo así:

<div class='post-footer-line post-footer-line-X'>
  .......
</div>

Agregamos entonces otro DIV que también condicionamos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='postsrelacionados'>
      <script type='text/javascript'>mostrarrelacionados();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>

Eso es todo, faltará claro, el CSS que es personal y agregamos junto con el resto, entre <b:skin> y </b:skin> o bien, tambien lo podemos condicionar y poner antes de </head>. Ver/Ocultar [+]

Para quien quiera personalizar un poco las cosas, veamos si es posible explicar el funcionamiento de los scripts y las posibles variantes. Ver/Ocultar [+]

¿Será esto mas fácil que agregar un gadget pre-diseñado? No, claro que no pero, algunos nos resistimos a eso de hacer click-click-click y preferimos el estilo "fatto in casa" porque el exceso de clicks genera callos en el dedo índice y también en las neurona