Как сделать простой счётчик, отображающий количество просмотров отдельной статьи блога на платформе Blogger?

Счетчик просмотров поста в Blogger (количество показов отдельной статьи)

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

Установка счётчика просмотров статьи

Вы, наверное, уже обратили внимание, на многих сайтах под заголовком или в конце сообщения высвечивается число его просмотров. Это довольно популярная среди вебмастеров вещь. Для сайтов на своем хостинге установить такой счетчик не составляет особого труда. Для пользователей же Blogger из-за отсутствия своего хостинга сделать это было проблематично. Однако на помощь пришел один из сервисов Google – FireBase. Это поставщик облачных услуг, который осуществляет хранение и синхронизацию данных между несколькими клиентами.

Скрипт количества просмотров постов blogspot-блога прекрасно работает на небольших площадках, однако некоторые владельцы высокопосещаемых ресурсов жалуются на его неработоспособность. Всё дело в количестве страниц на блоге и ограничении со стороны Firebase на ежесуточное соединение с базой данных на бесплатном тарифе. Для пользователей есть и платные тарифы с увеличенными лимитами. Пользоваться ими или нет – это ваш выбор. Я лично считаю, что платить за отображение счетчика просмотров статьи не рационально. На момент написания статьи он у меня отображается (см. Скриншот №1). Если вы его сейчас не видите, это означает одно – посещаемость моего блога увеличилась и преодолела лимиты бесплатного тарифа, вследствие чего перестало отображаться число просмотров, а сам виджет был удален за ненадобностью.

Скриншот №1
Скриншот №1

Как установить счетчик просмотров сообщения


Итак, перейдем непосредственно к установке. Для начала нужно зарегистрироваться в Firebase. Для этого необходимо лишь иметь аккаунт в Google. Так как статья написана для пользователей Blogger, который тоже является сервисом Гугл, будем считать, что аккаунт у вас уже есть. Просто переходим на эту страницу и далее выполняем все по пунктам:

1. Создаем новую базу данных


На странице консоли нажимаем кнопку «Добавить проект».

Как создать проект в Firebase?

В появившемся окне заполняем поля нужными значениями. В графе «Название проекта» и «Идентификатор проекта» лучше всего ввести домен своего блога без знаков препинания и других символов, но можете выбрать любое другое название. Если ввести в поле «nazvanie», то URL-адрес проекта с базой данных будет:

https://nazvanie.firebaseio.com

Выделенная красным цветом часть у вас будет своя. Запомните её. Она пригодиться вам позже (пункт №3). Затем в списке выбираем свою страну и нажимаем кнопку «Создать проект». Проект создан. Теперь нужно создать базу данных для счётчика просмотров поста.

Указание нужной информации

Переходим в созданный проект.

Вход в консоль

Нажимаем на кнопку «Начать» в окне «База данных» («Database»).

Главная страница

В консоли управления нажимаем «Создать базу данных».

Кнопка создания базы данных

Поздравляю! База данных создана.

2. Открываем доступ для скрипта


Для того чтобы скрипт мог вносить автоматические изменения в базу, нужно открыть доступ к ней. Для этого переходим на вкладку «Правила». И изменяем правила c "null" или "false" на "true". Должно быть, как на картинке:

Правила изменены

Можете просто скопировать и вставить код:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Жмете «Опубликовать». Теперь доступ открыт.

3. Устанавливаем скрипт счетчика


Заходим в Blogger => Тема => Изменить HTML. После клика мышкой в поле кода нажимаем CTRL+F. Появляется окошко поиска. В него вводим код: <body/> и жмем Enter. Курсор перемещается к искомому тегу <body/>, выше него вставляем скрипт:

<script src='//cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;);
var blogStats = new Firebase(&quot;//nazvanie.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>

Заменяем nazvanie на своё имя базы данных, которое получилось при выполнении пункта №1 и жмем кнопку «Сохранить».

4. Устанавливаем код виджета просмотров в шаблон


Теперь в окошко поиска вводим <data:post.body/> и нажимаем Enter. Сразу после найденного <data:post.body/> вставляем следующий код:

<span style='color:#979797;font-family:Tahoma;margin-left:25px'>Просмотры:</span>
<i class='fa fa-eye'/><a expr:name='data:post.id'/> <span id='postviews'/>

Обратите внимание:

Фрагментов <data:post.body/> может быть несколько. Вам нужен последний из найденных.

Затем нажимаем кнопку «Сохранить». Счетчик количества просмотров будет отображаться в конце статьи. Чтобы расположить счетчик в начале, вставьте указанный выше код не после, а перед <data:post.body/>. Отделить элементы друг от друга можно с помощью тега <br />. Он добавляет разрыв между строками.

Экспериментируйте с расположением, т.к. шаблоны у всех разные, код отличается. К установке нужно подходить индивидуально. Направление я дал. Также можете изменить надпись «Просмотры», поменять цвет с серого #979797 на черный #000 или любой другой.

5. И последнее: подключаем javascript-библиотеку jQuery


На многих шаблонах она уже подключена. Возможно, у вас тоже. Проверьте, есть ли в шаблоне такой код:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>

(вместо цифр 2.1.1 могут быть другие, в зависимости от версии библиотеки). Если такого кода нет, вставьте его перед закрывающимся тегом </head>.

Если все сделано правильно, теперь на каждой странице вашего блога будет красоваться счетчик просмотров поста.