Últimos comentarios con avatar a mi manera. Más sencillo es imposible

Sencillo y liviano script en puro js (no dependiente de librerías como jQuery ) para mostrar los últimos comentarios realizados en el blog. Configurable el tamaño del avatar para cargarla con el tamaño exacto (no se redimensiona) bajo el protocolo HTTPS así como el número y extensión de cada comentario.

Últimos comentarios con avatar a mi manera. Más sencillo es imposible

Por Kseso ✎ 14
Últimos comentarios con imagen a mi manera. Más sencillo es imposible

El motivo de este artículo es símplemente compartir con vosotros la forma en que muestro los últimos comentarios realizados en el blog.

Se de sobra que hay cienes y cienes de ejemplos publicados rondando por la red. Si me decido a traerlo aquí es porque creo que el script que yo utilizo tiene algunas pequeñas ventajas frente a otros. Que no digo que sea mejor o peor. Símplemente tiene algunas particularidades:

  • Está realizado en javascript puro. No depende de ninguna librería. Nada de jQuery o similares.
  • El script apenas si son 30 líneas. Incluidas las opciones de configuración. Y si quieres puedes reducirlo aún más.
  • El tamaño de las imágenes o avatares de los comentaristas es configurable: las imágenes se cargan al tamaño necesario. Ni más ni menos. Y por lo tanto no es necesario ajustarlas ni vía CSS ni vía HTML.
  • Lo avatares se cargan con protocolo seguro HTTPS: así si ya lo estás usando en tu blog no causarán ni errores ni advertencias por este detalle.
  • La longitud del texto del comentario también es a voluntad del autor del blog.
  • La llamada al feed de los comentarios se realiza de forma asíncrona.
  • Entre otras.
Todos conocéis mi ignorancia en js. El script es fruto de combinar y modificar para adaptar a mis necesidades otros que rondan por la web. Lamentablemente a estas alturas es imposible saber autorías.

El script

El script que realiza todo el trabajo, limpio de polvo y paja (sin comentario alguno) es el siguiente.

<script> //<![CDATA[ function showRecentComments_avatar(m){ var nuevosComents=document.querySelector('.coments_ava'); var comsA_cantidad= 10; var comsA_longitud= 90; var comsA_dimension= "/s75-c/"; var comsA_pattern1=/\/s\d*\//; var comsA_pattern2=/\/s\d*-c\//; var h,a,g,j,b,d; var f=''; for(var e=0;e<comsA_cantidad;e++){ h=m.feed.entry[e]; if(e==m.feed.entry.length){break} for(var c=0;c<h.link.length;c++){ if(h.link[c].rel=="alternate"){a=h.link[c].href;break} } if("content" in h){g=h.content.$t} else{if("summary" in h){g=h.summary.$t} else{g=""}} var l=/<\S[^>]*>/g; g=g.replace(l,""); if(g.length>comsA_longitud){g=g.substring(0,comsA_longitud)+'…'} var b=h.author[0].gd$image.src; if(!/^http:/.test(b)){b='http:'+b} d=b.match(comsA_pattern1)||b.match(comsA_pattern2); j=b.replace(d,comsA_dimension); t=j.replace('http:','https:'); var autorWid = '<li><a href="https://escss.blogspot.com"><span class="coment_text">por @Kseso en EsCss Blog</span></a></li>'; f+='<li><a title="Ver comentario de '+h.author[0].name.$t+'" rel="nofollow" href="'+a+'">' + '<img src="'+t+'" alt="avatar de '+h.author[0].name.$t+'" />' + '<span class="coment_autor">'+h.author[0].name.$t+'</span>' + '<span class="coment_text">'+g+'</span></a></li>'; nuevosComents.innerHTML= f + autorWid; } }; //]]> </script> <script async='async' src='https://escss.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showRecentComments_avatar' type='text/javascript'/>

Configuración

