Los comentaristas son una parte fundamental de cualquier blog, ya que ellos son los que le dan vida al blog, abriendo y causando debates lo que genera mas actividad en las entradas.

Por eso es muy importante saber cuales son los usuarios mas activos del blog, los usuarios que mas comentan, y es por esto que hoy les presento un espectacular método para la lista de top comentaristas del blog.

El gadget se vera de la siguiente manera:

Top Comentaristas en blogger


Esta nueva forma del gadget de Top Comentaristas, viene con el avatar del usuario y esta hecho en JavaScript, este código pertenece a MS-Potilas, yo solo he modificado algunos atributos dando como resultado un código mas optimizado.

Para agregar este gadget tienes que entrar a Diseño, Añadir gadget, HTML/JavaScript y pegar el siguiente código:

<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 8;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 28;
var cropAvatar = true;
//
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;

var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;

var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(//sdd+-c//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(//sdd+(-c){0,1}//, "/"+newsize+"/");

var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();

if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}

if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

//Calculate difference btw the two dates, and convert to days
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;

if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;

var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}

// convert object to array of tuples
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});

// list top topcommenters:
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Ahora solo queda guardar los cambios y listo.

Para modificar el numero de usuarios que se muestran en el gadget, busca en el código var maxTopCommenters = 8;  y cambia el 8 por el numero que quieras.

Para modificar el tamaño del avatar de los comentaristas busca en el código var sizeAvatar = 28; y cambia el numero 28 por el numero de pixeles que desees.


64 comentarios

Iván Darío Agudelo A. · marzo 3, 2013 a las 8:35 pm

Hola Hayder, este gadget funcionará con las vistas dinámicas en Blogger?

    Hayder Juvinao · marzo 7, 2013 a las 8:48 pm

    Este y ningún otro gadget que sea para agregar mediante HTML servirá en las vistas dinámicas

JLO · marzo 4, 2013 a las 7:18 pm

es muy bueno, muy estético también pero 2 cosas:

como hago para borrar los nombres que no quiero que salgan (como por ejemplo mis comentarios)…

como toma los comentarios? cuando lo probé cuenta diferente al que tengo ahora y obvia algún comentarista también…. gracias….

    Hayder Juvinao · marzo 7, 2013 a las 8:51 pm

    Las configuraciones de este gadget vienen en ingles, así que para ahorrarles el trabajo voy a leer ese documento y cuando haya entendido como funciona por completo el gadget te responderé

    JLO · marzo 19, 2013 a las 4:13 pm

    buscando ví que en esta línea agregás los nombres entre comillas que no querés que se incluyan y listo, gracias por el gadget!!!!

    var excludeUsers = [«Anonymous», «someotherusertoexclude»]

    Hayder Juvinao · marzo 20, 2013 a las 12:07 am

    Gracias por tu aporte JLO

Toxico SM · marzo 4, 2013 a las 8:45 pm

si soy el 4to 😀

Marco · marzo 5, 2013 a las 6:13 pm

juvinao…..Saludos, queria preguntarte si este blog también es tuyo http://www.blogwarez.com.ar ???

por que vi tu nombre en una publicación!!!!!

    Anonymous · marzo 7, 2013 a las 5:44 am

    A pue sbiennnnnnnn

    Hayder Juvinao · marzo 7, 2013 a las 8:55 pm

    Si ese blog también es mio, solo que lo tengo un poco abandonado

Facundo Trillo · marzo 7, 2013 a las 3:51 am

Me gusta el nuevo diseño, pero solo te critico la letra del texto es muy grande para mi gusto

Anonymous · marzo 7, 2013 a las 5:46 am

