Счетчик просмотров поста в Blogger (количество показов отдельной статьи)
Здравствуйте, дорогие читатели блога Votix.ru! В сегодняшней статье я расскажу, как добавить счетчик количества просмотров для сообщений в Blogger, который будет отображать число посещений (обновлений страницы) отдельно для каждой статьи вашего блога.
Вы, наверное, уже обратили внимание, на многих сайтах под заголовком или в конце сообщения высвечивается число его просмотров. Это довольно популярная среди вебмастеров вещь. Для сайтов на своем хостинге установить такой счетчик не составляет особого труда. Для пользователей же Blogger из-за отсутствия своего хостинга сделать это было проблематично. Однако на помощь пришел один из сервисов Google – FireBase. Это поставщик облачных услуг, который осуществляет хранение и синхронизацию данных между несколькими клиентами.
Скрипт количества просмотров для блогов Blogger прекрасно работает на небольших площадках, однако некоторые владельцы высокопосещаемых ресурсов жалуются на его неработоспособность. Всё дело в количестве страниц на блоге и ограничении со стороны Firebase на ежесуточное соединение с базой данных на бесплатном тарифе. Для пользователей есть и платные тарифы с увеличенными лимитами. Пользоваться ими или нет – это ваш выбор. Я лично считаю, что платить за отображение счетчика просмотров статьи не рационально. На момент написания статьи он у меня отображается (см. Скриншот №1). Если вы его сейчас не видите, это означает одно – посещаемость моего блога увеличилась и преодолела лимиты бесплатного тарифа, вследствие чего перестало отображаться число просмотров, а сам виджет был удален за ненадобностью.
Как установить счетчик просмотров сообщения
Итак, перейдем непосредственно к установке. Для начала нужно зарегистрироваться в Firebase. Для этого необходимо лишь иметь аккаунт в Google. Так как статья написана для пользователей Blogger, который тоже является сервисом Гугл, будем считать, что аккаунт у вас уже есть. Просто переходим на эту страницу и далее выполняем все по пунктам:
1. Создаем новую базу данных
На странице консоли нажимаем кнопку «Добавить проект».
В появившемся окне заполняем поля нужными значениями. В графе «Название проекта» и «Идентификатор проекта» лучше всего ввести домен своего блога без знаков препинания и других символов, но можете выбрать любое другое название. Если ввести в поле «nazvanie», то URL-адрес проекта с базой данных будет:
https://nazvanie.firebaseio.com
Выделенная красным цветом часть у вас будет своя. Запомните её. Она пригодиться вам позже (пункт №3). Затем в списке выбираем свою страну и нажимаем кнопку «Создать проект». Проект создан. Теперь нужно создать базу данных для счётчика просмотров поста.
Переходим в созданный проект.
Нажимаем на кнопку «База данных» («Database»).
В консоли управления переходим к пункту «Realtime 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($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews');
var blogStats = new Firebase("//nazvanie.firebaseio.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', 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('name');
isnew = true;
}
elem.text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').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>.
Если все сделано правильно, теперь на каждой странице вашего блога будет красоваться счетчик просмотров поста.