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

Блогопоиск совместно с 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 и замените текущие правила на следующие (см. анимацию ниже):

{ "rules": { ".read": true, "url": { "$url": { ".read": true, ".write": "!data.exists()" } }, "count": { "$url": { ".read": true, ".write": "!data.exists() || (newData.val() === data.val() + 1 && !root.child('votes').child($url).child(auth.uid).exists()) || (newData.val() === data.val() - 1 && root.child('votes').child($url).child(auth.uid).exists())" } }, "votes": { "$url": { "$uid": { ".read": true, ".write": "!data.exists() || $uid === auth.uid" } } } } }

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

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

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

<script src='//static.graddit.com/js/like/like.min.js'></script>

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

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