domingo, 19 de marzo de 2017

Pretty Little Tutorial #3 Top Comentaristas

TOP COMENTARISTAS


Hoy os traigo un nuevo tutorial. Se trata de como hacer un top de seguidores que más comentan en vuestro blog. Os voy a traer dos tipos:




Como veis son muy similares. He visto otros que los ponen en forma de nube pero a mí me tardan mucho en cargar y por eso he decidido mostraros estos.



Es muy sencillo, solo tenéis que seguir los siguientes pasos:

Paso 1: Vais al diseño de vuestro blog y añadís un nuevo gadget HTML/Javascript.

Paso 2: Copiais este código en él:

<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {XXX}
</style>
<script type="text/javascript">
var maxTopCommenters = 10;  
var minComments = 5;     
var numDays = 0;    
var excludeMe = true;  
var excludeUsers = ["Anonymous", "Rosebud"];  
var maxUserNameLength = 22;
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No hay suficientes comentaristas para mostrar un Top.';
var txtAnonymous = '';    
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 = '';
var urlMyAvatar = '';
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]);
      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;
  }
  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;
  });
  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>


Paso 3: Modificais a vuestro gusto:
  • Blanco
Para que os quede como la primera imagen (la de los avatares cuadrados), debéis poner esto en lugar de las XXX:
vertical-align:middle; 
 
Para que os quede como la segunda imagen (la de los avatares redondos), debéis poner esto en lugar de las  XXX:

width: 32px;height: 32px;background-position: center;margin: 3px 3px 0 0;padding: 2px;border: purple solid thin;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-moz-box-shadow: inset 0 0 3px #F0F0F0;-webkit-box-shadow: inset 0 0 3px #F0F0F0;box-shadow: inset 0 0 3px #CCC;border-image: initial;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;vertical-align:middle; 

En rosa el color del borde del avatar.

  • Rojo: Número de comentaristas que quereis que se muestren.
  • Amarillo: Número de comentarios necesarios para tomar en cuenta al comentarista.
  • Azul oscuro: Número de días que se toman en cuenta para contar los comentarios (dejar 0 para contarlos desde siempre).
  • Azul claro: Comentaristas que no se tendrán en cuenta (podéis poner los que queráis).
  • Verde claro: Caracteres máximos que se muestran en el nombre del comentarista.
  • Verde oscuro: Tamaño del avatar.

Y hasta aquí el tutorial. Espero que os sirva. Ya sabéis que cualquier sugerencia me la podéis hacer llegar en los comentarios o en mi correo.

¿Qué os parece? ¿Os ha resultado útil?


8 comentarios:

  1. ¡Hola guapa!
    Ains, esta entrada me viene de perlas, llevo tiempo queriendo poner el top comentaristas en mi blog. Hace tiempo lo tenía, pero luego no se veía y busqué en otros blogs y seguía sin aparecer, así que probaré con el código que has puesto a ver. Mil gracias, lo has explicado todo perfectamente <3
    ¡Besos!

    ResponderEliminar
    Respuestas
    1. Pues me alegro de que te venga tan bien. Yo los probé y me funcionan, de hecho uno es el que tengo puesto, así que "supongo" que te irá, aunque a veces en el mundo informático es mucho suponer. Si tienes algún problema con él no dudes en decírmelo y si te puedo ayudar genial.
      Un beso ^^

      Eliminar
  2. Hola!
    Que interesante, no sabia ni que eso se podía hacer jajja
    pero me parece tan complicado...
    Besos

    ResponderEliminar
    Respuestas
    1. Es como todo,es cuestión de ponerse. De todas formas tampoco es algo indispensable para un blog ni mucho menos, así que...
      Besos ^^

      Eliminar
  3. ¡Hola cielo!
    Me parece un tutorial muy chulo y creo que lo voy a poner en prácticas para seguir añadiendo cositas en mi blog.
    Gracias por el tutorial, un besote.

    ResponderEliminar
    Respuestas
    1. Pues me alegra un montón que te guste y si tienes cualquier duda, pregunta, que yo sí te puedo ayudar encantada.
      Besos ^^

      Eliminar
  4. Hola!
    Muy interesante el tutorial, quizás lo lleve a cabo
    ¡Gracias por enseñarnos!

    ResponderEliminar
    Respuestas
    1. Pues me alegro de que te guste y espero que te sirva.
      Un beso preciosa ^^

      Eliminar