Виджет последних комментариев с аватарами (Blogspot)

blogger comments
Этот виджет, в отличие от аналогичных, отображает не только комментарии, но ещё и аватары участников дискуссии. Разумеется, эти юзерпики (аватары) берутся по блогспотовским правилам - только у участников Google Friend Connect. Остальные довольствуются изображением, которое вы определите использовать по умолчанию в настройке виджета.
Скрипт, используемый в виджете, был разработан сайтом www.way2blogging.org и адаптирован под использование на обновлённой системе комментариев Blogger.

Вместо демо вы можете посмотреть на страницу последних обсуждений, которую я сделал на базе этого виджета, чтобы случайно не пропустить какой-либо оставленный на блоге комментарий.

Код виджета:
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 45,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 140,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js" type="text/javascript">
</script>
<script src="http://blogger.omg-linux.ru/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=25" type="text/javascript">
</script>

Расшифровка:
  • С 1ой по 8ую строку - CSS часть
  • С 9ой по 21ую строку - скрипт настройки виджета
  • С 22ой по 25ую строку - ссылки на скрипт виджета w2b-recent-comments-w-gravatar.js (находится на хостинге) и на rss енту последних комментариев блога

Настройка:
  1. numComments = 45 //число одновременно выводимых комментариев на странице, ограничивается указанным в rss ленте числом записей (см. ниже)
  2. showAvatar = true //показывать аватар
  3. avatarSize = 60 //размер (ширина x высота) аватара
  4. roundAvatar = true //закруглить аваар
  5. characters = 140 //максимальное число знаков в одном комментарии
  6. defaultAvatar //ссылка на аватар по умолчанию
  7. hideCredits //убрать ссылку разработчика
  8. http://blogger.omg-linux.ru/feeds/comments/default?alt=json&;amp;callback=w2b_recent_comments&max-results=25 //вместо моего доменного имени подставить своё, в max-results= указать число выводимых комментариев (см. пункт 1)

Установка
.
Весь код в готовом виде (с исправленными опциями) можно поместить в html гаджет Blogger'а или на статическую страницу, как это сделал я.

В целях сео-оптимизации рекомендую при установке в html гаджет/виджет:
  • CSS часть виджета перенести в CSS часть шаблона
  • Ссылку на скрипт w2b-recent-comments-w-gravatar.js вставить в шаблон перед тегом </head>

Источник.

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

  1. Выглядит очень красиво и аккуратно

    ОтветитьУдалить
  2. Может я что то намудачил, но у меня не очень хорошо отображается. Я имею ввиду комментарии тех, у кого нет аватары...

    ОтветитьУдалить
  3. Поставь картинку для дефолтовых аватар.
    Кстати, я использую другой скрипт в "прямом эфире".

    ОтветитьУдалить
  4. Та это я понимаю, где (куда) эту иконку добавлять, можешь подробнее сказать?

    ОтветитьУдалить
  5. Так "defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" " - это ссылка на дефолтовый аватар.

    ОтветитьУдалить
  6. Всем, у кого проблемы со скриптом:
    заменить ссылку http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js
    на http://bloggerndch.googlecode.com/files/w2b-recent-comments-w-gravatar.js.txt

    ОтветитьУдалить
  7. Ой спасибо огромное!!!!
    Гораздо лучше родного и глючного.

    ОтветитьУдалить
  8. Будет ли работать этот скрипт, если у меня на блоге установлен Дискус?

    ОтветитьУдалить
  9. Нет конечно, он тянет фид с /feeds/comments/default на блоге.
    Вы можете взять фид от дискуса, если там найдёте подходящий, и подставить в код виджета.
    Так же фид от дискуса можно транслировать с помощью этого скрипта http://blogger.omg-linux.ru/2012/02/feedek-jquery-rss-plugin.html.
    Варианты есть, можно поэкспериментировать.

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