Tworzenie to moja pasja

Tworzenie to moja pasja

czwartek, 5 listopada 2015

Gadżet zliczający najczęściej komentujących.

     Ogłosiłam candy. W związku z tym na moim blogu musiała pojawić się lista top komentujących. Jeśli ktoś chce wiedzieć jak to zrobić zapraszam do lektury.

Poszperałam w necie i poczytałam ile jest sposobów dodawania na blogu tego gadżetu. Wszystkie polegana wklejeniu w wybranym, odpowiednim miejscu kodu HTML.  Najodpowiedniejszym do tego celu – nie tylko według mnie -  jest dół bloga. Na pasku bocznym może być mało miejsca i zbyt długie nicki obserwujących zostaną podzielone, a to nie wygląda ani ładnie, ani ciekawie.
Można wstawić ranking komentujących z ich avatarami (zdjęciami, obrazkami jakie dane osoby załączyły tworząc swój profil) lub bez (będą jedynie nicki, bez zdjęć, czy obrazków). Ja – jak widzicie – wybrałam wariant pierwszy – z avatarami.


Opisywany gadżet wyświetla najczęściej komentujących i w nawiasach ile razy to zrobili.
Każdy może sam zdecydować ile osób ma być na jego liście komentujących, czy 5, czy 10, a może więcej. Mnie interesuje top 10 – tka, dlatego w odpowiednim miejscu wpisałam 10. W każdej chwili można to zmienić.

Zacznijmy od tego gdzie wpisujemy kod: 1. „Układ” -> 2. „Dodaj gadżet” -> 3. klikamy plusik przy „HTML/JavaScript”






4. wyskakuje nam takie okienko 


Uzupełniamy "Tytuł". Wpisujemy np. "Najczęściej komentujący". 
Niżej, w miejscu "Treść" wklejamy skopiowany kod HTML, ten który podałam. 
5. (koniecznie) zapisujemy zmiany klikając: "Zapisz". 

Ja wkleiłam - według opisanej instrukcji - poniższy kod i się sprawdził, ale są też inne - krótsze, za to więcej trzeba w nich zmieniać (np. wpisać nazwę swojego bloga). Tu tylko wpisuje się/zmienia swój nick.
Skopiujcie podany przeze mnie kod, a potem zmieńcie to, co trzeba, czyli swój nick.


<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">
//
// Konfiguracja:
var maxTopCommenters =10;   //
var minComments = 1;        //
var numDays = 0;            //
var excludeMe = true;      
var excludeUsers = ["Anonymous", "Anna Gerszendorf"];     //
var maxUserNameLength = 42; //
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';     
//
var sizeAvatar = 32; // 
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 = ''; 
// koniec konfiguracji
// dla starych 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>


Zwróćcie uwagę, że w 3 miejscach zaznaczyłam coś na czerwono
var maxTopCommenters =10;   //   
- za znakiem = wpisujecie jak długa ma być Wasza lista komentujących, 5, 10 lub więcej pozycji/osób,

var excludeUsers = ["Anonymous", "Anna Gerszendorf"];     //  
- tutaj wpisujecie swój nick, żeby nie zliczało komentarzy dodanych przez Was - administratorów bloga i anonimowych osób ("Anonymous") 

a  var maxUserNameLength = 42; //   
42 oznacza dopuszczalną, maksymalną długość nicków.

     Nie trzeba określać od kiedy gadżet ma zliczać komentujących. Dzięki powyższemu kodowi pokaże interesujące nas statystyki od dnia powstania bloga.

9 komentarzy:

  1. Kiedyś już się zastanawiałam czy nie zmieścić u siebie, ale nie do końca wiedziałam jak :) dziękuję za instrukcję :)

    OdpowiedzUsuń
  2. Matko jedyna !
    Dla mnie to są hieroglify :)

    OdpowiedzUsuń
  3. ja jak nie wiedziałam jak to zrobić napisałam do osoby która to ma i ona mi napisała jak czyli tak jak ty to teraz al e i tak poprosiłam o pomoc siostrzeńca

    OdpowiedzUsuń
  4. :)jestem pierwszy raz (chyba)u ciebie i już tyle się dowiedziałam ;) lecę podziwiać Twoje prace i dziekuje za udział w candy u mnie

    OdpowiedzUsuń
  5. Gdy czytałam opisy jak to zrobić odechciewało mi się, ale po dodaniu tego uważam, że to prościzna. Chociaż najpierw wpisałam inny kod i nie zadziałało. Jestem uparta i dopięłam swego. Kwestia tylko wklejenia skopiowanego kodu i wpisania swojego nicka.

    OdpowiedzUsuń
  6. Super :) dziękuję za ściągę :P też kiedyś szukałam. Przyda się :)

    OdpowiedzUsuń
  7. Witaj!
    Dziękuję bardzo za wzięcie udziału w Candy. Miło mi, ze moja proponowana wygrana tak Ci sie spodobała. Ucieszy Cie bardziej wiadomość, że planuje coś jeszcze dorzucić. Możesz sprawdzić za kilka dni na blogu. Powodzenia życze przy losowaniu i pozdrawiam

    OdpowiedzUsuń
  8. Nawet jestem na tej liście! Pozdrawiam

    OdpowiedzUsuń
  9. Dzięki za instrukcję;) już dawno tego szukałam;)

    OdpowiedzUsuń

Wielkie dzięki za odwiedziny i komentarze! Pozdrawiam Ania (AnGer)! Miłego dnia!