piątek, 21 lutego 2014

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 = "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>



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


47 komentarzy:

  1. Dziękuję bardzo.
    Skorzystałam z pierwszego sposobu komentowania.
    Działa :-)

    OdpowiedzUsuń
  2. Wpisałam kod i wszystko działa bez problemu! Na prawdę fajnie ( łopatologicznie ) opisane. Szukałam na wielu stronach i nigdzie nie mogłam się połapać . A tutaj od razu zadziałało! To jest dobra strona o takich rzeczach.... po prostu dla ludzi nie dla informatyków z głowami 6 na 9 :)

    OdpowiedzUsuń
  3. Skorzystałam i udało się ! świetnie wytłumaczone co i jak :) a czy wiesz może jak wstawić 2 nicki, żeby się nie wyświetlały ? w sensie jak je oddzielić ? kiedyś miałam inny nick niż teraz i Beti G. nie wyświetla, ale już Beata G. owszem...

    OdpowiedzUsuń
    Odpowiedzi
    1. W drugim gadżecie nie ma z tym żadnego problemu - przewiduje on dodanie drugiego nicku, o tutaj:

      YourBlogUrl=http://www.inspirujacacodziennosc.blogspot.com
      &ExcludedNick1=Anika
      &ExcludedNick2=Anika2

      A w pierwszym gadżecie pokombinowałabym tak (choć nie próbowałam):

      var excludeUsers = ["Anonymous", "Anika", "Anika2"]; //
      var maxUserNameLength = 42; //

      Pozdrawiam i dziękuję za komentarz

      Usuń
  4. Już mi się udało :D w sumie to takie proste, wystarczyło pomyśleć logicznie

    OdpowiedzUsuń
  5. Wkleiłam ale wyświetla mi sie napis No top commentators at this time.
    Da się tak ustawić żeby były brane komentarze np z trzech miesięcy ostatnich ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Moim zdaniem gadżety nie mają limitów czasowych - powinny wyświetlać się listy komentatorów z liczbą komentarzy z całego okresu trwania bloga. Może coś poszło nie tak? Sprawdź czy zmieniłaś wszystko jak należy i wklej jeszcze raz. Czasami też Google lub przeglądarki mają jakieś problemy, więc tym bardziej trzeba powtórzyć, żeby zaskoczyły :-). Pozdrawiam

      Usuń
  6. Bardzo przydatny post. Dziękuję.

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że moje wyjaśnienia są zrozumiałe :-) Pozdrawiam

      Usuń
  7. U mnie liczba komentarzy nie zmienia się. Jaka była na początku taka jest po kilku miesiącach. Coś nie działa, ale co?

    OdpowiedzUsuń
    Odpowiedzi
    1. A czy jesteś pewna, że osoby na Twojej liście dodawały następne komentarze? Jeśli dodawały, liczba komentarzy się nie zmienia to chyba musisz jeszcze raz sprawdzić zmiany w kodzie HTML (najlepiej zrobić "od nowa"). Pozdrawiam

      Usuń
  8. Hej :) Od dawna chciałam mieć ten gadżet na swoim blogu i dzięki Tobie mi się to udało. :) Bardzo, bardzo dziękuję! :)

    OdpowiedzUsuń
  9. Świetnie :) w koncu mam taki ładny gadżet ! obserwuje super blog :)

    OdpowiedzUsuń
  10. bardzo długo szukałam tego gadżetu, dziękuję :)

    OdpowiedzUsuń
  11. fajnie pokazane krok po kroku, super pomoc, dzięki

    OdpowiedzUsuń
  12. Super gadżet, dziękuję :-)
    pozdrawiam serdecznie

    OdpowiedzUsuń
  13. Mi ten gadżet źle liczy komentarze nie wiem czemu:(

    OdpowiedzUsuń
    Odpowiedzi
    1. Przykro mi, znawcą od tych spraw to ja nie jestem. Jeśli uważasz, że liczba komentarzy danego użytkownika jest niewłaściwa (za mała), to ewentualnie sprawdź, czy ów użytkownik nie zmienił swojej nazwy (np. 3 komentarze jako Ala, a następne 4 jako np. ala, ALA itp.) - tylko coś takiego przychodzi mi do głowy. Pozdrawiam

      Usuń
    2. Dzięki. Niestety mam osoby które maja wiecej komentarzy a nie ma ich wogóle na liscie

      Usuń
    3. Ale nie masz na myśli anonimowych komentatorów? Bo oni są wyłączeni z gadżetu

      Usuń
  14. Drugi świetnie działa! Bardzo dziękuję :)

    OdpowiedzUsuń
  15. tego właśnie szukałam ! :) dziękuję wszystko działa tak jak trzeba :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że gadżet się przydaje. Pozdrawiam :-)

      Usuń
  16. Wstawiłam gadżet, fantastycznie to wyjaśniłaś, tylko nie mogę zrobić jednego, wyrównać do lewej ;) Pomożesz?
    http://lustro-rzeczywistosci.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Spróbuj ponownie zainstalować ten gadżet - jak dotąd nie spotkałam się z takim zjawiskiem niewyrównania do żadnej ze stron. A może przyczyna tkwi w czcionce? Pozdrawiam

      Usuń
  17. Moja Droga, a jak w pierwszym kodzie zmienić liczbę komentarzy nie na cały okres, a jedynie na miesiąc? :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Żebym to ja znała język HTML...
      var numDays = 0 ten fragment może oznaczać nieograniczony czas, ale to pewnie niejedyne miejsce dot. czasu. Jak oznacza się miesiąc? Nie mam pojęcia

      Usuń
    2. Dzięki za to, że chociaż odpisałaś :)

      Usuń
  18. dzięki. W końcu mam moich komentatorów, trochę się pobawiłam, ale jest :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Fajnie, ze się udało :-)

      Usuń
    2. Nawet dwa razy się udało :) Musiałam raz usunąć, ale drugi raz już bez problemu dodałam i bez zabawy :)

      Usuń
  19. A jak zrobić, żeby zliczało tylko np. z ostatnich 30 dni?

    OdpowiedzUsuń
  20. dzięki, powróciłam do tego gadżetu ;)

    OdpowiedzUsuń
  21. u mnie nie działa ;( próbowałam oba wpisać ;(

    OdpowiedzUsuń
  22. Mam pytanko :) Czy można w tym kodzie pierwszym zabalować tak, aby ukazywał np. TOP komentatorów z jakiegoś okresu czasu? :)

    OdpowiedzUsuń
  23. Działa! Normalnie działa! Dzięki serdeczne! :)))

    OdpowiedzUsuń
  24. Dziękuję! Wszystko mi wyszło. Doskonałą instrukcja. Pozdrawiam

    OdpowiedzUsuń
  25. Dziękuję!
    Bardzo pomogło mojemu blogowi

    OdpowiedzUsuń