Osdashil: Entradas relacionadas en blogger

Una de las cosas que nos puede ayudar a tener más visitas por página, y ayudar a los visitantes a encontrar páginas parecidas es colocar al final de cada entrada del blog una sección “entradas relacionadas” que muestre enlaces a otras entradas de nuestro blog con contenidos similares automáticamente.
Después de consultar con otras páginas como el escaparate de rosa o oloblogger, que explican algunas alternativas, intentaré explicar lo más detallado posible como insertar el script creado desde vagabundia, como insertar un enlace “entradas relacionadas” en nuestro blog de blogger. El resultado será parecido al que pueden apreciar en mi blog al final de cada post o entrada.

Para hacerlo seguiremos los siguientes pasos:

1. Iremos a la pestaña “Diseño” de nuestro blogger, y seleccionaremos la subpestaña “Edición de HTML”. Una vez hecho esto buscaremos el texto ]]></b:skin>. Para encontrarlo más rápido es recomendable usar la opción buscar de nuestro navegador.
2. A continuación del código buscado pegamos el siguiente código. No será importante si ya hemos copiado otros scripts como el de mostrar últimos comentarios previamente.

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

3. A continuación guardamos la plantilla, y posteriormente marcamos la opción “expandir plantilla de artilugios”, y ahora buscamos el siguiente código:

1	<b:if cond='data:post.labels'>

4. Una vez hecho esto, justo ANTES de la etiqueta </b:loop> que hay un poco más abajo, insertamos 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>

5. Una vez hecho esto, que ya casi estamos, volvemos a buscar en la plantilla el siguiente código:

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

o este otro (según el tipo de plantilla aparecerá uno u otro.):

1	<div class='post-footer-line post-footer-line-3'/>

6. Justo a continuación añadimos para acabar las siguientes líneas, que serán las que escribirán los enlaces relacionados por pantalla.

<b:if cond='data:blog.pageType == "item"'>
<p>Entradas relacionadas:

<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</p>
</b:if>

Una vez hecho esto, el resultado será muy similar al mostrado en mi blog. También me gustaría comentar que el script busca post de la misma categoría que el que hay simplemente, en conclusión es muy importante para que esta opción resulte útil usar correctamente las categorías.

Busqueda

Busqueda Personalizada

lunes, 19 de abril de 2010

Entradas relacionadas en blogger

No hay comentarios:

Publicar un comentario