Widget de posts relacionados para Blogger (III): Script de enlaces relacionados

En las entradas anteriores a este post, tratábamos el tema de los widgets de contenido relacionado para las entradas de nuestro blog. Primero hablamos del widget de Linkwithin y como modificarlo para cambiar la frase que trae por defecto (ver entrada aquí). Después hablamos de Shareaholic, específicamente de su herramienta de 'Related content' en la cual vimos cómo crear una cuenta, coonfigurar nuestro widget y colocarlo en nuestro blog (ver entrada aquí).
Ahora toca el turno de un Script que mostrará al visitante enlaces de contenido relacionado con nuestro post proporcionado por Bloggertrix. Aunque no es tan llamativo, resulta igual de eficiente que las opciones anteriores por lo que no debemos subestimar su uso especialmente si nuestro blog está muy sobrecargado o si buscamos una opción discreta.

Opción 3: Script de enlaces relacionados
En este caso el script nos mostrará un índice de entradas determinadas agrupadas en un número determinado de etiquetas que el script toma de las colocadas en el blog. El número de entradas y etiquetas es determinado por la cantidad de etiquetas que colocamos en cada entrada y el número de posts que contiene esa etiqueta, aunque también mostrará un número máximo de posts y etiquetas que nosotros determinaremos en el código.
Colocar este widget no es nada complicado, aunque tendremos que jugar con la plantilla de blogger:
1. Primero debemos ir a nuestra plantilla Html (blogger > nuestro blog > plantilla > Editar HTML)
Nota: ¡No olvides guardar la plantilla de tu blog!
2. Haciendo click sobre la plantilla, buscar con Ctrl + F la siguiente etiqueta

<data:post.body/>

Nota: Pulsaremos intro tres veces ya que buscamos la tercera etiqueta. En caso de no encontrar una tercera, será la segunda etiqueta que encontramos.
3. Justo debajo de esta etiqueta pegaremos el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h2>
Related post</h2>
<div id='data2007'/>
<br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 3;
maxNumberOfPostsPerLabel = 5;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}

for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20 br="" k="" label="label.replace(">var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Nota: El widget está programado para mostar un máximo de 5 posts por etiqueta y un máximo de 3 etiquetas. Para modificar esto,modificaremos los valores marcados con rojo y verde en el código de la siguiente forma:

Si queremos modificar el número de posts por etiqueta, cambiaremos el valor de maxNumberOfPostsPerLabel
Si queremos modificar el número de etiquetas, cambiaremos el valor de maxNumberOfLabels

4. Una vez hechos los cambios, basta con guardar la plantilla y habremos terminado.
¿Puedes ver los cambios en tu blog? ¡Felicidades! ya tienes tu widget de contenido relacionado instalado en forma de listas.
Otros posts de la serie:
- Widget de posts relacionados para Blogger (I): Linkwithin
- Widget de posts relacionados para Blogger (II): Shareaholic
- Widget de posts relacionados para Blogger (III): Script de enlaces relacionados
¿Te fue de ayuda este artículo?Si el artículo te agrada puedes suscribirte a La Taberna para recibir las últimas actualizaciones del blog o bien, puedes dar me gusta en Facebook, seguir en Twitter o agregar a tus círculos de Google +. También puedes expresar alguna duda, sugerencia, o comentario a través de la página de contacto o aquí en la misma entrada.