![](http://1.bp.blogspot.com/-fOOsPTyr90U/UT-H0XwUrJI/AAAAAAAAWNg/uvnK78NC3l8/s00/comentarios.jpg)
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) + " …"; } // 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>
<ul id="ultimosComentariosAvatar">
<script src="http://nombreblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments_avatar"></script>
</ul>
#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:
Queda genial, gracias :D
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
Vuelve a copair el script del post porquesalió publicado con un error de sintaxis.
Muchísimas gracias J.Miur: Eres mi genio favorito.Por cierto "Habemus Papa" y sus ancestros argentinos.
Un saludo
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
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!!!!!
Tendría que ver tu blog para poder responderte.
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
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;
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
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;
}
Esto funciona!
MUCHAS GRACIAS!!!!!!
Me alegra que funcionara :-)
Aplausos JMiur. Y gracias.
Lo hice, quedó de +10 en el primer intento, cómo no! si está todo realizado por vos, gracias mon amic :D
Quedó perfecto, Graciela :-)
JMiur se pueden mostrar solo 5 comentarios?
Tal como dice el post, cambiando el valor en la variable
var comsA_cantidad = 10; // definimos la cantidad de comentarios a ser mostrados
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é.
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.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...