Vamos con las opciones configurables. Yo en mi caso los muestro en una lista <ul> que para aplicar estilos e insertar en ella los comentarios la identifico por la clase <class='coments_ava'

  1. var nuevosComents=document.querySelector('.coments_ava');
    cambia el valor ('.coments_ava') si por alguna razón interfiere con tu plantilla. Tiene que ser el mismo que el de la lista donde insertes los comentarios.
  2. var comsA_cantidad=10;
    El número de comentarios a mostrar.
  3. var comsA_longitud=90;
    La extensión del texto del comentario indicado en caracteres.
  4. var comsA_dimension="/s75-c/";
    Esta variable fija el tamaño del avatar. Para ello se sirve de la forma que tiene Google de gestionar las imágenes. El tamaño está indicado por la cifra (75). Sustitúyelo según tus necesidades manteniendo el resto de caracteres (s -c)
  5. var autorWid =
    Esta es una pequeña frivolidad para la demo. Genera el último ítem de la lista donde se muestra la autoría. Completa libertad para borrarla. Si lo haces borra también el código + autorWid de la última línea.
  6. El la src='' del segundo script ya sabes. Cambia el nombre del blog escss por el tuyo.

La demo en acción

Para verificar su correcto funcionamiento, para que trastees todo lo que quieras sin miedo a romper nada, para añadirle algunos estilos y porque es mejor que copies los códigos del pen a continuación puedes verlo funcionando:

See the Pen MKxrbE by Kseso (@Kseso) on CodePen.

Forma de uso o inclusión

Básicamente don son las formas de incluir esta funcionalidad en el blog. O bien como gadget a través del modo diseño o directamente editando el HTML del blog.

Gadget en modo diseño

Sólo tienes que añadir un gadget HTML/javascript allí donde quieras mostrar los últimos comentarios del blog. Le asignas un título si quieres e incluyes en él una lista con la clase indicada en la primera opción de configuración <ul class='coments_ava'></ul> y a continuación los 2 scripts y los estilos que necesites en un elemento <style>.

inclusión mediante gadget
inclusión mediante gadget

Editando el código de la plantilla

Yo soy de los odio los gadgets así que prefiero editar directamente el HTML de la plantilla. Esto facilita incluir el código mínimo necesario utilizando condicionales si fuera preciso.

Para ello sólo tienes que añadir la lista <ul class='coments_ava'></ul> allí donde quieras mostrar los comentarios. Si quieres añadirle un título sólo tienes que teclearlo antes de ella con su marcado correspondiente.

Y los scripts puedes y es conveniente que los añadas al final del body para facilitar la carga del resto del contenido sin interferir con él. Además de ya estar haciendolo de forma asíncrona async='async'

Como mencionaba tanto la lista (y el título que la preceda) así como los script y estilos asociados puedes incluirlos dentro de condicionales si fuese necesario.

Eso sí, déjame terminar recordándote que hagas copia de la plantilla antes de comenzar a modificar nada. Sabido y obligado, pero por si acaso.

Siéntete libre de usar, modificar, destrozar, añadir o quitar todo lo que se te ocurra de él. La licencia Beerware del blog (para las ideas y código) te permite todo eso y mucho más.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 14

  1. Decidí coger ese código y ordenarlo un poco. Además añadí un par de detalles. Cuando se añaden los puntos suspensivos, si queda un espacio entre estos y la última palabra, ese espacio se elimina. También hice que se pudiese configurar de una forma un poco más sencilla.

    https://gist.github.com/abalozz/ec7b80964baf8e91bc27

    ResponderEliminar
    Respuestas
    1. Gracias por tu aporte, Iván

      Estuve haciendo una prueba rápida en codepen y (no se si por hacer algo mal yo o por algún detalle del script) la cantidad de comentarios mostradas siempre es la misma e independiente de la configuración.

      En concreto 25, que creo es el número máximo que puede pillar (al menos el feed de mi blog)

      Aquí el pen embutido:
      [pen]data-height="342" data-theme-id="299" data-slug-hash="RrOPZK" data-default-tab="result" data-user="Kseso" data-preview="true" class='codepen'[/pen]

      Un saludo

      Eliminar
    2. Ups, cometí una pequeña errata en un if. Ya lo corregí en el Gist :)

      Eliminar
  2. ...No consigo verlo, me interesa la idea de presentar de una manera liviana los comentarios o las noticias de mi blog...pero debo estar haciendo algo mal..porque no veo ni el ejemplo....

    http://www.osado.com/aplicaciones/mesa_trabajo/comentarios.html

    En codpen lo veo..pero intento extraerlo a mi espacio..y no lo veo..siendo el mismo código...

    ResponderEliminar
    Respuestas
    1. Creo Manolo que el posible fallo está en el src del segundo script, el que hace la llamada al feed.

      En el pen del ejemplo copié y pegué la sintaxis que uso en el blog. Y Blogger es un puñetero en lo que se refiere al uso de ciertos caracteres como las comillas anidadas y... el signo '&' entre otros.

      Si te fijas la ruta termina con &callback=showLabajos'
      Prueba a sustituir la entity & por su carácter &callback=showLabajos'

      Pero este escript aprovecha algunas particularidades de Blogger (y los servicios de Google asociados a él como el alojamiento de los avatares).
      Y tu web veo que un WP.
      Nunca lo he testado con ese CMS.

      Un saludo

      Eliminar
    2. Parece ser que era un comilla de más ahora ya se puede ver

      http://www.osado.com/aplicaciones/mesa_trabajo/comentarios.html

      Seguiré probando para adaptarlo. Gracias por la información

      Eliminar
  3. Buenos días:¡¡¡Maravillosa!!!Aunque muy técnica para quienes desconocemos el tema.Me ha encantado esta entrada pero desconozco que hay que poner dentro de ('.coments_ava') .¿Sería tan amable de facilitarme si no es mucha molestia el código del gadget y así poder implementarlo en el blog,simplemente cambiando el nombre?Muchísimas gracias por brindarnos este lujo de blog.

    ResponderEliminar
    Respuestas
    1. Gracias Grupo Caminamos

      Ya siento que lo encuentres muy técnica pese a lo detallado tanto del apartado "configuración" como de la forma en que incluirlo en la plantilla.
      Sólo tenéis que seguir los pasos indicados en la sección Forma de uso o inclusión -> Gadget en modo diseño
      En vuestro caso he visto que tenéis el widget id="HTML8" con el título "Han opinado" que creo es donde queréis mostrar los últimos comentarios.

      Sin que sirva de precedente os he creado este documento en dorpbox

      Sólo tenéis que editar vuestro widget y copiar en él el contenido de ese doc.
      He añadido unos estilos para que os sirvan de orientación. Pero ya es vuestra tarea modificarlos a vuestro gusto ;-)
      Lo miso que la configuración de las opciones del script (tamaño de imagen, longitud del comentario...).

      Creo que con esto os será relativamente sencillo adaptar todo a vuestras necesidades.

      Un saludo.

      P.D.: daros prisa en usar el doc de dropbox porque su existencia es temporal ;-)

      Eliminar
    2. ¡Gracias,gracias y gracias! Por la pronta respuesta y por el detallazo de adjuntar el archivo.Ya está implementado y queda fantástico,me queda pendiente modificarlo, eso sí que es sencillo de hacer.Seguiré entrando en esta ¡maravillosa página! para ir aprendiendo.
      Muchísimas gracias de nuevo

      Eliminar
    3. Me alegra saberlo, Grupo Caminamos.

      Un saludo.

      Eliminar
  4. Muchas gracias me encanta, ya lo he puesto en mi blog.

    Me podrias decir como editar para separar el avatar o nombre del comentario, ejemplo poner un espacio o un guión. es que sale todo junto sin espacio y queda un poco feo.

    Gracias una vez mas.
    http://nenalandia-tv.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Yo lo haría vía CSS, Nena., que por algo cada parte tiene su marcado html.
      Bueno, es más, de hecho así lo hago en este blog ;-)
      En tu caso, bastaría con añadir las siguientes reglas en tu <style> correspondiente:

      [code]
      .coments_ava img {
      float: left;
      margin-right: 6px;
      }
      .coment_autor::after {
      content: ":";
      margin-right: 6px;
      }
      [/code]

      Un saludo

      Eliminar
    2. Disculpa mi ignorancia en este tema, no tengo ni idea de scripts, solo he pegado el codigo y cambiado la url de mi blog.

      Pero ahora no se donde meter esto que me dices, ¿seria pegarlo al final?

      Gracias por la ayuda.

      Eliminar
    3. Son estilos, Nena.
      Has de incluirlo dentro de algún elemento <style> que apliquen a las diferentes páginas (índex, post...) donde muestres el "últimos comentarios".
      Posiblemente estén en el head del blog.

      Un saludo y suerte.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap