Script para articulos relacionados

Hace poco hemos añadido la función de poder ver otros artículos relacionados dentro de los mismos. De manera que el lector que se pase por nuestro blog interesado por algún artículo en especial, a su vez tenga la oportunidad de ver de manera intuitiva y directa otros post que guarden alguna relación. Con esta opción queríamos facilitar la navegación por el sitio al usuario y dar una mejor disposición si cabe, de la información que hay en este blog.

Si queréis implementar esta opción en vuestra bitácora, siguiendo estos pasos podréis llevarlo a cabo de una manera sencilla, o por lo menos lo intentaremos, :D.

En primer lugar haced una copia del contenido de la plantilla por seguridad.

Lo siguiente, estando en la sección Edición HTML de la pestana Diseño, buscamos la etiqueta </head> con el acceso directo Ctrl + F. Antes del "tag" añadimos este trozo de código en JavaScript:<script type='text/javascript'><br />//<![CDATA[<br />var relatedTitles = new Array();<br />var relatedTitlesNum = 0;<br />var relatedUrls = new Array();<br />function related_results_labels(json) {<br />for (var i = 0; i < json.feed.entry.length; i++) {<br />var entry = json.feed.entry[i];<br />relatedTitles[relatedTitlesNum] = entry.title.$t;<br />for (var k = 0; k < entry.link.length; k++) {<br />if (entry.link[k].rel == 'alternate') {<br />relatedUrls[relatedTitlesNum] = entry.link[k].href;<br />relatedTitlesNum++;<br />break;<br />}}}}<br />function removeRelatedDuplicates() {<br />var tmp = new Array(0);<br />var tmp2 = new Array(0);<br />for(var i = 0; i < relatedUrls.length; i++) {<br />if(!contains(tmp, relatedUrls[i])) {<br />tmp.length += 1;<br />tmp[tmp.length - 1] = relatedUrls[i];<br />tmp2.length += 1;<br />tmp2[tmp2.length - 1] = relatedTitles[i];<br />}}<br />relatedTitles = tmp2;<br />relatedUrls = tmp;<br />}<br />function contains(a, e) {<br />for(var j = 0; j < a.length; j++) if (a[j]==e) return true;<br />return false;<br />}<br />function printRelatedLabels() {<br />var r = Math.floor((relatedTitles.length - 1) * Math.random());<br />var i = 0;<br />document.write('<ul>');<br />while (i < relatedTitles.length && i < 8) {<br />document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');<br />if (r < relatedTitles.length - 1) {<br />r++;<br />} else {<br />r = 0;<br />}<br />i++;<br />}<br />document.write('</ul>');<br />}<br />//]]><br /></script>Guardamos los cambios y marcamos la opción de Expandir plantillas de artilugios y volvemos a buscar pero esta vez el condicional <b:if cond='data:post.labels'> que probablemente este en alguna de las sentencias asignadas como "post-footer-line post-footer-line-1, -2, o -3". Una vez localizado, entre <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> y </b:loop> agregamos el siguiente código:
<b:if cond='data:blog.pageType == &quot;item&quot;'><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/><br /></b:if>Por último solo nos queda agregar donde queremos mostrar los post relacionados, para ello guardar los cambios y dirigíos a Elementos de la página, agregar un elemento HTML/Javascript e incluid el siguiente código:
<script type='text/javascript'><br />removeRelatedDuplicates();<br />printRelatedLabels();<br /></script>A este "widget" hay que hacerle una pequeña modificación y es para que no salga el titulo en la página principal dado que este script solo se carga en las paginas individuales. Para ello volvemos a Edición HTML con la opción marcada de Expandir plantillas de artilugios, buscamos el nombre del "widget" que acabamos de incluir. Lo modificamos para que quede la siguiente forma:
<b:widget id='HTML2' locked='false' title='Artículos relacionados' type='HTML'><br /><b:includable id='main'><br /><b:if cond='data:blog.pageType == "item"'><br /><b:if cond='data:title != ""'><br /><h2 class='title'><data:title/></h2><br /></b:if><br /><div class='widget-content'><br /><data:content/><br /></div><br /><b:include name='quickedit'/><br /></b:if><br /></b:includable><br /></b:widget>Con todo, ya está listo para que en las entradas individuales se nos muestren los artículos relacionados, si queréis modificar el número de post que se muestren, hay dos variables a configurar que yo las he puesto en 8. Una es relatedTitles.length && i < 8 en el primer trozo de código y la otra es max-results=8 en el siguiente.

Si tenéis algún problema en el proceso comentadlo para ayudaros. ;)