GADGET CONFIGURABLE DE COMENTARIOS RECIENTES CON AVATAR

Aplicado en la web

Hay diversos sistemas para mostrar los últimos comentarios en nuestro blog. Entre otros, aquí hemos visto el gadget de Blogger (el que viene de serie), una variante usando Feed2JS, los scripts deLeonelHack y AndrewHonors y un último que incluía todo el código para no depender de alojamientos externos.

Este de hoy no difiere mucho de los anteriores, pero desde luego, es el más configurable que he visto y también el más fácil de instalar. Sólo hacen falta tres o cuatro clics para tenerlo instalado en nuestra barra lateral.


El primero sería para acceder a la página deWay2Blogging que es quién lo ofrece.

Una vez allí rellenamos los campos personalizables que en este orden son: título que le queremos dar al widget, la dirección de tu propio blog, el número de comentarios a mostrar, si queremos que se vean los avatares de los autores del comentario, el tamaño del avatar, si lo queremos redondo, si queremos mostrar un "Leer más" o similar, el texto concreto que deseamos para ese "Leer más", una imagen por defecto para cuando no esté disponible el avatar y, por último, esconder/mostrar el agradecido enlace a la página del creador de esta utilidad.

Pinchando en Generate vamos a otra pantalla dónde vemos un nuevo botón para acceder a Blogger y añadir el gadget a nuestro sitio. Pinchamos en él y ya sólo nos falta seleccionar el blog dónde lo queremos poner, el título del artilugio (si no lo hicimos antes) y por último, pulsarAñadir artilugio.

Ya lo tenemos funcionando. Si posteriormente queremos cambiarlo de sitio, sólo tenemos que acceder a Diseño y desde ahí moverlo pinchando en el él y arrastrándolo hasta la sección y posición que queramos.


Si alguien prefiere hacerlo por sí mismo, entonces habría que copiar este código en un gadget tipo HTML/JavaScript, cambiando los valores marcados en verde antes de guardar. Lo más importante es cambiar la dirección del blog que aparece en la última línea:

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 70,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://www.tudiwebs.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Actualización

Al parecer el autor de este código ha tenido problemas con el hosting y tuvo que cambiar de lugar el fichero .js. Sin ese fichero el gadget no funciona, pero la solución es tan sencilla como cambiar la dirección que veis arriba...

http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js

...por la nueva, que es:

http://widgets.way2blogging.org/blogger-widgets/w2b-recent-comments-gravatar.js

No habrá mayor problema, pero si en algún caso excepcional no fuera así, en el enlace a Way2Blogging al principio del post, podréis acceder al generador de código ya actualizado.

Y en cualquier caso, la mejor opción es siempre descargar el fichero y alojarlo bajo nuestro control para evitar problemas de este tipo ;)


Si te ha gustado el articulo no dudes en hacer un click en la publicidad

GRACIAS

Articulos relacionados por categorias