JUVINAO… ¡yo quiero los estilos de tus comentarios! Te quedaron brutales…. ¿me los pasas por favor?

    Hayder Juvinao · marzo 7, 2013 a las 8:59 pm

    Claro amigo pero te los paso en privado, déjame algún correo donde te los pueda enviar

    TVboricuaUSA · marzo 8, 2013 a las 1:23 am

    Ah, Hayder soy yo de nuevo… POR FAVOR cuando me envíes los estilos de tus comentarios, no publiques mi comentario… para que no todo el mundo vea el email. ¡Te estaría muy agradecido!

    Luego yo publico otro dandote las gracias, ¿si? Por favor. 🙂

    Hayder Juvinao · marzo 8, 2013 a las 8:34 pm

    Ok amigo mañana te envió el código

    TVboricuaUSA · marzo 8, 2013 a las 9:03 pm

    Gracias… 🙂

    TVboricuaUSA · marzo 9, 2013 a las 11:54 pm

    Amigo, no me has enviado los estilos. 🙁

    Hayder Juvinao · marzo 12, 2013 a las 4:52 pm

    Ya te envié el correo con los estilos 🙂

    TVboricuaUSA · marzo 13, 2013 a las 12:23 am

    SIIIIIIIII, ¡gracias! Están padres. ¡Abrazos!

    Hayder Juvinao · marzo 14, 2013 a las 9:41 pm

    Que bueno que te hayan gustado amigo 🙂

Dani gomez · marzo 7, 2013 a las 12:36 pm

Excelente widget para blogger, yo lo uso en mi blog personal y va espectacularmente bien, recomendado! gracias!

Jorge Luis · marzo 7, 2013 a las 5:42 pm

Te quedo genial el nuevo diseño, aunque un poco grande la letra, pero igual está muy chevere 😀

    Hayder Juvinao · marzo 7, 2013 a las 9:09 pm

    Jorge Luis ya corregí el tamaño de la letra, fue un pequeño error de diseño 😉 pero ya lo corregí.

    Saludos y que bueno que te haya gustado el nuevo diseño 😛

La Pasion Verde · marzo 9, 2013 a las 4:14 pm

Parce en mi blogger puse una caja de comentarios de Facebook pero en una entrada me salen comentarios viejos de otra como hago?

Isabel Macías · marzo 24, 2013 a las 6:06 pm

Buenas,

Lo he colocado y funciona muy bien. Gracias a JLO por explicar cómo quitar al administrador del top comentaristas.

Un saludo.

Pipe Leon · mayo 8, 2013 a las 12:46 am

Ohhh increible todos los trucos que subes mi blog me quedo padre gracias. Eres grande!

    Hayder Juvinao · mayo 11, 2013 a las 8:24 pm

    Pipe la próxima vez muéstrame tu blog para verlo :winky: y verlo lo padre que te quedo.

    Saludos 😉

Freya · mayo 11, 2013 a las 10:15 pm

gracias por el gagtget, lo malo es que solo puedo excluir un nombre

    JLO · mayo 20, 2013 a las 12:33 am

    como solo un nombre? no hay límites para eso…

Marim · mayo 12, 2013 a las 5:42 pm

Muchas gracias, lo eh anexado a mi blog.

Jazmin C · junio 1, 2013 a las 5:08 am

Hola! Te encontre navegando muchas gracias por este recurso lo he puesto a mi blog! Una pregunta , hay alguna manera de que se contabilice solamente por periodos de tiempo?? Por ejemplo: Solamente el mes de junio y julio
Esperare espuestas Gracias anticipadamente!!!

Toni Falcó · agosto 8, 2013 a las 9:34 am

¡Brutal! ¡A la saca!

Muchas gracias y felicidades por el blog.

http://www.androidbasico.com

    Hayder Juvinao · agosto 11, 2013 a las 10:01 pm

    Toni gracias por comentar y espero que sigas visitando mi blog.

    Saludos

♥ Noepola ♥ · agosto 8, 2013 a las 10:48 am

Buen aporte! pero me gustaría saber como excluyo mi nombre de la lista. Solo quiero que salgan los de los seguidores. Que tengo que hacer?

Mil gracias!

    Hayder Juvinao · agosto 11, 2013 a las 10:10 pm

    Noepola ya el código viene por defecto configurado para que no muestre los comentarios del autor, solo que no debes tener tu cuenta de Blogger vinculada con Google + para que funcione, por eso es que en mi caso no funciona.

    En todo caso la linea que hace que no se muestren los comentarios del autor es:

    var excludeMe = true; // true: exclude my own comments

