Рейтинги в комментариях Blogger (пошаговая установка)

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

Для иностранных гостей:

The following discussion focuses on how to do the ratings for embedded comments in Blogger. If you do not read in Russian, please click the translator (top of article).

Как правило это выглядит вот так:

Или так:

В системе комментариев Discus тоже есть аналогичная функция и называется "нравится" (like):

Конечно в дискусе представлен самый отсталый вариант функции Comment Voting, но он тоже из той же серии, что и предыдущие.

Все это примеры, а поговорим мы о стандартных комментариях Blogger, тех что идут "из коробки" и сервисе "всяких разных рейтингов" Fruitful Bookmarks.

И как вы скорее всего догадались, в заметке речь пойдёт о том, как сделать рейтинги для встроенной системы комментирования в Blogger/Blogspot.

Себе в блог я уже прикрутил любимые стрелки к каждому комменту, поэтому можно, не стесняясь, нажимать на них.
Скриншот в качестве демо:

Установка.
Если вы ставили к себе в комментарии кнопку "ответить", то весь процесс установки займёт всего несколько минут.
Ставить буду в примере с "нуля" на один из стандартных шаблонов Blogger.

1) Но сначала нужно сходить на страницу проекта с рейтингами для любых CMS и выбрать/найти подходящие. Смотрите те, где написано "Blogger Comments":

Там же получаете "основной" код с идентификатором для своего блога (в "Blogger Comments") :

Код можете скопировать в буфер обмена.
Пролистайте страницу вниз и увидите подсвеченные стили для выбранных рейтингов:

Их мы чуть позже скопируем в шаблон Blogger.

2) Открываем редактор шаблона в админке Blogger, обязательно ставим галку "расширить шаблоны виджета".
Ищем через поиск браузера (ctrl+f) слово "ответить" (если вы раньше делали кнопку ответа для комментариев, тег для поиска: <span class='comment-reply'>) и вставляем после него "основной" код рейтингов (см. выше в шаге 1).

Сориентироваться можно по тегу значка корзины (для удаления комментариев) <b:include data='comment' name='commentDeleteIcon'/> и поставить после него "основной код".

Для того. что бы вы не запутались в шаблоне, я сделал скриншот:

Выделения:
красный - теги-ориентиры
зелёный - тег, после которого нужн поставить "основной код"
жёлтый - основной код рейтингов, который мы взяли на странице Fruitful Bookmarks.

О том, как окно редактора шаблона сделать удобным, читайте в этой статье.

Теперь копируем код стилей (см. выше в шаге 1) и вставляем в свой шаблон (тоже через редактор шаблона из админки Blogger'а) в аккурат перед тегом:

]]>

</b:template-skin>

Должно получиться вот так:

Конечно рейтинги можно поставить и повыше: например, возле надписи "комментирует", поэтому можете поэкспериментировать с шаблоном, направление для поиска я указал.

Спасибо за рейтинги говорим Gene (ru & eng), разработчику и автору сервиса Fruitful Bookmarks. На сегодняшний день - это лучшие виджеты рейтингов/голосов, какие можно придумать для блога (родные блоггеровские звёздочки - traurig Scheiße).

На этом всё, не забудьте нажать на кнопку +1 (справа повыше в сайдаре), твитнуть эту заметку и подписаться на новостную ленту моего блога (если еще не сделали этого), чтобы не пропустить самую актуальную и полезную информацию.