Альтернатива гаджета активных читателей блога.

Доброго времени суток, уважаемые читатели, друзья и гости блога. Хочу показать вам сегодня, как можно вывести на статичную страницу самых активных участников блога. Будут отображены аваторы участников в стиле polaroid, количество оставленных комментариев. Да и вообще оригинально смотрится на статичной странице.
Попрошу посмотреть как это выглядит здесь. При малом количестве отзывов в блоге, код может не работать. Но если у вас достаточно комментируемый блог, всё отобразится корректно, именно так, как вы видели.

Сразу должна заострить ваше внимание на одной важной детали. При установке кода самых активных читателей на статичную страницу нужно сначала дать её название и сразу перейти в редакторе в режим HTML. Вставляем код и сразу публикуем. Не нужно обратно переходить в обычный режим. Иначе результата не будет. Код просто напросто "сломается".

Копируйте код к себе в блокнот, чтобы сделать несложные настройки.

<style type="text/css">
.cm-person{margin:3px;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px; border: 1px solid #F6CEE3; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}
.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}
.cm-person a.profile-name-link.item1{background-color:#BC0000}
.cm-person a.profile-name-link.item2{background-color:#1A00CE}
.cm-person a.profile-name-link.item3{background-color:#39A003}
.cm-person a.profile-name-link.item4{background-color:#8B039D}
.cm-person a.profile-name-link.item5{background-color:#F0C100}
.cm-person a.profile-name-link.item6{background-color:#00D1CB}
.cm-person a.profile-name-link.item7{background-color:#FFEA03}
.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}
.cm-person:hover{color: #FFF;background-color:#111}
.cm-person:hover a.profile-name-link{display:block}
.comments {display: none;}
</style>
<script type="text/javascript">
//<![CDATA[
var homepage = 'http://poluhka.blogspot.ru/ ',
  maxTopCommenters = 77,
  minComments = 1,
  numDays = 0,
  excludeMe = true,
  excludeUsers = ["Анонимный", "Автор"],
  maxUserNameLength = 42,
  txtTopLine = '[image] [user]',
  txtNoTopCommenters = 'No top commentators at this time.',
  txtAnonymous = '',
  sizeAvatar = 80,
  cropAvatar = true,
  urlNoAvatar = 'http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s' + sizeAvatar + '/avatar_blue_m_96.png',
  urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
  urlMyProfile = '',
  urlMyAvatar = '';
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 = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" 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 item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  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);
      var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
      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="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
    return
  }
  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
  });
  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(replaceTopCmtVars(txtTopLine, item, realcount + 1));
    realcount++
  }
  if (!realcount) document.write(txtNoTopCommenters)
}
document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
//]]>
</script>


В строке, которая выделена красным вставьте адрес своего блога. И корректируйте анонимный, автор, как вам захочется. Если не хотите чтобы отображался ваш профиль - удалите "Автор".

Вот, собственно и все настройки. Будьте внимательны ко всем символам в коде. Если ещё и изменить дизайн самой страницы, о чём шла речь в этом сообщении, и покопаться в стилях CSS, то вообще всё будет просто супер.

И сегодня у меня всё. Все удачи и до новых встреч.

Идеей поделилась Amatullah Syukur, автор блога http://www.tipstrikblogging.com/. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


12 комментариев:

  1. Очень интересно, ещё бы пример где нибудь глянуть, как это выглядит.

    ОтветитьУдалить
    Ответы
    1. Саша, так я в начале статьи ссылку дала для наглядного примера. Вроде рабочая, проверила.

      Удалить
  2. Вика, а просто читателей не показывает? Только комментаторов? потому что они данные своего профиля вводят, да?

    ОтветитьУдалить
    Ответы
    1. Yana Yar-kaya, нет всех не показывает, только самых активных.

      Удалить
  3. Такая оригинальная фишка.. Смотрится здорово!

    ОтветитьУдалить
    Ответы
    1. Согласна с тобой. Твой аватор на фото попал.

      Удалить
    2. Картинка с мотыльком не отображается? Странно, вижу ее сейчас здесь в коментах..

      Удалить
    3. Нет, Наташа. Всё отображается. Я имела в виду твоего мотылька на первой фотографии к посту. Попала.

      Удалить
    4. Все равно не поняла где))
      Может, глюк какой приключился..
      Мой первый комент сегодня повторно сам здесь возник, сплошная мистика)

      Удалить
    5. Наташа, всё нормально нет глюков. На фото, которое под названием этого поста.

      Удалить
    6. Все, уяснила. Тут одно из двух.. Либо radikal шалит, либо.. снова не понимаю)

      Удалить
  4. Этот комментарий был удален автором.

    ОтветитьУдалить

Пользовательский поиск