ENTRADAS RELACIONADAS

Añadir una lista de entradas relacionadas a cierto post del blog es muy recomendable ya que permite a los usuarios apollarse en ciertas entradas relacionadas con el tema de la entrada principal. Es muy interesante también ya que es una forma de retener a los lectores ofreciendoles una lista de entradas del mismo tipo de la entrada que el seleccionó.

¿Cómo funciona?

El script que mostraré a continuación se apolla principalmente en el contenido de las etiquetas, por tanto para poder incorporarlo tendréis que tener previamente definidas etiquetas.
Para entenderlo mejor os pongo una imagen para que veáis de lo que hablo. Todo hay que decir que estaréis cansados de utilizarlo provablemente en otros blogs o webs.

Esto lo podeis observar al final de cada entrada de mi blog, si queréis insertarlo en vuestro blog tendréis que seguir los siguientes pasos. Aviso no os asustéis, el código a insertar es algo largo pero muy simple ya que tan solo tendréis que modificar 2 cositas de nada.
Recomendable guardar la plantilla antes de realizar las modificaciones.

Nota:Recordar que podéis buscar coincidencias con ctr+F

Primer paso:(Ubicación del script)

En el caso de blogger nos dirigiremos a Diseño->Edicion de HTML una vez aquí marcaremos la casilla Expandir plantillas de artilugios. A continuación buscaremos ]]></b:skin>
Justamente debajo tendremos que copiar el siguiente código:


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


Segundo paso:(Unas lineas mas)

Llegado este punto ya lo tenemos casi todo, lo único que tendremos que hacer es buscar el siguiente fragmento de código en nuestra plantilla:

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


Justamente debajo tendremos que insertar el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +"?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>


Tercer paso:(Ultimas lineas)

Buscamos ahora la línea de nuestro código que dice:

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


Justamente debajo de esta linea copiaremos el siguiente código:

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


Cuarto paso:(Modificaciones)

• Resultados mostrados: El numero de resultados mostrados lo podremos configurar desde la linea que insertamos que dice así:
  

  if (cuantosPosts == 3)
  

  Este valor 3 se corresponde con el número máximo de entradas relacionadas coincidentes, por tanto este valor lo podremos cambiar por cualquier otro valor que nosotros queramos.
  

• Tamaño del titulo de la entrada: Poniendo un ejemplo lo veréis mejor, por ejemplo una entrada que se llame así: Código de colores, diremos que tiene una longitud de 17 caracteres, (los espacios en blanco también cuentan como caracteres). Sabiendo esto nos dirigiremos a la siguiente línea del código.
  

  relatedTitles.length && i < 20


  El 20 se corresponde con el tamaño máximo de caracteres de una entrada, en el ejemplo que os puse eran 17, podemos modificar este valor dependiendo del tmaño de nuestras entradas, el resultado de la búsqueda dará la lista de entradas con título menor que ese valor.

Guardamos la plantilla y listo, (en vista previa no podemos apreciar los cambios). Os dije que no era complicado, pero lo que no os dije era que es un poquito largo :) espero que os funcione a todos.