Últimos comentarios Los comentarios más recientes en la sidebar

El otro día me preguntó Juan Franco sobre el widget “Alguien dijo algo...” que tengo en mi sidebar, no es que tenga mucha utilidad mostrarlos, es sólo un capricho bloggero (¿o se escribe bloguero?).

La forma más simple y rápida recomendada no por mí, sino por Blogger in Draft es añadir un gadget de Amanda de Blogger Buster. Entra a Blogger Gadget y click en Add it now! o desde Diseño | Elementos de la página | Añadir un gadget, ahora en Destacados y en Recent Comments.

Lo que se crea es in iFrame que no podemos aplicarle CSS, sólo la configuración como cantidad de comentarios a mostrar, cantidad de letras y la altura del iFrame, siempre con el riesgo de que un buen día deje de funcionar sin aviso.

Otra manera que me gusta más es usar el gadget Feed y algo de CSS.
Vamos en Diseño | Elementos de la página | Añadir un gadget | Feed y en URL del feed pondremos el feed de comentarios de nuestro blog:

http://estadoavatar.blogspot.com/feeds/comments/default

Desde luego en lugar de estadoavatar colocas la dirección de tu blog.

Y damos click en Continuar, en este ejemplo coloqué de Título Comentarios recientes, prefiero no mostrar la fecha pero sí a los Autores/fuentes del elemento y click en Guardar y es todo, bueno casi todo, falta el CSS.



Primero averigüemos el ID de ese elemento, supongo que en la mayoría de los casos es Feed1 porque pocos lo agregan, de no estar seguro entra en Diseño | Edición de HTML y marca Expandir plantillas de artilugios, si es que no sabes encontrar el ID manten precionado CTRL y presiona F y en mi ejemplo buscaría Comentarios recientes, un código igual o similar a este aparecerá:

<b:widget id='Feed1' locked='false' title='Comentarios recientes' type='Feed'>

Lo que está en verde es el ID, y será ese el que usaremos en el CSS.

En Edición de HTML añadimos las definiciones antes de ]]></b:skin>

#Feed1 .widget-content {
  border:1px dotted #000;
}
#Feed1 .widget-content .item-date {
  display:block;
}
#Feed1 .widget-content .item-author {
  display:block;
  font-weight:bold;
}
#Feed1 li {
  background: transparent url(http://estadoavatar.blogspot.es/img/comments.png) no-repeat 0px 4px;
  border-bottom: 1px dotted #223344;
  border-top: 1px dotted #223344;
  margin-bottom: -1px !important;
  padding: 2px 0 2px 33px;
}
#Feed1 li:hover {background-color: #171E27;}
#Feed1 a, #Feed1 a:link, #Feed1 a:visited {color: #BBB;}
#Feed1 a:hover {color: #DDD;}

Esas fueron las que yo apliqué, podrían ser otras.

Otra opción es usar alguna variante de Recent Comments Widget como la de Rosa y JMiur.

En Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pegamos lo siguiente:

