244

Ú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.

ultimos comentarios icono
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)}
  }
}

Entradas Relacionadas:

244 comentarios:

«El más antiguo   ‹Más antiguo   Total comentarios: 201 – 244 de 244   Más reciente›   El más reciente»
Anónimo

Vale, voy a intentar otra vez!. :s

Anónimo

Oh my god!.. ahora me siguen apareciendo tus comentarios pero son mis iconos!!! uff esto me está superando... sigo intentando :0

Rosa

EliPao Eso es porque no has cambiado en el código el nombre de mi blog por el tuyo... fíjate bien.

Anónimo

Por fin!!!!!!!!!! jejee, ni te imaginas la bobada q no me dejaba mostrar todo.. uff, ya está! y si, como siempre muy claras tus explicaciones, lo malo es q nosotros a veces estamos un tanto lentos.. jeje
Gracias Rosa !!!! un abrazo :)

Rosa

EliPao ¡Bien! D El que la sigue... la consigue je,je.

Darkkness

Gracias Rosa.

Anónimo

ROSITAAAAAAAA... cantar victoria antes de tiempo... uhhhhh...esta todo ahi, bonito,ordenadito .....pero no me actualizan los comentarios... :( espero q pase pronto esta semana q estoy fatal!!!!

Rosa

EliPao Acabo de comentar en el blog de juegos e inmediatamente he visto mi comentario en la sidebar :o

Anónimo

siiiiiiiiiiiiiiiiiiii!!! jajjaa ya te vi!!! gracias grcias,, nose como pero siempre lo solucionas todo!!!! jejejej bezasos!!!! :P

Anónimo

Llevaba mucho rato tratando de q se me vieran.. nose q será pero ya esta ok!! gracias otra vez!!

Rosa

EliPao No he hecho nada... solo comentar y además vaya comentario "birria"... después pensé "oño, podrías haber dejado un saludo" :$

Anónimo

Ahh!! jeje ,, no te preocupes!! q con lo contenta q estoy por dejar los comentarios al fin... q hasta con q me hubieses dicho JODIA! te lo agradezco!!! jajajjaa bezotes!

Damian Omar Silva

hola rosa: copio tu código tal cual lo exponés y, obviamente, me aparecen en mi blog tus ultims entradas, lo que quiere decir que funciona. voy a la ultima linea y reemplazo tu dirección x la mía y deja de funcionar, no muestra ninguna entrada... ¿sabes lo que puede estar pasando?
muchas gracias

Anónimo

Damian "No muestra ninguna entrada"...:o

¿Hablas del código de esta entrada?... lo que ha de mostrar son los comentarios...

Si hablas de este código, fijate que la url de tu blog esté bien... es decir, una simple / de más o de menos hará que funcione o no, por ejemplo...

Damian Omar Silva

estuve tocando un poco el código y ahora me muestra mis ultimos comentarios, a la perfección . ya sé donde está el error, y es cuando cambio "Rosa" y rosa por "Damian" y damian. ahí deja de funcionar.
existe algo que estoy haciendo mal con el nombre y no puedo encontrar la solución.

Anónimo

DamianTu nombre, como digo en la entrada, ha de ser idéntico a como aparece en tu perfil de Blogger, con el que firmas las entradas... en tu caso es Damian Omar Silva

Desayunos Buen Regalo

:)

Felipe Calvo Cepeda

Voy a probarlo (por fin) y en rato te cuento a ver.
Excelente explicación ;)

Felipe Calvo Cepeda

No me voy a quejar, en mi opinión, ha quedado "bastante mono", Jajaja, me siento contento, salió a la primera. :D
Una pregunta que vi que te han echo en los comentarios, pero que al fin no logré entender, es posible cambiar el 'Anonymous' por 'Anónimo', teniendo en cuenta que en mi blog publican muuuchos 'Anónimos'.

Saludos señorita ;)
POS: Ya leí tu "Sobre mi" y he quedado =O con tus primaveras, Jeje, eres, como diríamos aquí en Colombia, "del carajo". (Es decir muy chevere ;) )
Saludos.!

Kristnel

Rosa, ¿cómo haces para saber tanto?
Tu blog es una maravilla, no sé qué haría sin él.
Un beso y gracias :)

Anónimo

Kristnel ¡Gracias cielo! En cuanto a lo de saber... no se tanto como parece je,je... querer es poder.

Mento

alli en el post note que usastes un class cuadro, como un segundo blockquote, como podria añadirle eso a mi blog?

Anónimo

el Chico Misterioso En el CSS, algo así:

.cuadrotexto {
padding: 10px;
border: 1px solid #ddd;
}
Donde vas a usarlo:

<div class="cuadrotexto"> El texto que va dentro </div>

Mento

Funcionó gracias Rosa!!!! una pregunta se puede eliminar el suscripcion por correo electronico? (ese que aparece en el formulario de comentarios)

Anónimo

el Chico Misterioso No, que yo sepa.

G L

