miércoles, 9 de marzo de 2011

Ultimos comentarios y Json (lo mismo de siempre)

Esto no es nada nuevo, simplemente es una adaptación y simplificación del script que permite mostrar los últimos comentarios en la sidebar del blog.

Es una adaptación para que quien siga las entradas donde se habla de Json y su uso en Blogger no se haga lio (yo mismo) y una simplificación ya que varias de las las opciones como la fecha y el título de la entrada no suelen usarse habitualmente así que de nada sirve tener esa parte del código.

Como siempre, el script con la función va antes de </head>:
<script type='text/javascript'>
//<![CDATA[

var comsmaxamostrar = 10; // definimos la cantidad de comentarios a ser leidos
var comslongitud = 60; // definimos la longitud máxima de esos comentarios

function showrecentcomments(json) {
var entry, comulr, comcontent, salida;

// el bucle que leerá los comentarios
for (var i=0;i<comsmaxamostrar;i++) {
// leo y guardo el dato
entry = json.feed.entry[i];
// si no hay suficientes, termino
if (i==json.feed.entry.length)break;

// busco la dirección URL de comentarios
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
comulr=entry.link[k].href;
break;
}
}

// busco el comentario en si mismo
if ("content" in entry){
comcontent = entry.content.$t;
} else if("summary" in entry) {
comcontent = entry.summary.$t;
} else {
comcontent = "";
}
// lo transformo en texto puro y si es necesario, lo corto para que no supere el largo máximo
var re=/<\S[^>]*>/g;
comcontent=comcontent.replace(re,"");
if (comcontent.length>comslongitud) {
comcontent = comcontent.substring(0,comslongitud) + " …";
}

// ya tengo todos los datos así que armo el HTML a mostrar que puede ser cualquier cosa
salida = "<li>";
salida += "<span>" + entry.author[0].name.$t + "</span>";
salida += "<a target='_blank' rel='nofollow' href='" + comulr + "'>" + comcontent +"</a>";
salida += "</li>";

// lo escribo
document.write(salida );

}
}

//]]>
</script>
Y lo utilizo, agregando un elemento HTML donde simplemente coloco esto:
<ul id="ultimos-comentarios">
<script src="http://nombreblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>
En este caso, todo está dentro de una lista así que podemos personalizarla con CSS:
ul#ultimos-comentarios { /* es el rectángulo contenedor */ }
ul#ultimos-comentarios li { /* cada item de la lista */ }
ul#ultimos-comentarios li span { /* el nombre del autor */ }
ul#ultimos-comentarios li a { /* el contendio es un enlace al comentario en si mismo */ }

No hay comentarios:

Publicar un comentario