<style type="text/css">
#ultimosComentarios li {
  background: transparent url(http://estadoavatar.blogspot.es/img/comments.png) no-repeat 0px 4px;
  border-bottom: 1px dotted #223344;
  border-top: 1px dotted #223344;
  margin-bottom: -1px !important;
  padding: 2px 0 2px 32px;
}
#ultimosComentarios li:hover {background-color: #171E27;}
#ultimosComentarios a, #ultimosComentarios a:link, #ultimosComentarios a:visited {color: #BBB;}
#ultimosComentarios a:hover {color: #DDD;}
</style>
<div id="ultimosComentarios">
<script type="text/javascript">
function showrecentcomments(json) {
for(var i=0; i < a_rc; i++) {
 var b_rc=json.feed.entry[i];var c_rc;
 if(i==json.feed.entry.length)break;
 for(var k=0; k < b_rc.link.length; k++) {
   if(b_rc.link[k].rel=='alternate') {
     c_rc=b_rc.link[k].href;break;
   }
 }
 c_rc=c_rc.replace("#","#");
 var d_rc=c_rc.split("#");
 d_rc=d_rc[0];
 var e_rc=d_rc.split("/");
 e_rc=e_rc[5];
 e_rc=e_rc.split(".html");
 e_rc=e_rc[0];
 var f_rc=e_rc.replace(/-/g," ");
 f_rc=f_rc.link(d_rc);
 var g_rc=b_rc.published.$t;
 var h_rc=g_rc.substring(0,4);
 var i_rc=g_rc.substring(5,7);
 var j_rc=g_rc.substring(8,10);
 var k_rc=new Array();
 k_rc[1]="Ene"; k_rc[2]="Feb"; k_rc[3]="Mar"; k_rc[4]="Abr";
 k_rc[5]="May"; k_rc[6]="Jun"; k_rc[7]="Jul"; k_rc[8]="Ago";
 k_rc[9]="Sep"; k_rc[10]="Oct"; k_rc[11]="Nov"; k_rc[12]="Dic";
 if("content" in b_rc){
   var l_rc=b_rc.content.$t;
 } else if("summary" in b_rc) {
   var l_rc=b_rc.summary.$t;
 } else var l_rc="";
   var re=/<\S[^>]*>/g;
 l_rc=l_rc.replace(re,"");
 if(m_rc==true)document.write(k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');
 document.write('<li><b>' + b_rc.author[0].name.$t + '</b>');
 if(n_rc==true)document.write(f_rc);
 document.write(':<br/>');
 document.write('<a href="' + c_rc + '">');
 if(l_rc.length < o_rc) {
   document.write(l_rc);
 } else {
   l_rc=l_rc.substring(0,o_rc);
   var p_rc=l_rc.lastIndexOf(" ");
   l_rc=l_rc.substring(0,p_rc);
   document.write(l_rc+'&hellip;');
 }
 document.write('</a></li>');
}
}
</script>

<script type="text/javascript">
var a_rc=5;
var m_rc=false;
var n_rc=false;
var o_rc=60;
</script>

<script src="http://estadoavatar.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div>

Para evitar posibles errores lo dejo en este documento de texto, sólo es copiar y pegar, recuerda cambiar la parte de estadoavatar por el de tu blog.

  var a_rc=7;       Es la cantidad de comentarios a mostrar
var m_rc=false;          Si es true la fecha se mostrará
var n_rc=false;          Si es true todo se mostará en una línea
var o_rc=60;             Es la cantidad de letras por comentario a mostrar

Este es el que estoy usando. El CSS está incluído en el gadget y no hay necesidad de modificar la plantilla.
Para más detalles puedes leer Ultimos comentarios YA MISMO y Solucionando scripts: Últimos comentarios en la sidebar en Vagabundia.

Usando este otro se mostrará una imagen para el autor:
Lo mismo que en el anterior se va a Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y le pegamos lo siguiente:

<style>
#ultimasopiniones .bbrecpost {
  border-bottom: 1px dotted #99AABB;
  border-top: 1px dotted #223344;
}
#ultimasopiniones .bbrecpost:hover {
  background-color: #171E27;
}
#ultimasopiniones .bbrecpostsum {
  margin:0 0 10px 0;
  border-bottom: 1px solid #223344;
}
#ultimasopiniones .bbrecpostsum:hover {
  background-color: #171E27;
}
#ultimasopiniones img {
  margin:0 3px 0 0;
  width: 16px;
  height:16px;
}
</style>
<div id="ultimasopiniones">
<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"/>';
autor='<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvVr1L3TiZzS-dUhjZiRltrkXhAA-zkIg-fDdyykYtmOhulNf0hxlpDLsuu0VDX8JsHy_XYuJV-8eeFAE9xCUj0-Bv144kmK5yvNPDHm2cfUOOSx2OMVk_eCazLls_KJW2v5U9xWJ9z9U8/"/>';
anonymous='<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp4vL4RKI/AAAAAAAAGmw/x20-2kKSkEU/s320/anonymous.png"/>';

alturl = alturl.replace("#", "#");
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 == 'Bonzu Pipinpadaloxicopolis III'){ document.write(autor)}
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 + ':' +'</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 más)</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 = 5;
var showcommentdate = false;
var showposttitle = false;
var numchars = 50;
var standardstyling = false;
</script>
<script src="http://estadoavatar.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>

También dejo otro documento de texto para evitar posibles errores. Se debe cambiar estadoavatar por la de la url de tu blog, igual que en el anterior el CSS está en el gadget y no se modificó la plantilla.

autor='<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvVr1L3TiZzS-dUhjZiRltrkXhAA-zkIg-fDdyykYtmOhulNf0hxlpDLsuu0VDX8JsHy_XYuJV-8eeFAE9xCUj0-Bv144kmK5yvNPDHm2cfUOOSx2OMVk_eCazLls_KJW2v5U9xWJ9z9U8/"/>';
Contiene la imagen para mostrar del autor del blog.

En donde dice Bonzu Pipinpadaloxicopolis III va el nombre idéntico al que usas para comentar.

Recomiendo leer Últimos comentarios personalizados con icono del Escaparate de Rosa.


Debo aclarar que en todos los casos incluí modificaciones mías, en este blog de pruebas tengo los cuatro sistemas para mostrar comentarios, tiene una copia de esta plantilla y funcionan muy bien hasta la fecha.

REFERENCIAS:
Últimos comentarios personalizados con icono
Ultimos comentarios YA MISMO
Solucionando scripts: Últimos comentarios en la sidebar