Blogger: Posts relacionados (1)

A veces podría ser una buena práctica agregar una lista de posts relacionados con ese que estamos viendo, es una forma de reavivar artículos "viejos" y promover la lectura de nuestro blog.

En Blogger no hay una herramienta específica para esto pero podemos valernos de las que existen, por ejemplo, las etiquetas o categorías.

Primero que nada, vamos a la plantilla y buscamos la etiqueta </b:skin> y justo debajo de esta, agregamos el script. Esto es así ya que debe estar ANTES que cualquier otro script que hayamos definido:

<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 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++;
}
document.write('</ul>');
}

//]]>
</script>

Donde relatedTitles.length && i < 20 filtra los posts a mostrar según la longitud de su título. En este caso, si contienen más de 20 caracteres, no serán mostrados. El valor 20 puede ser reemplazado por cualquier otro.

Guardamos la plantilla y marcamos Expandir elementos.

Ahora, debemos buscar la siguiente sección de código:

<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>
aquí agregaremos el código del script
</b:loop>
</b:if>

Eso que está entre <b:loop> y </b:loop> es lo que muestra las etiquetas y generalmente aparece en el pie de página de cada post. Lo que debemos hacer es agregar en el lugar indicado, el siguiente código:

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

Donde max-results=10 es la cantidad máxima de posts que se mostrarán y puede modificarse por el valor que más nos guste aunque es conveniente poner un valor bajo para evitar que la página tarde mucho en cargarse. Personalmente, no recomendaría que fueran más de cinco.

Hasta aquí lo que estamos haciendo es decirle que, si estamos en una página individual, se ejecute el script. Por el momento, no veremos resultados de ninguna clase así que nuevamente guardamos la plantilla.

Lo más sencillo sería mostrar todo en un elemento HTML que agregaremos a la sidebar. Le ponemos un título, por ejemplo POSTS RELACIONADOS y escribimos el siguiente código:

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Pero, eso no es todo, volvemos a la plantilla, expandimos elementos y debemos editar el elemento que acabamos de crear. Como no lo hemos movido, será el primero de la sidebar pero, lo más sencillo es buscarlo utilizando el título; en este ejemplo, veremos algo así:

<b:widget id='HTMLXX' locked='false' title='POSTS RELACIONADOS' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:if>
</b:includable>
</b:widget>

Y allí agregamos las dos líneas resaltadas con color.

Ahora sí, todo está listo para probarlo así que guardamos la plantilla por última vez pero, tengamos en cuenta que este hack sólo será visible cuando estemos en una página individual y siempre y cuando haya etiquetas.

Una alternativa sería colocar este elemento debajo de los posts. Sin duda, esa sería la forma perfecta de mostrarlos.

Una vez creado, podemos ir a Elementos de la página, arrastrarlo y moverlo hasta colocarlo debajo del elemento Blog pero, probablemente deberemos personalizarlo para que se adapte a la estética general.

REFERENCIAS:

De todo un Poco en Guate

ACTUALIZACION:
Corregido el problema de la transcripción del código.
También he modificado el script para que en la lista no se muestre el propio post.
Gracias Solrac, excelente.