Entradas relacionadas

Hace tiempo que quería colocar en cada entrada, una relación de otras que fueran similares o con temas parecidos. Wordpress tiene "de serie" una utilidad para ello, pero Blogger no, lo que obliga a hacerlo a mano. Una tarea difícil de resolver con éxito y ardua de realizar.

La idea es ofrecer un camino a los lectores, para que puedan seguir una línea temática, mientras navegan por el blog. Al autor también le sirve para sacar a primera línea, entradas antiguas pero que pueden ser de interés para el lector, al estar de alguna manera relacionadas.

Bueno, pues de la mano de Vagabundia, grande donde los haya en esto del HTML y otras hierbas, hemos aprendido a instalar un sistema de búsqueda de entradas con temática parecida a la que se esté leyendo. La similitud está basada en las etiquetas, por lo cual, el sistema será más eficaz cuanto mejor se hayan asignado a cada entrada.

En fin, vayamos al tajo. Acudimos a la edición HTML de la plantilla, expandimos artilugios para no tener que grabar y hacerlo después, y justo a continuación de ]]></b:skin> se graba el código principal. Tiene que ser el primer script de esta parte.

Ver/Ocultar Código[+/-]

<script type='text/javascript'>
//<![CDATA[

var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();

function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}

function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}

function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 4) {
break;
}
}
document.write('</ul>');
}

//]]>
</script>

En la línea while (i < relatedTitles.length && i < 20), la última cifra sirve para limitar las entradas que se mostrarán, a aquellas cuyos títulos no lleguen a 20 caracteres. Se puede cambiar por una cifra mayor o menor. Al gusto.

Por otra parte en if (cuantosPosts == 4), el 4 indica el número máximo de entradas a mostrar. También es configurable.

El segundo paso es buscar el siguiente trozo de código, que se refiere a las etiquetas que tiene asignada cada entrada. En el mismo habrá que insertar la parte en azul.

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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 == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>

</b:loop>
</b:if>
</span>

Ya tenemos preparado el algoritmo. Ahora hay que colocarlo dónde nos interese. Normalmente, será al final de cada entrada, para lo cual buscamos la parte del código que hace referencia al pie de entrada.

Tendremos unas clases que se llaman post-footer-line. Aquí, cada cual tendrá una cantidad de líneas definidas. Hay que buscar la última, que estará cerrada con el correspondiente <div> o estará sin contenido, y entonces se cierra sólo con / y redactada como <div align='left' class='post-footer-line post-footer-line-2'/>. Pues bien, tras esta línea se coloca una nueva con esta redacción:

<div align='left' class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == "item"'>
<br/>Entradas que podrían estar relacionadas:
<span style='font-size:80%;'>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</span>
</b:if>
</div>

Evidentemente, si tenemos generada la línea 3, este número deberá ser sustituido en todos los apartados, en el código que se facilita, por el siguiente número no usado (4, 5, etc.).

Con lo explicado hasta ahora, ya tenemos el artilugio funcionando y en su sitio. Sólo será visible cuando se acceda a una entrada concreta por lo que no os molesteis en darle a Vista Previa. Hay que grabar y después acceder a una entrada en concreto para ver el resultado. (¿Es necesario que os recordemos que antes de nada hagais una copia de seguridad de la plantilla?). Puedes hacerte una idea viendo el final de esta entrada; tras las etiquetas. Si no lo ves, es que estás en la pantalla inicio de este blog. Pincha en el título para acceder de manera individual a la entrada.

Lo único que queda es configurar el aspecto. Para eso, volvemos a editar la plantilla y en la parte de CSS y justo antes de ]]></b:skin> crearemos una nueva clase, que coincidirá con el nombre que hemos estado usando. En este caso post-footer-line-3.

A continuación hay un ejemplo, pero conviene ajustarlo al aspecto de vuestro propio blog.

Ver/Ocultar [+/-]

.post-footer-line post-footer-line-3{
margin: 0 0 10px 20px;
}
.post-footer-line post-footer-line-3 ul {
margin: 0pt;
padding-left: 10px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
.post-footer-line post-footer-line-3 ul li {
margin: 0px 0pt 0px 50px;
font-size: 80%;
list-style-image: none;
list-style-position: outside;
list-style-type: circle;
}
.post-footer-line post-footer-line-3 a, .post-footer-line post-footer-line-3 a:visited {
font-weight: normal !important;
}
.post-footer-line post-footer-line-3 a:hover {
padding-left: 5px;
text-decoration: none !important;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter