Últimos comentarios personalizados con icono

Este script mostrará los últimos comentarios del blog en la sidebar, tal como lo venían haciendo los que he explicado anteriormente en el Escaparate con la diferencia de que, delante de cada comentario, se mostrará una imagen o icono que hayamos escogido previamente.

El script hará que se muestre un icono personalizado para el autor o autores del blog, otro para los demás comentaristas (los que comentan logueados) y uno más para los comentaristas anónimos.
El script puede aplicarse directamente en el mismo gadget, así que no vamos a necesitar de ningún alojamiento externo, ni vamos a depender de ningún servicio externo que nos deje "colgados" sin previo aviso.

[1] Elegimos las imágenes que vamos a usar que, como siempre os recomiendo en casos parecidos, lo mejor es que sean de las mismas medidas y estilo.
Las subimos a un alojamiento adecuado o al mismo Blogger, para obtener la url de cada una de ellas ya que tendremos que incluirlas en el código.

[2] En la parte de Diseño de nuestro panel, añadimos un nuevo gadget HTML y colocamos dentro este código:

<script type="text/javascript">
function showrecentcomments(json) {
  for (var i = 0; i < numcomments; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
   var photoslink=new Array()
   photoslink[0]='<img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp1pMWkLI/AAAAAAAAGmo/ggSsVIrdtms/s320/otros.png"/>';
   rosa='<img src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SeJpxgrXlGI/AAAAAAAAGmg/7KS4S9cQiro/s320/yo.png"/>';
   anonymous='<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp4vL4RKI/AAAAAAAAGmw/x20-2kKSkEU/s320/anonymous.png"/>';

   alturl = alturl.replace("#", "#comment-");
   var postlink = alturl.split("#");
   postlink = postlink[0];
   var linktext = postlink.split("/");
   linktext = linktext[5];
   linktext = linktext.split(".html");
   linktext = linktext[0];
   var posttitle = linktext.replace(/-/g," ");
   posttitle = posttitle.link(postlink);
   var commentdate = entry.published.$t;
   var cdyear = commentdate.substring(0,4);
   var cdmonth = commentdate.substring(5,7);
   var cdday = commentdate.substring(8,10);
   var monthnames = new Array();
   monthnames[1] = "Ene";
   monthnames[2] = "Feb";
   monthnames[3] = "Mar";
   monthnames[4] = "Abr";
   monthnames[5] = "May";
   monthnames[6] = "Jun";
   monthnames[7] = "Jul";
   monthnames[8] = "Ago";
   monthnames[9] = "Sep";
   monthnames[10] = "Oct";
   monthnames[11] = "Nov";
   monthnames[12] = "Dic";
   if ("content" in entry) {
     var comment = entry.content.$t;}
   else
   if ("summary" in entry) {
     var comment = entry.summary.$t;}
   else var comment = "";
   var re = /<S[^>]*>/g;
   comment = comment.replace(re, "");
   if (!standardstyling) document.write('<div class="bbrecpost">');
   if (standardstyling) document.write('<br/>');
   if (showcommentdate == true) document.write('El ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ');

if( entry.author[0].name.$t == 'Rosa'){ document.write(rosa)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}
   document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + ', dijo' +'</a>   ');
   if (showposttitle == true) document.write(' en ' + posttitle);
   if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
   if (standardstyling) document.write('<div class="txtmsg"><br/></div>');
   if (comment.length < numchars) {
         if (standardstyling) document.write('<i>');       
         document.write(comment);
         if (standardstyling) document.write('</i>');}
   else
        {
         if (standardstyling) document.write('<i>');
         comment = comment.substring(0, numchars);
         var quoteEnd = comment.lastIndexOf(" ");
         comment = comment.substring(0, quoteEnd);
         document.write(comment + '...<a href="' + alturl + '">(leer mas)</a>');
         if (standardstyling) document.write('</i>');}
   if (!standardstyling) document.write('</div>');
   if (standardstyling) document.write('<br/>');
  }
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
if (!standardstyling) document.write('</div>');}

</script>
<script type="text/javascript">
var numcomments = 8;
var showcommentdate = true;
var showposttitle = true;
var numchars = 50;
var standardstyling = true;
</script>
<script src="http://elescaparatederosa.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

[3] En el CSS de nuestra plantilla, antes de ]]></b:skin>, colocamos este código:

/* ultimas opiniones */
.txtmsg {margin: -20px 0 0 0;}

[4] Guardamos los cambios. El resultado será algo como lo que veis en la imagen.


Como podéis comprobar el script muestra una serie de datos en cada comentario: la fecha, el icono respectivo, el nombre del autor, el título de la entrada, un resumen del comentario y, por último, un "leer más".

Todos esos datos podemos controlar si mostrarlo o no, en esta parte del script:

var numcomments = 8 Número de comentarios que mostraremos.
var showcommentdate = true; La fecha. Para ocultarla ponemos false.
var showposttitle = true; El título del post. false para ocultarlo.
var numchars = 50; Número de caracteres que muestra el resumen del comentario
var standardstyling = true; Estilo del resumen, true o false.




Notas:

En el código podéis ver destacado en negrita, donde tenéis que poner y como el nombre del autor del blog, es decir, vuestro nick. En mi caso dice Rosa y fijaros que debe ir en letras minúsculas en todos los casos menos en uno que va en mayúsculas, y que ha de estar escrito tal como lo usáis en el blog.

En color naranja he destacado la url del icono que acompaña a todos los comentaristas, en rojo la url del icono de autor y en verde la de los comentaristas anónimos.
He dejado incluidas la url de las imágenes que uso yo en el código por si queréis usarlas y también para que podáis probar el gadget con ellas antes de incluir las vuestras.

[5] Como podéis ver estoy usando el script en el Escaparate con algunas modificaciones, os explico los cambios que tenéis que hacer en el código si queréis que el gadget se vea como aquí:

• Localizáis en el código ,dijo (con la coma incluida) y lo sustituis por dos puntos :
• Ponéis false en estas dos líneas del script:
  var showcommentdate = false; y var showposttitle = false;
• Por último, colocáis estas líneas de código en el CSS de la plantilla (antes de ]]></b:skin>):
  
  /* ultimos comentarios */
  .txtmsg {
  margin: -20px 0 0 0;
  border-bottom: 1px dashed #88B3C3;
  }

[6] Por último estoy segura que algunos vais a preguntar por la manera de incluir en el gadget a más de un autor (en el caso de blogs compartidos), así que os explico como hacerlo.

Supongamos que el nick del otro autor que vamos a incluir es "Abel".
Localizamos en el script la línea que corresponde a la imagen de "Anónimo":

anonymous='<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp4vL4RKI/AAAAAAAAGmw/x20-2kKSkEU/s320/anonymous.png"/>';

Y justo debajo pegamos una nueva para el otro autor (en realidad es una copia de las anteriores a la que cambiamos el nick):

abel='<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp4vL4RKI/AAAAAAAAGmw/x20-2kKSkEU/s320/icons.png"/>';

Una vez añadida y modificada esa línea, vamos a localizar en el código algo más abajo estas líneas:

if( entry.author[0].name.$t == 'Rosa'){ document.write(rosa)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}


Justo debajo de la del autor del blog, añadimos la del nuevo autor, que al igual que antes es una copia de esta misma a la que cambiamos el nick y añadimos también una nueva llave de cierre:

if( entry.author[0].name.$t == 'Rosa'){ document.write(rosa)}
else{
if( entry.author[0].name.$t == 'Abel'){ document.write(abel)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
  }
}