Mil Trucos Blogger

Gadget de Top Comentaristas para Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
1

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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
1

63 Comentarios

3 Pings/Trackbacks

  1. marzo 3, 2013    

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

    • marzo 7, 2013    

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

  2. JLO JLO
    marzo 4, 2013    

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

    • marzo 7, 2013    

      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 JLO
      marzo 19, 2013    

      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”]

    • marzo 20, 2013    

      Gracias por tu aporte JLO

  3. marzo 4, 2013    

    si soy el 4to 😀

  4. Marco Marco
    marzo 5, 2013    

    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 Anonymous
      marzo 7, 2013    

      A pue sbiennnnnnnn

    • marzo 7, 2013    

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

  5. marzo 7, 2013    

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

    • marzo 7, 2013    

      Facundo problema corregido, ya las letras están mas pequeñas.

  6. Anonymous Anonymous
    marzo 7, 2013    

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

    • marzo 7, 2013    

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

    • marzo 8, 2013    

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

    • marzo 8, 2013    

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

    • marzo 8, 2013    

      Gracias… 🙂

    • marzo 9, 2013    

      Amigo, no me has enviado los estilos. 🙁

    • marzo 12, 2013    

      Ya te envié el correo con los estilos 🙂

    • marzo 13, 2013    

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

    • marzo 14, 2013    

      Que bueno que te hayan gustado amigo 🙂

  7. marzo 7, 2013    

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

    • marzo 7, 2013    

      Dani gracias por tu comentario, seguro que se ve muy bien tu blog.

  8. marzo 7, 2013    

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

    • marzo 7, 2013    

      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 😛

  9. marzo 9, 2013    

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

  10. marzo 24, 2013    

    Buenas,

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

    Un saludo.

  11. mayo 8, 2013    

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

    • mayo 11, 2013    

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

      Saludos 😉

  12. mayo 11, 2013    

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

    • JLO JLO
      mayo 20, 2013    

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

  13. mayo 12, 2013    

    Muchas gracias, lo eh anexado a mi blog.

  14. junio 1, 2013    

    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!!!

    • junio 5, 2013    

      Jazmin creo que esto no es posible, gracias por comentar

  15. agosto 8, 2013    

    ¡Brutal! ¡A la saca!

    Muchas gracias y felicidades por el blog.

    http://www.androidbasico.com

    • agosto 11, 2013    

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

      Saludos

  16. agosto 8, 2013    

    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!

    • agosto 11, 2013    

      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

  17. agosto 18, 2013    

    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

  18. diciembre 27, 2013    

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

  19. enero 13, 2014    

    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 🙂

  20. enero 16, 2014    

    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-)

  21. febrero 9, 2014    

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

  22. febrero 23, 2014    

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

  23. marzo 23, 2014    

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

    • marzo 30, 2014    

      El gadget es muy bueno, gracias por comentar.

      Saludos

  24. marzo 25, 2014    

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

    • marzo 30, 2014    

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

      Saludos

  25. abril 18, 2014    

    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

    😎

  26. abril 20, 2014    

    Muchas gracias! Me sirvio de mucho tu entrada 🙂

  27. Anonymous Anonymous
    septiembre 7, 2014    

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

  28. abril 13, 2015    

    Gracias por compartir

  29. […] 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 || […]

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

  31. febrero 22, 2016    

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

  1. Gadget de Top Comentaristas - Rocío Bloguera on enero 27, 2016 at 5:29 pm
  2. 5 Gadgets para Blogger - Rocío Bloguera on febrero 3, 2016 at 9:23 pm
  3. 5 Gadgets para Blogger - Hogar Bloguero on febrero 22, 2016 at 9:59 pm

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo