Posts relacionados en Blogger

Una pregunta frecuente es como conseguir mostrar una lista con artí­culos relacionados al post que estamos leyendo, de la misma manera que hacen varios plugins para WordPress, en Blogger.

Buscando un poco he encontrado una solución, la cual voy a explicar y que funciona bien. Este sistema se basa en las etiquetas del blog para mostrar artí­culos cuyas etiquetas coinciden, por lo que es necesario que las utilices en tus posts, sino, no se mostrará nada. Por otro lado aunque sólo hay que copiar y pegar conviene ser cuidadoso para que todo salga perfecto.

En primer lugar, como siempre, realiza una copia de seguridad de tu plantilla.

¿Ya?, muy bien. Pues empezamos añadiendo el código que hace el 80% de la magia. Para ello tienes que ir en el panel de control de tu blog a Plantilla -> Edición HTML.

Entre las etiquetas head, o más sencillo, justo antes de la etiqueta </head>, copias y pegas lo siguiente:


<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;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Puedes guardar la plantilla para no perder ese cambio y ahora marcas “Expandir plantillas de artilugios”. Busca el siguiente trozo 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>
</b:loop>
</b:if>

y sustitúyelo por el siguiente:


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

Bueno, ya queda menos. Guarda la plantilla y vete a Plantilla -> Elementos de página

Tienes que añadir un nuevo widget que será el bloque que muestre los artí­culos. Para ello pinchas en “Añadir un elemento de página” y seleccionas HTML/Javascript.

Como tí­tulo puedes poner relacionados y en el contenido añades lo siguiente:


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

Relacionados Blogger

El nuevo artilugio lo puedes colocar donde quieras, yo a modo de ejemplo lo he situado en la barra lateral. Cuando accedes a una entrada invidual se muestran los artí­culos relacionados y cuando estás en la página inicial el bloque desaparece.

Queda un pequeño punto todaví­a. Debes ir de nuevo a Plantilla -> Edición HTML y buscar el siguiente bloque, que es el nuevo artilugio o widget que has añadido:


<b:widget id='HTML13' locked='false' title='Relacionados' type='HTML'><b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'> <-Añade esta lí­nea
<!-- 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> <-y ésta
</b:includable></b:widget>

Simplemente debes añadir las lí­neas que están señaladas.

Ya está, hay ciertos valores que puedes modificar para mostrar más o menos posts relacionados. En el primer bloque de código el i<20 y en el tercer bloque de código el max-results=10.

About the author

Dimas

View all posts

24 Comments

  • wow!!!, como siempre tienen excelentes posts, este me ha sido muy útil. Ya que andamos con eso de los trucos para blogger, saben de alguno que funciones para poder enviar trackbacks???

    un saludo

  • Hoy mismo lo pongo en practica. A proposito, no te olvides de lo que una vez me prometiste, es decir publicar algo sobre como agregar pestañas en Blogger.
    A proposito de tu nueva imagen, deberias modificar la plantilla por que mientras se escribe un comentario, parte de el no se ve y debes hacer un gran esfuerzo por no equivocarte. Gracias una vez mas por tus magnificos consejos!!
    😉

  • Que guapo !!!
    Ya lo tengo puesto en mi blog :p … aprovecho también para felicitarte por tu blog, lo encontre hace tiempo y desde entonces el lector de feeds me va enseñando tus entradas, por cierto, todas super interesantes. 😉
    Saludos

  • Yo extranjero: lo se, no lo olvido, por cierto con pestañas te refieres a secciones o páginas ¿no? No entiendo el problema de los comentarios

    Me alegro de que os sirva!

    saludos!

  • Vaya, crei que no tendria problemas, con el codigo, pero cuando guardo el 2do trozo de codigo, me devuelve.

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Element type “script” must be followed by either attribute specifications, “>” or “/>”.

    Saludos dimas.

  • Hola! Quiza sea el browser, pero la casilla en la que se escriben los comentarios aparece a mitad y una parte de las palabras se debe escribir a oscuras practicamente. Espero ser mas claro ahora. Gracias! 😉

  • Yo extranjero, si pudieras ser más específico (navegador y sistema operativo que utilizas) bastaría con cargar la página con el navegador que dices y ver qué pasa. Así ayudas a ir acotando el problema.

    – en FF 2.0.0.7 (OSX) se ve.
    – en Safari (OSX) se ve igual que en el anterior.
    – en Mozilla 1.7.12 (Linux) se ve igual.

  • uhh gracias lo andaba buscando hace tiempo.
    En la ultima parte me perdi un poco porque no encontraba el codigo… te falto decir que hay que volver a expandir los artilugios ^^
    pero me sirvio bastante :)
    saludos

  • Parece muy bueno. No lo he instalado pero tengo una pregunta, ¿los post relacionados no podrian aparecer en la pagina principal apenas se publica el post pues si el visitante no abre el articulo no ve los realcionados?

  • Lo instale pero los post relacionados me aparecen en la barra lateral y no debajo del post como quisiera o como debería ser. Esto se puede solucionar?

  • Gracias por este truco!!! hace rato que estoy buscando algo asi para poder poner todo en su lugar.
    Muy lindo tu blog 😀

    Saludos desde Argentina!!!

  • Hola quiza puedas ayudarme, al insertar la primera parte me sale esto:
    Mensaje de error de XML: The element type “b:skin” must be terminated by the matching end-tag “”.

    Note que los datos no corresponden a una parte de tu agregado,sino a una parte anterior que dice:

    <![CDATA[/*

    Despues de esto tengo incluidas una metatags, que si la necesitas te la paso, y lo que vi que me falta al terminar eso es es raro, seguramente lo borre en algun retoque anterior, ya lo inclui.

    Muchas gracias, son muy utiles tus consejos, Romina.

  • Hola..tengo una pregunta…no se porque motivo,mi barra que estaba al lado desaparecio y quedo ahora abajo de mis entradas. Tambien desaparecio mi editor,en la cual yo podìa disponer de que manera van las ubicaciones de la barra lateral.
    Agradecerè una ayuda urgente
    Gracias

  • Hola, he comprobado que a varios de vosotros os funciona, a mi no, y he revisado una y otra vez pero no encuentro que puede estar mal, lo pongo el la sidebar o debajo del post como ahora y nada de nada, a ver si me puedes ayudar.
    Muchas gracias

  • hola que buen post. yo lo copie tal cual esta aquí y me lo dejo guardar todo bien, pero no funciona en la primera pagina ni en las demás, aparte solo puedo verlo desde la 2da pagina.
    Me puedes ayudar

    Saludos y gracias

  • Hola
    muy bueno el post super bien explicado…aunque igual pasa algo en mi blog, funcionó todo, pero luego al entrar a algún post sale el titulo de los relacionados y no muestra nada, solo el titulo de los post relacionados abajo de la entrada, tiene q ver algo las etiquetas o que?? te invito a q visites el blog por si puedes ayudarme

    gracias!

  • Hola primero queria felicitarte por el blog!!!
    Me podrias ayudar con la implementacion de los articulos relacionados en blogger porq segui tu tutorial paso a paso y no me aparecio ningun error pero al ver la entrada aparece el titulo articulo relacionado pero no muestra ningun articulo.
    Te agradeceria mucho q pudieras ayudar
    Saludos!!!!