Top komentatorzy - dwa gadżety

Jeśli prowadzisz blog, na którym aktywność czytelników jest rzeczą istotną czy pożądaną, być może pragniesz mieć gadżet "Ranking komentatorów" pokazujący nicki najaktywniejszych komentatorów, ilość napisanych komentarzy oraz ich avatary (avatar to obrazek załączony do profilu. Warto go mieć, by być bardziej rozpoznawalnym na forach czy wśród komentujących), możesz skorzystać z kilku niezbędnych wskazówek oraz kodu HTML, by w mgnieniu oka cieszyć się nowym gadżetem. Wygląda on tak:

Ilość komentatorów na liście można ustalić wg własnego uznania. Moja lista składa się akurat z dziesięciu pozycji, ale ilość tę możesz zmienić w wierszu varvar maxTopCommenters =10;   // , co zaznaczyłam na żółto. Zresztą wszystko, co znajdziesz w poniższych kodach i jest zaznaczone na żółto (bo mam jeszcze inny gadżet do zaproponowania), możesz zmienić wg potrzeb.
Z kolei ta część kodu, która jest oznaczona czerwoną czcionką oznacza, że w to miejsce koniecznie trzeba wstawić albo własny nick, albo adres swojego bloga. Celowo pozostawiam moje ustawienia w kodach, gdyż wydaje mi się to czytelniejsze. Widząc zaznaczone miejsca, po prostu dokonaj odpowiednich zmian.

Pierwszy kod jest baaardzo długi, ale to nic nie szkodzi. By się nie pogubić najlepiej skopiuj go do dokumentu tekstowego i tam dokonaj zmian. Będą one dotyczyły właściwie tylko dwóch lub trzech właściwości:

• długość listy (ilość komentatorów)
• czyje komentarze nie mają być brane pod uwagę. Gadżet domyślnie pomija komentatorów anonimowych oraz autora bloga     var excludeUsers = ["Anonymous", "Anika"];     //  Dlatego właśnie należy wstawić własny nick
• maksymalna długość nicku komentatora. Domyślna wartość to 42 znaki, ale w pewnych przypadkach może się okazać, że to za dużo. Zatem wiersz  var maxUserNameLength = 42; // należy zmienić w razie takiej konieczności. Po co i dlaczego? Za chwilę to zilustruję.

I to są wszystkie zmiany, jakie należy wprowadzić w kodzie i gadżet jest już gotowy! Wystarczy go wstawić do bloga. A jak? Podaję na końcu, bo jest jeszcze drugi gadżet prezentujący komentatorów, który wstawia się tak samo.

Oto pierwszy kod HTML gadżetu "Ranking komentatorów", który pokazałam na początku:


<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", "Anika"];     //
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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfA5tknM5ROSiRAnWVdI6k8rqT8RrmnHn4S0hgUHw_v69VgFoAx0Qzpr0ELjFSV2K8C7on5Oq2RZ2JBu99neNXN4BRYfGJhE_H-HokrMfpSmM0k2F-erHUr89sQKmScSh_9y6iG1yKDSE/"+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>


W zależności od tego, w którym miejscu na stronie umieścimy gadżet, okazuje się, że nie zawsze wygląda tak, jakbyśmy chcieli. Wycinek powyżej pokazuje gadżet, który był umieszczony na dole strony, pod postami. Dzięki temu nawet bardzo długi nick zmieścił się w jednej linii. Natomiast ten sam gadżet wstawiony do bocznej kolumny wygląda już gorzej:

Widżet "Ranking komentatorów" - zbyt długi nick nie zmieścił się w jednej linii

Długi nick komentatora nie zmieścił się i zepsuł układ wchodząc pod avatar.
Właśnie w takich przypadkach, gdy nie ma zbyt dużo miejsca na ów gadżet (kolumna boczna), warto zmniejszyć domyślną maksymalną długość nicku komentatora, by jednak zmieścił się obok avatara :

Widżet "Ranking komentatorów"- zbyt długi nick został skrócony i teraz mieści się w jednej linii obok avatara

***********

Drugi gadżet jest skromniejszy, gdyż pokazuje wyłącznie nicki komentatorów oraz liczbę napisanych komentarzy. Wygląda tak: 

Gadżet "Top komentatorzy" - wygląd po instalacji

O ile w poprzednim kodzie nie było potrzeby wstawienia adresu własnego bloga, o tyle tutaj jest to konieczne. No, chyba, że listę Top komentatorów z danego bloga zechcemy mieć na innym. Tutaj także można wykluczyć własny nick, przez co nasze odpowiedzi na komentarze nie będą brały udziału w rankingu. Istnieje też możliwość wstawienia drugiego wykluczonego nicku, np. w przypadku, gdy jest dwóch autorów bloga lub, z jakiegoś powodu nie chcemy, by konkretny komentator znalazł się na liście. Gadżet domyślnie pomija komentatorów anonimowych.
Oczywiście, przed wstawieniem kodu do swojego bloga należy dokonać zmian we fragmentach kodu zaznaczonych na czerwono i, ewentualnie, na żółto.

Oto kod HTML drugiego gadżetu "Top komentatorzy"


<!-- Top commentators widget v1 Start -->
<script type="text/javascript">
function getYpipe(feed) {
 document.write('<ol>');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
 var href = "'" + feed.value.items[i].link + "'";
 if(feed.value.items[i].link == "")
var item ="<li>" + feed.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ol>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.inspirujacacodziennosc.blogspot.com
 &ExcludedNick1=Anika
 &ExcludedNick2=    
 &ShowHowMany=10
 &_callback=getYpipe
 &_id=23022d7836bf2dd3c10a329feb9be26a
 &_render=json"
type="text/javascript"></script>
<span style="font-size:80%; float:right;">Get this <a href="http://www.inspirujacacodziennosc.blogspot.com/2009/06/creating-top-commentator-widget-in.html">widget</a></span>
<!-- Top commentators widget End -->

 

Jak wstawić gadżet w postaci kodu HTML do Bloggera? 

Oto ścieżka:

• wejdź w                Układ
• kliknij                   Dodaj gadżet
• znajdź na liście     HTML/JavaScript ,  kliknij  +
• w otwartym okienku  "Treść" wstaw kod HTML .  Możesz, ale nie musisz nadać tytuł gadżetu
• zapisz 

O tym jak wstawić gadżet "Ostatnie komentarze", dzięki któremu widoczne są (w jednym miejscu, np. w kolumnie bocznej strony) fragmenty ostatnio opublikowanych komentarzy, a kliknięcie w link autora komentarza automatycznie przenosi do konkretnego wpisu - pisałam tutaj.

458 075

gadżet top komentatorzy, wstawić gadżet do bloggera, widget komentatorzy, widżet top komentatorzy, kod HTML gadżet