Hola Rosa... igual mi problema es una tonteria, pero he mirado y no lo consigo. En los comentarios quiero que salga el icono por defecto de los comentaristas, o sea, que si escribes tu en el blog salga tu icono de blogger por defecto, pero en mi blog solo sale el nombre con su link, pero ninguna imagen... ¿podrias ayudarme? Este es el blog
http://degustandobarcelona.blogspot.com/

G L

....ah, no me refiero a la lista, sino directamente en los comentarios que escribe cada persona, vamos, como lo tienes tu en este que te estoy escribiendo, que sale encima de mi mensaje el nombre de GL y al lado el icono que tengo de blogger...

Anónimo

GLMira en esta entrada:
http://elescaparatederosa.blogspot.com/2009/09/nuevo-editor-y-avatar-en-comentarios.html

G L

Como siempre, muchas gracias Rosa. Problema solucionado, y disculpa que no encontrara por mis medios la solución, pero no lo localice en tu blog aunque obviamente ahí estaba.

Patricio Garrido

hola rosa gracias, por tu ayuda, pero no me resulta! :(
mira este es mi codigo que pegue:

mi nick es patricio Garrido

_______________

_______________________________________

me puedes ayudar por favor.

mi blog es
http://pagogapa.blogspot.com

Patricio Garrido

pucha te puedo enviar un correo ???

el mio es patogarrido40@hotmail.com

Patricio Garrido

rosi, no he modificado nada, y me aprarece tu codigo (de tu pagina).
pero no se como colocar mi informacion...
plis ayuda :(

Patricio Garrido

ya capté. :D al final del codigo hay que colocar el nombre de tu pagina! (osea pagogapa)
thanks!!!!
te pasaste tu blog es genial!

Unknown

Simplemente E S P E C T A C U L A R.
Gracias lo acabo de poner en mi blog y queda de maravilla. Ya llevaba tiempo buscando algo así.
Gracias

Pancho Gamez

hola, como hago para que ese gadget de ultimos comentarios me quede con un ancho de 233px y no se salga nada del texto?

Anónimo

nEjO Coloca después de /* ultimos comentarios */ algo así:

#HTML4 {width: 233px;}

Pancho Gamez

@Rosa
pues intente con eso que me dijsite, busque y en efecto era el html4, pero al darle las porpiedades {width: 233px;} me reducia tambien la imgaen del fon junto con el titulo del gadget. ASI QUE PROBE OTRA FORMA: ANTES DE TODO EL SCRIPT LE PUSE UN (div class='conejo'/) Y LO CERRE CON UN (/DIV) LUEGO EN ESTILOS PUSE:
.conejo: {width: 233px;} Y ME FUNCIONO, GRACIAS PORQUE TU ME DISTE LA IDEA. LO QUE QUERIA ERA REDUCIR A 233PX PERO SOLO LO QUE ESTABA EN EL CONTENIDO DEL GADGET Y NO EL GADGET EN SI. GRACIAS!!

Anónimo

nEjO Muy bien hecho!!! :D Ya veo vas entendiendo como utilizar los códigos, genial por ti! y mis disculpas, ni siquiera pensé al indicarte... dijiste el gadget y con eso me quedé :$

Pancho Gamez

tengo un problema, al aplicar el script en un gadge me convierte en letra cursiva todo el blog

Anónimo

nEjO Son muchos los que tienen este gadget agregado, incluida yo, y jamás nadie ha tenido ese problema... algo has hecho mal seguro, no tiene porque influir para nada en el resto del blog.

Pancho Gamez

@Rosa
GRACIAS creo que identifique el problema no se si tenga que ver pero:
cuando le quiero poner mas de 75 a var numchars = 75; me pone la letra en cursiva cuando lo dejo en 75 o menos ya no esta la letra en cursiva. sumado a esto yo instale directo de google font el font "yanone.." yaque no pude desde el editor avanzado por ser mi plantilla personalizada tu sabras, pero creop que ahi estuvo el RARO error en pasarme de 75 caracteres... bueno son los grandes misterios de la vida y blogger.

Anónimo

nEjO Pues no lo se cielo... quizás tengas razón y eso suceda al llegar a 75...:O voy a probar yo misma en cuanto tenga un ratillo, a ver si es eso, aunque me extraña la verdad, pero como tu dices a veces esto de los códigos es un verdadero misterio...:S

Mireia Torrent

Hola Rosa: No consigo hacer funcionar esto de los últimos comentarios y es una pena porque ahora se estan animando la gente a dejar alguno, me da pena que no me salga porque estaría bien; pues es una manera de reconocer la dedicación de mis lectores que en este caso son papas y mamas de la clase que yo llevo. A ver si me puedes echar una manita... gracias de antemano.

Anónimo

Mireia La única mano que puedo darte, es decirte que sigas los pasos de la entrada con tranquilidad y además si te surge algún problema puntual revises comentarios... esta entrada precisamente tiene varios con solución a la instalación...

«El más antiguo   ‹Más antiguo   Total comentarios: 201 – 244 de 244   Más reciente›   El más reciente»

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S