Как сделать счётчик кликов для Blogger
Шаг 1. Создать базу для хранения показаний счётчика
Зарегистрироваться на сайте:
https://www.firebase.com
Это совершенно бесплатно и настолько же удобно, как пользоваться самим блогом.
После регистрации ты сможешь создать новую базу:
Для создания базы нажми на кнопку “CREATE NEW APP”. Замечу, что в данном примере одна эта база сможет обслуживать и рассчитывать количество нажатий только на одну кнопку. Поэтому называй базу соответственно.
После этого ты получишь ссылку к своей базе “APP URL”. Эта ссылка тебе понадобится. В моем примере ссылка получилась: 'https://doconomist.firebaseio.com/'. У тебя будет твоя ссылка.
https://www.firebase.com
Это совершенно бесплатно и настолько же удобно, как пользоваться самим блогом.
После регистрации ты сможешь создать новую базу:
Для создания базы нажми на кнопку “CREATE NEW APP”. Замечу, что в данном примере одна эта база сможет обслуживать и рассчитывать количество нажатий только на одну кнопку. Поэтому называй базу соответственно.
После этого ты получишь ссылку к своей базе “APP URL”. Эта ссылка тебе понадобится. В моем примере ссылка получилась: 'https://doconomist.firebaseio.com/'. У тебя будет твоя ссылка.
Шаг 2. Работа в меню Блоггера
Зайди в меню блога > Шаблон > Изменить HTML
Появится редактор с кодом. С ним работать нужно осторожно, чтобы не навредить внешнему оформлению блога.
Совет: для навигации по коду используй поиск по тексту, нажми Ctrl+F для вывода окошка поиска:
Появится редактор с кодом. С ним работать нужно осторожно, чтобы не навредить внешнему оформлению блога.
Совет: для навигации по коду используй поиск по тексту, нажми Ctrl+F для вывода окошка поиска:
До тега </body> вставь код:
<script>
var x = new Firebase('https://doconomist.firebaseio.com/');
x.on('value', function f(s) {
$('#counting').text(0 + s.val());
});
$('#btn').click(function() {
x.transaction(function(current_value) {
return current_value + 1;
});
});
</script>
В этом коде 'https://doconomist.firebaseio.com/' – это адрес базы, которую ты создал. Замени его на свой.
После тега <head> вставляешь код:
Код для HTML-странички выглядит так:
После тега <head> вставляешь код:
<!-- Firebase Script -->
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Код для HTML-странички выглядит так:
<div id="counting">
0</div>
<button id="btn">Добавить +1</button>
</div>
Получится кнопка типа этой:
0
Этот номер сверху и есть счётчик, который можно увеличивать сколько угодно раз, нажимая на кнопку. Результат появится на странице мгновенно.
Бонус: ты можешь зайти по ссылке (у меня это 'https://doconomist.firebaseio.com/') и увидеть результат своих стараний:
А кто знает, как можно усовершенствовать данный метод? Есть наверняка способ использовать всего один проект для хранения всех переменных в firebase?
ОтветитьУдалитьЗнатоки, жду ваших ответов)