12 mars 2013

Gadget Top Commentateurs Avec Image Pour Blogger

Widget Top Commentateur
Ajouter le "Widget Top Commentateurs Avec Image" dans Blogger Blogspot.
Le but du gadget "Top Commentateurs" est très simple : il affiche sur toutes les pages de votre blog le classement des lecteurs et lectrices qui interagissent le plus sur votre blog: les internautes qui ont posté le plus de commentaires, en affichant leur image personnalisé s'il en ont un, ou l'avatar par défaut sinon, avec un lien vers le profil de cette commentateur ce qui pourrait provoquer vos visiteurs à poster plus de commentaire pour apparaitre dans le Top des Commentateurs.


Démonstration :
Voici une capture d'écran du résultat final :

Top Commentators

Ajouter Le Gadget Top Commentateurs Avec Image Dans Blogger

Le Widget "Top Commentateurs" est très simple à installer et très fonctionnel;
Pour l'intégrer à votre blog, accédez à "Mise En Page" > "Ajouter Un Gadget" > "HTML/JavaScript"
et copier/coller le code suivant :
<style type="text/css">
.top-commenter-line img {
height: 40px; //Hauteur de l'avatar
width: 40px; //largeur de l'avatar
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.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">
var maxTopCommenters = 5;   // Nombre de commentateurs à afficher
var minComments = 1;        // Nombre minimum de commentaires pour être affiché
var numDays = 0;            // Depuis combien de jours (ex. 30), ou 0 pour "toute la période"
var excludeMe = true;       // true: inclure les commentaires de l'admin
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // inclure ces noms d'utilisateurs
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 = 56;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6lJrtHapNqgxZXzSatnA_981zsZTBXZZYViiNrD8tzp71CFHyJKXy-YVUEY9rJ7EM-CgUSkXsJ1bwqqfxzWOykvEs5C3glnCzjug6ju21YTA6NOYufY5s9O1IUFTCUtKgvp2SYtszxo/"+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;
      }
  }

  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.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>
Cliquer sur "Enregistrer".
Le widget "Top Commentateurs Avec Image" est installé maintenant sur votre blog.

28 commentaires:

  1. Ezar Dini Ahmad14 mars 2013 à 03:44

    That is great!!. Many thanks from Indonesia my friends :)

    RépondreSupprimer
  2. Super! Merci... par contre je me suis retirée car sinon, c'est pas drôle, j'étais la 1ère ;)

    RépondreSupprimer
  3. Comment faire pour se retirer (auteur) du blog? Merci

    RépondreSupprimer
  4. var excludeMe = true
    remplacer true par false

    RépondreSupprimer
  5. Cela ne marche pas, j'ai fais ceci:

    var excludeMe = false; // true: inclure les commentaires de l'admin

    RépondreSupprimer
  6. Merci pour l'astuce du Widget Top Commentateurs je vais testé ça de suite sur un de mes sites.

    RépondreSupprimer
  7. Bonjour,
    excellent ce gadget.
    Est-il possible que ceux qui déposent des commentaires et qui n'ont pas de compte google puissent afficher un avatar ou une photo leur correspondant.
    Ça serait plus joli le gadget top commentateurs.
    merci

    RépondreSupprimer
  8. Bonjour,
    Le gadget fonctionnait très bien mais depuis hier il n'apparait plus.
    J'ai effacé et recopié le code mais rien de mieux.
    Je précise que hier j'ai supprimé un commentaire, je ne sais pas si ça a quelque chose à voir.

    RépondreSupprimer
  9. Re,
    C'est revenu sans rien faire

    RépondreSupprimer
  10. Bonjour,
    j'ai beau remplacer true par false, j'apparais toujours dans le classement.

    RépondreSupprimer
  11. Hello

    Je sais pas si ça peux t'aider mais moi pour m'enlever j'ai mis mon pseudo à la variable "var excludeUsers". J'ai ajouté mon pseudo après ça!

    Bon courage!

    RépondreSupprimer
  12. Après quelques tâtonnements, j'y suis arrivé.
    Merci à toi

    RépondreSupprimer
  13. Aucunement capable de le faire fonctionner.

    :(

    RépondreSupprimer
  14. Çà ne fonctionne pas chez moi ! avez vous une solution ? merci

    RépondreSupprimer
  15. j'aimerai bien de mettere un service de commentaire dans mes site
    cartoonitos.net
    http://al3ab-3arab.net

    RépondreSupprimer
  16. -Hello guys check out this new entertainement website and watch all your favorite MOVIES, TV-SHOWS, SPORT STREAMS and way more all in HD at https://olympus.live

    RépondreSupprimer