Gadget de entradas más populares (script)

Hace bastante tiempo habíamos visto como incluir en nuestro blog un gadget de "Entradas más populares".

Este gadget aún está funcionando perfectamente, aunque presenta a veces un problema de lentitud excesiva en su carga; esto es porque el gadget usa las Pipes de Yahoo para funcionar, es decir depende de este servicio externo, así que cuando allí hay algún problema el gadget tarda demasiado en cargar e incluso puede no llegar a hacerlo, lo que hace que nuestro blog también se demore en su carga.

En esta entrada veremos como incluir un gadget que muestre las entradas más populares mediante un script, que no dependerá de alojamientos ni sistemas externos para mostrar los resultados ya que lo incluiremos en el mismo gadget directamente.

Podéis verlo funcionando en mi sidebar en "Post más populares".

Podremos hacerlo de dos formas, mostrando el número de comentarios de cada entrada o sin mostrar los comentarios.

Entradas más populares con comentarios.

[1] En nuestro panel desde Diseño, añadimos un nuevo gadget HTML.

[2] Copiamos este código y lo pegamos en el nuevo gadget:

<div id="popular-posts">
<script language="JavaScript">
aBold = true;
numposts=300;
maxshowresult=10;
home_page = "http://elescaparatederosa.blogspot.com/";
</script>
<script type="text/javascript">
//<![CDATA[

var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+"</a> ["+postCommentar[f]+" comentarios]";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>')
//]]>
</script>
</div>

[3] Guardamos los cambios.


Entradas más populares sin comentarios.

[1] En nuestro panel desde Diseño, añadimos un nuevo gadget HTML.

[2] Copiamos este código y lo pegamos en el nuevo gadget:

<div id="popular-posts">
<script language="JavaScript">
aBold = true;
numposts=300;
maxshowresult=10;
home_page = "http://elescaparatederosa.blogspot.com/";
</script>
<script type="text/javascript">
//<![CDATA[

var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+"</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');

//]]>
</script>
</div>

[3] Guardamos los cambios.


Modificaciones en ambos casos:

aBold = true; Los títulos de entrada estarán en negrita, cambiamos "true" por "false" si queremos que se vean normal.
numposts=300; El número de entradas de donde el script tomará los datos.
maxshowresult=10; Resultados a mostrar en el gadget.
home_page = "http://elescaparatederosa.blogspot.com/"; Cambiar la dirección del blog.

Ambos códigos están incluidos dentro de un div (<div id="popular-posts">)lo que nos permitirá controlar su diseño desde el CSS como hacemos con cualquier lista.

#popular-posts {
/*Aquí los estilos para el contenedor */
}
#popular-posts ul {
/*Aquí los estilos para la lista de los enlaces */
}
#popular-posts li {
/*Aquí los estilos para cada uno de los enlaces de la lista */
}
#popular-posts a {
/*Aquí los estilos para los links */
}
#popular-posts a:hover {
/*Aquí los estilos para los links al paso del ratón */
}