Стильный виджет лайков для блога

Опубликовано:
Блогопоиск совместно с Graddit представляют новый стильный виджет лайков для Блоггера. На этот раз ничего лишнего, только красота!

Для установки вам понадобится учётная запись GMail, потому что все данные о голосах будут храниться в вашей собственной базе данных в облачном сервисе Google Firebase. Приступим к установке.

Сначала вам нужно создать новый проект в Firebase. Если коротко, Firebase — это облачный сервис от Google, в котором в числе прочего есть база данных. Бесплатный план очень щедрый, для обычного блога его хватит с большим запасом.

Чтобы создать базу данных, перейдите на сайт Firebase и нажмите кнопку GET STARTED FOR FREE:

Затем CREATE NEW PROJECT:

В Project name укажите название проекта, можно просто "like". Выберите страну и нажмите CREATE PROJECT:

Затем нужно разрешить посетителям записывать данные о лайках. Для этого перейдите в пункт Authentication, затем в закладке SIGN-IN METHOD разрешите Anonymous:

Следующим шагом добавьте правила для чтения и записи данных посетителями. Этот шаг не обязательный, но лучше всё же прописать правила, это позволит избежать злонамеренной перезаписи информации о голосах. Для этого в пункте Database перейдите к закладке RULES и замените текущие правила на следующие (см. анимацию ниже):


И последнее, что нужно сделать в Firebase — скопировать ключи доступа к базе данных:

Ключи доступа нужно будет вставить позже в специальное поле на странице рейтингов. Перейдите на неё и выберите понравившийся виджет:

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

<script src='//static.graddit.com/js/like/like.min.js'></script>
И, наконец, добавить сам виджет. Это может быть как одиночный виджет, добавленный в текст поста, так и виджет для всех постов сразу. Для того, чтобы добавить виджет ко всем постам, возьмите код для Блоггера (не HTML) и добавьте в шаблон после тэга <data:post.body/>. Помните, что таких тэгов в шаблоне может быть несколько (это зависит от шаблона), так что убедитесь, что вы выбрали правильное место:

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