Entradas Relacionadas

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Desde que coloqué en El Escaparate el widget para mostrar las entradas relacionadas, son muchos los que se han interesado por la forma de hacerlo.
Antes de nada he de aclarar que es un hack del genial JMiur de Vagabundia, así que como en otras ocasiones, me limito a explicar los pasos a seguir tal como lo hice yo antes con las explicaciones de JMiur.
Quedará como un nuevo elemento del pie de los post y se mostrará solamente en las páginas individuales, no en la principal.

[1] Nos situaremos en la vista HTML de la plantilla, expandiremos los artilugios y buscaremos la etiqueta ]]></b:skin>. Justo debajo, agregaremos el script. Hemos de colocarlo exactamente ahí ya que para que funcione correctamente, debe estar antes que cualquier otro script que hayamos colocado:

<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 == 3) {
break;
}
}
document.write('</ul>');
}

//]]>
</script>

En el código del script, donde dice relatedTitles.length && i < 20), se escogen los posts que se mostrarán según los caracteres que formen su título. En el ejemplo no se mostraran si contienen más de 20 caracteres, pero podemos cambiar ese valor por el que queramos.

[2] Buscamos ahora esta parte del código y añadimos lo que he marcado en negrita:

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

Donde dice max-results=10 es donde podemos controlar la cantidad máxima de posts que se mostrarán, podemos cambiar "10" por el valor que nos interese, aunque según nos recomienda JMiur "es conveniente poner un valor bajo para evitar que la página tarde mucho en cargarse".

[3] Una vez hecho esto, localizamos esta línea de código:

<p class='post-footer-line post-footer-line-3'/>

Normalmente esta parte del post-footer no tiene uso, así que colocaremos nuestro nuevo código justo a continuación:

<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>

Si hay varias etiquetas, es muy probable que la lista mostrada pueda contener muchos posts, por lo que JMiur ha encontrado la solución modificando el script para limitar el número absoluto de posts relacionados. Yo he incluido la modificación en el script para que solo muestre tres entradas relacionadas, si queremos aumentar la cantidad de posts a mostrar, cambiamos el valor en esta línea del script:

if (cuantosPosts == 3) {

[4] Como no se ve en vista previa, mejor nos cercioramos de que antes hemos guardado una copia de la plantilla y, si es así, guardamos cambios.

Más información en: Vagabundia ¡Gracias JMiur!