Ultimos comentarios con avatares

Una variante para mostrar los últimos comentarios nos permitiría agregar la imagen con el avatar de cada comentarista.

Siguiendo el mismo criterio del script que se muestra en esta entrada y que no no hace otra cosa que leer los feeds utilizando Json, nos encontramos con que Blogger nos envía un dato que identifica al autor: entry.author y, un dato que es un array que leemos mediante entry.author[0]

Allí, se guardan cuatro valores:

entry.author[0].email.$t no nos sirve para nada ya que siempre dice "noreply@blogger.com"
entry.author[0].name.$t es el nombre del comentarista
entry.author[0].uri.$t es la dirección url del perfil
entry.author[0].gd$image son los datos de la imagen que se estableció en el perfil de Blogger

Esta última tiene un dato que es el importante:

entry.author[0].gd$image.src es la dirección url de la imagen agregada al perfil

y otros que no tienen uso práctico:

entry.author[0].gd$image.rel
entry.author[0].gd$image.width
entry.author[0].gd$image.height

Esto, quiere decir que podemos acceder a esa imagen y mostrarla siempre que exista aunque hay una serie de detalles a tener en cuenta.

Primero, el tamaño de la imagen. Lo que allí se guarda es la imagen original que hayamos utilizado y puede tener diversos tamaños (hay algunas enormes) por lo tanto, deberíamos tratar de usar una miniatura y así, agilizar la carga. Si la imagen está alojada en Blogger como la mayoría de ellas, esto se resuelve con cierta facilidad cambiando la url ya que el servicio nos provee de miniaturas diversas; si la imagen ha sido alojada en otro servidor, no tenemos otro remedio que cargar la original y re-dimensionarla con CSS.

El segundo problema lo generan los perfiles que no tienen una imagen o estas no son accesibles; en ese caso, también usaremos CSS para colocar una por defecto.

El script sería algo así y debería estar agregado antes de </head>:

<script type='text/javascript'>//<![CDATA[

var comsA_cantidad = 10; // definimos la cantidad de comentarios a ser mostrados
var comsA_longitud = 60; // definimos la longitud máxima de esos comentarios
var comsA_dimension = "/s16-c/"; // y establecemos el tamaño de esos avatares (en este caso 16x16)

var comsA_pattern1 = /\/s\d*\//;
var comsA_pattern2 = /\/s\d*-c\//;

function showrecentcomments_avatar(json) {
  var entry, comulr, comcontent, comavatar, profile_img, elancho, salida;

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

    // 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>comsA_longitud) {
      comcontent = comcontent.substring(0,comsA_longitud) + " &#133;";
    }

    // esta es la parte nueva, que define la imagen del avatar a utilizar
    var profile_img = entry.author[0].gd$image.src; // la imagen del perfil de Blogger

    // hay algunas imágenes alojadas en googleusercontent.com que no tienen el protocolo http asi que se lo agregamos
    if (!/^http:/.test(profile_img)) {
      profile_img = "http:" + profile_img;
    }

    // buscamos /sxxx/ o /sxxx-c/ en la url de la imagen que indica su tamaño
    elancho = profile_img.match(comsA_pattern1) || profile_img.match(comsA_pattern2);
    // y si encontramos eso, lo cambiamos por /s16-c/ que es lo que definí previamente
    comavatar = profile_img.replace(elancho, comsA_dimension);

    // listo, como ya tengo todos los datos, armo el HTML a mostrar
    salida = "<li>";
    salida += "<img src='"+comavatar+"' />";
    salida +=  "<span>" + entry.author[0].name.$t + "</span>";
    salida +=  "<a target='_blank' rel='nofollow' href='" + comulr + "'>" + comcontent +"</a>";
    salida +=  "</li>";

    // y finalmente, lo escribo
    document.write(salida );
  }
}

//]]>
</script>

¿Cómo uso esto? Agrego un elemento HTML donde quiera mostrarlo (la sidebar, por ejemplo) y allí, coloco la lista y la función donde sólo debo establecer la url de mi blog:

<ul id="ultimosComentariosAvatar">
  <script src="http://nombreblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments_avatar"></script>
</ul>

El resto es cosa de CSS:

#ultimosComentariosAvatar { /* este el rectángulo contenedor (la etiqueta UL) */
    list-style-type:none;
}
#ultimosComentariosAvatar li { /* cada item de la lista */
    /* voy a usar una imagen por defecto como fondo por si el perfil no tiene una */
    background: transparent url(http://img2.blogblog.com/img/b16-rounded.gif) no-repeat left 5px;
    border-bottom: 1px dotted #234;
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 0 5px 20px;
    position: relative;
}
#ultimosComentariosAvatar li span { /* el nombre del autor */
    color: #BCD;
    font-weight: bold;
    padding-left: 5px;
}
#ultimosComentariosAvatar li:hover {background-color: #171E27;}

/* el contendio es un enlace al comentario en si mismo */ 
#ultimosComentariosAvatar a, #ultimosComentariosAvatar a:link, #ultimosComentariosAvatar a:visited {
    color: #BBB;
    display: block;
    font-weight: normal;
    padding-left: 5px;
}

/* la imagen la posiciono para tapar el fondo por defecto y la fuerzo a dimensionarse */ 
#ultimosComentariosAvatar li img {
    height: 16px;
    left: 0;
    position: absolute;
    top: 5px;
    width: 16px;
}