JMiur [E]

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;
}

20 comentarios:

Graciela de Palomas  

Queda genial, gracias :D

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

hola J.Miur: Como siempre molestándote.Lo he implementado tal como lo has puesto y solo he modificado el nombre de mi blog.Seguro que hay que añadir alguna cosa en HEAD pero no sé el qué.Si puedes echarle un vistazo es el primer gaged de la izq. Pero no sale nada.Muchas gracias y disculpa todo el trabajo que te doy

JMiur  

Vuelve a copair el script del post porquesalió publicado con un error de sintaxis.

Localiza Recursos Sociales en el Municipio de Oviedo  

Muchísimas gracias J.Miur: Eres mi genio favorito.Por cierto "Habemus Papa" y sus ancestros argentinos.
Un saludo

Responder
vjm  

Hola Jmiur!!!! Gracias por tu generosidad con todos. Tenía una duda que para tí es fácil, en el gadget etiquetas, me gustaría que visualmente apareciera una línea divisoria entre cada etiqueta para que apareciera más claro. Cómo puedo hacerla?

Gracias. vjm

Responder
vjm  

Hola Jmiur, gracias de ante mano!!! Nos gustaría que visualmente en el gadget ETIQUETAS apareciera una líena de separación entre cada etiqueta, para que se viera más claro, pues aparecen muy juntas en nuestro blog.

Gracias por todo!!!!!

JMiur  

Tendría que ver tu blog para poder responderte.

vjm  

Tienes razón, aquí te paso la dirección http://voluntariadojm.blogspot.com.es/

Creo que con poner las rayas que separan las entradas más fuertes nos vendría bien

Gracias

JMiur  

Empieza con algo así; agregando esta regla al CSS:

#Label1 li {
border-bottom: 1px solid #FFFFFF;
}

define el color o tip ode borde a gusto. Eventualmente, si quieres separa el bor, esta propiedad, con el valor que quieras:

padding: 5px 0;

vjm  

Gracias JMiur es lo que quería. Debajo de las líneas que separan las etiquetas se ve unos puntos que tenía antes, sabes cómo podemos quitarlos?

Gracias por todo

JMiur  

Aparentemente, las etiquetas LI de la sidebar tienen un borde superior que produce ese efecto punteado ya que antes, casi no se veían. Bastaría que quitaras la propiedad:

.widget ul li, .widget #ArchiveList ul.flat li {
border-top: 1px dashed rgba(128, 128, 128, 0.5);
}

o la sobrescribieras en al nueva de este modo:

#Label1 li {
border-bottom: 3px solid #FF3804;
border-top: none !important;
padding: 5px 0;
}

vjm  

Esto funciona!

MUCHAS GRACIAS!!!!!!

JMiur  

Me alegra que funcionara :-)

Responder
Kazbam  

Aplausos JMiur. Y gracias.

Responder
Graciela de Palomas  

Lo hice, quedó de +10 en el primer intento, cómo no! si está todo realizado por vos, gracias mon amic :D

JMiur  

Quedó perfecto, Graciela :-)

Responder
Obed Calva  

JMiur se pueden mostrar solo 5 comentarios?

JMiur  

Tal como dice el post, cambiando el valor en la variable

var comsA_cantidad = 10; // definimos la cantidad de comentarios a ser mostrados

Responder
NOSOTROS Y LOS BAÑOS (admin)  

Hola Jmiur es posible poner un feed de los ULTIMOS COMENTARIOS de una pagina especifica de un blog, estoy buscando uno como loco y no encuentro, especificamente de esta pagina http://usandbath.blogspot.com.ar/p/el-confesionario.html
Si puedes hacer algo te lo agradeceré.

JMiur  

Fíjate en esta entrada; allí están todos los parámetros disponibles de los feeds de Blogger o por lo menos, todos aquellos que conozco.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR