Blog Literario Entre Libros y Tintas: Tutorial: Cómo Incluir el Gadget Top Comentaristas en Nuestro Blog

En el tutorial de hoy os voy a enseñar una forma muy sencilla de incluir un listado con los "Top

Comentaristas" de nuestro Blog.

Con un sencillo truco y un simple copia y pega podréis ver en vuestro blog un recuadro con los comentaristas más activos de vuestro blog, cosa muy útil en mi caso para sorteos.

El Gadget Top Comentaristas nos mostrará un listado con los comentaristas, sus avatares y el número de comentarios publicados por él en nuestro blog. El listado y el número de comentarios se irá actualizando automáticamente, por lo que no tendréis que hacer nada una vez instalado.

Vamos con el tutorial, veréis que es muy sencillo.

Vamos a nuestro Blog, a la Página Principal de Blogger y seleccionamos Diseño -- Añadir un Gadget --HTML/Javascript
Ahora solamente tenéis que copiar este código, guardar y colocar el Gadget en la parte del blog que queráis.

* COPIA Y PEGA EL CÓDIGO PERO SIGUE LEYENDO *

<a <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 Comentaristas con Avatars, por Entre Libros y Tintas 2015.
//
// CONFIG:
var maxTopCommenters = 10;   // 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 = 50; // 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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKvO56ezqVEZnp_0L2oCGN5q9VvyXRcvOCgfwwB_hTTn8zDauhkTTgowOCexc3mMlX3zMjn0kdXTfSOjxZAc5i60GygI37XOSftqmsd_NllY2dKVEKAS_RIsingHZV9uJecVzzO28dm-4/"+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 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>/></a>

En la parte superior os he puesto el código para que lo podáis copiar ya que mi blog está protegido y no deja hacer copia y pega en los textos.

OJO: El código del cuadrado es el ejemplo de mi blog, por lo que os pongo el código aquí explicando los datos que podéis modificar. Si no modificais nada

<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 Comentaristas con Avatars, por Entre Libros y Tintas 2015.

//

// CONFIG:

var maxTopCommenters = 10;   // Numero de comentarista que quereis que aparezcan en la lista

var minComments = 1;    // Numero de comentarios minimos que deben de tener los comentariastas para aparecer en la lista

var numDays = 0;    // Cuantos días atras quereis que empiecen a contar los comentarios, (ej.30) o 0 para "desde el primer dia"

var excludeMe = true;   // La opcion true hace que el administrador no aparezca en la lista

var excludeUsers = ["Anonymous", "someotherusertoexclude"];   //elimina los nombre indicados entre comillas, Anonymous elimina los comentarios anonimos

var maxUserNameLength = 50; // Largo de los nombres que aparezcan, indican el numero de letras 0: nombres completos

//

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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKvO56ezqVEZnp_0L2oCGN5q9VvyXRcvOCgfwwB_hTTn8zDauhkTTgowOCexc3mMlX3zMjn0kdXTfSOjxZAc5i60GygI37XOSftqmsd_NllY2dKVEKAS_RIsingHZV9uJecVzzO28dm-4/"+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(/\/s\d\d+-c\//, "/"+newsize+"-c/");

if(cropAvatar) newsize+="-c";

avaimg = avaimg.replace(/\/s\d\d+(-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>

7 comentarios:

A. Turquoise4 de julio de 2015, 12:08
¡Hola guapa!
Que bien te explicas ;) Yo no lo tengo, pero lo probaré, a ver si en Wordpress funciona o existe alguna cosa similar ^^
¡Un beso y gracias por el tuto! :D
ResponderEliminar
Respuestas
Unknown4 de julio de 2015, 13:31
¡Hola Eva! Me parece una idea estupenda el poder incluir este top en los blogs y me ha gustado mucho como lo has explicado, así que a ver si cuando terminemos con los exámenes podemos ir añadiendo cositas al blog como estas ^^
¡Un besito! (Some books you read: Cadena de comentarios)
ResponderEliminar
Respuestas
Fernanda Reyes4 de julio de 2015, 21:58
Hola Eva! Si tienes comentarios con Google+ se puede tambien ?.

Besos
ResponderEliminar
Respuestas
Almudena5 de julio de 2015, 11:26
Hola! Gracias por el consejo pero como ya lo tengo puesto, pues bueno jajaj pero gracias! Un beso.
ResponderEliminar
Respuestas
Estefania Alvarez5 de julio de 2015, 15:06
A mi no me funciona, además si lo pongo no se ve ni un solo gadget que esté por debajo de ese O.O
De todos modos yo lo tenía y al cambiar el diseño dejó de salir y me tocó quitarlo y da igual que tutorial use ya no puedo ponerlo :(
ResponderEliminar
Respuestas
ChickaLit2 de marzo de 2017, 14:41
¡Hola guapa! Me ha encantado la explicación, te lo agradezco muchísimo, le he recomendado tu blog a un par de personas que también quieren ponerle el gadget ;) un abrazo
ResponderEliminar
Respuestas
Keka226 de marzo de 2019, 13:05
Hola! Igual soy torpe... Pero no me funciona... Me puedes ayudar?? Has dado una maravillosa explicación, pero no funciona para mi blog y no sé por qué... Gracias =)
ResponderEliminar
Respuestas

Añadir comentario

Y tú ¿qué piensas?
¡Me gustaría mucho saberlo!
¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥

Me hacen tanta ilusión que leo todos y cada uno de ellos SIEMPRE.

Sin embargo y aunque en general suelen ser bienvenidos todos los comentarios y todas las opiniones, me reservo el derecho de eliminar aquellos que me parezcan malintencionados o cuyo único fin sea la autopromoción.

Besos y ¡gracias de nuevo!