sábado, 4 de julio de 2015

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 *



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 = "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(/\/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>

 

6 comentarios:

  1. ¡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
  2. ¡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
  3. Hola Eva! Si tienes comentarios con Google+ se puede tambien ?.

    Besos

    ResponderEliminar
  4. Hola! Gracias por el consejo pero como ya lo tengo puesto, pues bueno jajaj pero gracias! Un beso.

    ResponderEliminar
  5. 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
  6. ¡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

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!