Mostrando los posts más "populares"

Tanto en el Escaparate de Rosa como en La Bloguería nos presentan un nuevo widget publicado en Blogger Buster que muestra una lista con las 10 entradas "más populares" de nuestro sitio.

Ese ranking de "popularidad" está basado exclusivamente en la cantidad de comentarios que tenga cada entrada, utiliza un Yahoo Pipes y analiza los últimos 5000 comentarios .

Lo instalamos fácilmente desde la misma página de Blogger Buster, escribiendo la dirección de nuestro blog, haciendo click en Customize y luego en Add to Blog.

Lo que hace el widget es insertar un script y, si queremos personalizarlo, deberemos modificar el código.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: uppercase;">');
var i;
for (i = 0; i < obj.count ; i++) {
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json
&_callback=pipeCallback
&_id=1cf38ae68efbe859c4ba1ee239cec099
&url=http%3A%2F%2FnombreBLOG.blogspot.com
&num=10" 
type="text/javascript">
</script>

<span style="font-size: 80%">
Widget by <a href="http://www.bloggerbuster.com">Blogger Buster</a>
</span>

Lo que se muestra, es una lista ordenada, es decir, numerada:

<ol style="text-transform: uppercase;">

Si no queremos que aparezcan los números, cambiamos OL por UL, tanto en la etiqueta de apertura como en la etiqueta de cierre.

Los textos se muestran en mayúsculas pero el estilo lo podemos personalizar facilmente estableciendo una clase CSS. Por ejemplo:

ol.listaPopulares { /* el bloque completo del widget */
background-color: #000000;
border:2px ridge  #555555;
list-style-type: decimal;
margin: 0 auto;
padding: 10px 50px;
text-transform: capitalize;
width: 350px;
}
ol.listaPopulares li { /* cada uno de los items de la lista */
color: #FF8877;
font-size: 16px;
}

ol.listaPopulares li a { /* los enlaces */
color: #FF8877 !important;
font-weight: normal !important;
}
ol.listaPopulares li a:hover {
text-decoration: none !important;
}

Y modificando el script:

<ol class="listaPopulares">

La otra posibilidad que existe es utilizar algnos de los servicios de FeedJIT, un sitio que inicialmente nos permitía mostrar el tráfico del blog pero que, lentamente, ha ido incorporando otras herramientas.

Una de ellas es la llamada Live Page Popularity que nos muestra las páginas más populares de un sitio analizando el tráfico y no los comentarios. Lo que hace es chequear la cantidad de visitantes y actualizar constantemente los datos.

Para instalarlo, sólo hay que seguir las instrucciones y no necesitamos registrarnos.

También podríamos copiar y pegar el código directamente ya que es un script muy sencillo:

<script src="http://feedjit.com/popPages/?bc=FFFFFF
&tc=494949
&brd1=336699
&lnk=494949
&hc=336699
&ww=160" 
type="text/javascript">
</script>
<noscript>
<a href="http://feedjit.com/">Feedjit Live Blog Stats</a>
</noscript>

Por supuesto, para que funcione se requiere tiempo hasta que los datos se acumulen.

También en este caso podemos personalizar la salida aunque es un poco más complejo; los elementos son los siguientes:

#FJ_PPCDiv es el bloque general
#FJ_PPC es la tabla exterior
#FJ_PP es la tabla interior, la que contiene los textos
#FJ_PPC #FJ_PP td es cada una de las celdas de esa celda
#FJ_PPC #FJ_PP .FJ_Heading es el texto del encabezado (Popular Pages Today)
#FJ_PPC #FJ_PP .FJ_Line los textos de cada una de las líneas y sus enlaces
#FJ_PPC #FJ_PP .FJ_TrafFoot es el texto del pie de página (Click to get FEEDJIT)