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 = "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><img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="http://entrelibrosytintas.blogspot.com.es/feeds/posts/'+avaimg+'" />'; if(authorUri!="") imgcode = '<a href="http://entrelibrosytintas.blogspot.com.es/feeds/posts/'+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="http://entrelibrosytintas.blogspot.com.es/feeds/posts/'+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>< 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>'); 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>><//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 listavar minComments = 1; // Numero de comentarios minimos que deben de tener los comentariastas para aparecer en la listavar 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 listavar excludeUsers = ["Anonymous", "someotherusertoexclude"]; //elimina los nombre indicados entre comillas, Anonymous elimina los comentarios anonimosvar 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 resizeablevar urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;var urlMyProfile = ''; // set if you have no profile gadget on pagevar 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>