Morales´s Ruth · agosto 18, 2013 a las 5:26 pm

Muchísimas gracias por el tutorial, mi pregunta ya te la han efectuado y es ¿como quitarme a mi de la lista de top comentaristas?

Gracias

andresAM3 · diciembre 27, 2013 a las 1:47 pm

;(( ayuda con mi web http://faceyouu.blogspot.com/

Maiki Niky · enero 13, 2014 a las 2:18 pm

Hola Hayder, magnifico el gadget, lo unico una duda, no me salen los avatares de mis seguidores, ¿sabes porque puede ser? he modificado el tamaño del avatar por si era cuestion de espacio, pero no he arreglado nada. Ayuda por favor 😕

Y aprovecho para preguntarte otra cosa, como puedo añadir los emoticonos que tienes aqui en los comentarios, son super graciosos 🙂

Maiki Niky · enero 16, 2014 a las 6:00 am

Arreglado, ya se lo que pasa que como he importado el blog, todavia no me sigue la gente de la que tengo comentarios, de ahi que no me salgan todavia sus avatares en el gadget.

Lo unico por favor, dime como poner tus emoticonos, me encantan x-)

Hellen HB · febrero 9, 2014 a las 12:14 pm

Muchísimas gracias 🙂 ha quedado muy bien en mi blog! Un saludo

Azura Fujoshi · febrero 23, 2014 a las 5:55 pm

muchas gracias, me sirvio muy bien =D
mas bien si el blog esta en privado no funciona, solo si esta en publico.
tankius =)

Buffy · marzo 23, 2014 a las 12:07 pm

Muchas gracias por el gadget. Lo he colocado en mi blog y ha quedado perfecto.
Un saludo

Vanedis · marzo 25, 2014 a las 3:42 pm

Pregunta tonta muy tonta pero necesaria en mi caso: y en ninguna parte hay que poner la URL de mi blog para que «capte» mis comentaristas ? No lo veo por ninguna parte y por otro lado, haciendo copiar y pegar, el gadget no me funciona….
Gracias y perdona mi torpeza….

    Hayder Juvinao · marzo 30, 2014 a las 4:49 pm

    El script detecta automáticamente los usuarios con mas comentarios de tu blog.

    Saludos

Nitro Sonic · abril 18, 2014 a las 2:04 pm

Amigo que genial estan los estilos de tu comentarios me pasa el estilo por email please ah y estilo de los emoticon te quedo genial que se vea igual que el tuyo…

xbox.xperia92@gmail.com

😎

Tina Paredes · abril 20, 2014 a las 3:13 pm

Muchas gracias! Me sirvio de mucho tu entrada 🙂

Anonymous · septiembre 7, 2014 a las 8:33 pm

Mas preguntas en http://q.gs/791Au

Ana|posicionamiento seo turistico · abril 13, 2015 a las 8:55 pm

Gracias por compartir

Gonzalo · diciembre 5, 2018 a las 3:44 pm

>Muchas gracias, yo uso blogger y es una gran herramienta

Gadget de Top Comentaristas - Rocío Bloguera · enero 27, 2016 a las 5:29 pm

[…] un simple código muy sencillo de configurar. Solo tienes que seguir los pasos desde la entrada: “Mil Trucos Blogger: Gadget de Top Comentaristas  para Blogger”  (adsbygoogle = window.adsbygoogle || […]

5 Gadgets para Blogger - Rocío Bloguera · febrero 3, 2016 a las 9:23 pm

[…] Solo tienes que seguir los pasos desde la entrada: “Mil Trucos Blogger: Gadget de Top Comentaristas  para Blogger”  […]

5 Gadgets para Blogger - Hogar Bloguero · febrero 22, 2016 a las 9:59 pm

[…] Solo tienes que seguir los pasos desde la entrada: “Mil Trucos Blogger: Gadget de Top Comentaristas  para Blogger”  […]

Responder a Hayder Juvinao Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *