soy Kseso y esto EsCSS

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

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

·Por Kseso ✎ 20
Ú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.
  • ¡NUEVO!: con imagen de sustitución para los avatares de quienes no tienen y que Blogger les adjudica esa 'B' tan chuchurría.
  • 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 showLabajos(m){ var nuevosComents=document.querySelector('.coments_ava'); var comsA_cantidad=25; var comsA_longitud=80; var imgSust= 'https://4.bp.blogspot.com/-fs4M08jDjkw/U4h_PFx-CtI/AAAAAAAAJYM/gQzc6bQReMU/s80-c/hacendado.jpg'; var comsA_dimension="/s80-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.replace('http:','https:');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} var niImg = h.author[0].gd$image.src; if(niImg == null || niImg === '' || niImg === 'https://img1.blogblog.com/img/b16-rounded.gif' || niImg === 'https://img1.blogblog.com/img/blank.gif'){b=imgSust} d=b.match(comsA_pattern1)||b.match(comsA_pattern2); j=b.replace(d,comsA_dimension); t=j.replace('http:','https:'); var autorWid = '<li><a title="autor del widget" href="https://escss.blogspot.com"><img src="https://4.bp.blogspot.com/-saTP-FXsd_k/WYWK8VX26kI/AAAAAAAANoQ/aLcRTvxUVh8BG3xN38PN1kAZkoSj5GSiQCLcBGAs/s80-c/EsCSS.png" /><span class="coment_autor">por @Kseso</span><span class="coment_text">#EsCss .Blog { content: "#impoCSSible inside"}</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=showLabajos' 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 imgSust
    Ruta a la imagen que reemplazará el avatar de aquellos que no teniendo Blogger les adjudica una 'B' fea y pequeña (16x16px).
  5. 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)
  6. var niImg y su if()
    Sustituye las imágenes b16-rounded.gif o vacías de quienes no tienen avatar. Las cambia por la imagen de sustitución indicada en el punto 4 de esta explicación.
  7. 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.
  8. 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.

avatar del Editor del blog

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