Счетчик скачиваний файлов

Всем привет, дамы и господа! Наша тема на сегодня - Счетчик скачиваний файлов. Я покажу вам, как создать счетчик скачиваний файлов с помощью онлайн инструмента Firebase. Firebase это - база данных, инструмент будет рассчитывать и отображать статистику загрузки, когда посетитель загружает ваш файл с вашего блога.

Все данные будут хранится на вашем бесплатном аккуанте Firebase.

Бесплатно можно хранить 5 ГБ данных, что в нашем случае это больше чем требуется.

Как создать счетчик загрузок файлов с базой данных Firebase

Для хранения данных статистики скачивания файлов, Вы сначала должны создать бесплатный аккаунт на Firebase. Для этого зайдите на страницу регистрации.

Заполните простую форму, как только ваша учетная запись будет активирована, Вы должны создать свою первую базу данных Firebase. В вашем аккаунте Вы увидите такое окошко:

Дайте вашему Firebase краткое имя. В моем случае я назвал его blogstats. Это имя будет использоваться в качестве уникальной идентификации базы. Далее, как только будет создана ваша первая база данных, скопируйте Firebase URL.

Установка счетчика загрузок файлов в Blogger

Зайдите в панель инструментов Blogger - Шаблон - Изменить HTML. Находим тег </b:skin> и нажмите черную стрелку, чтобы развернуть код:

Чуть выше тега </b:skin> вставьте код:

/*----- download counter-----*/
.mbtloading {
background: url('http://4.bp.blogspot.com/-PZMStRDcchY/USOp3xFp4yI/AAAAAAAAJOo/rm5FSsaSKh0/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.blog-stats {
color: #289728;
font: bold italic 18px georgia, arial;
float: right;
}

Здесь, вы можете изменить цвет # 289728 и размер числа счетчика. Следующий шаг. Найдите тег </body> (обычно в конце шаблона) и над ним вставляем код:

<!-- Download Counter starts-->
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;[data-download-count=true]&#39;), function (i, e) {
var elem = $(e).parent().find(&#39;#download-count&#39;).addClass(&#39;mbtloading&#39;);
var id = $(e).closest(&#39;.post-body&#39;).siblings(&#39;a[name]&#39;).attr(&#39;name&#39;) + &quot;-&quot; + $(e).attr(&#39;id&#39;);
var downloadStats = new Firebase(&quot;https://blogstats.firebaseio.com/downloads/id/&quot; + id);
var data = {}, isnew = false;
downloadStats.once(&#39;value&#39;, function (snapshot) {
data = snapshot.val();
if (data == null) {
data = {};
data.value = 0;
data.url = window.location.href;
data.id = id;
isnew = true;
}
elem.removeClass(&#39;mbtloading&#39;).text(data.value);
});
$(e).click(function (e) {
data.value++;
if (isnew) downloadStats.set(data);
else downloadStats.child(&#39;value&#39;).set(data.value);
});
});
//<![CDATA[
$(document).ready(function () {
//checks if the number of posts on this page are more than one then return.
if($('.post-outer').length > 1)
return;
//selects the element to be made sticky.
var stickElement = $('.date-header'),
//selects the element which would trigger the sticky elem to go away
hideTrigger = $('#comments'),
//class name to be added (it should match the class in CSS)
fixed = "fixed",
top = stickElement.offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
var maxY = hideTrigger.offset().top;
if (y >= top && y < maxY) {
stickElement.addClass(fixed);
} else {
stickElement.removeClass(fixed);
}
});
});
//]]>
</script>
<!-- Download Counter Ends-->

Теперь, замените моё название базы данных blogstats на своё название, которое Вы создали. Сохраните шаблон.

После, всякий раз, когда вы хотите отобразить статистику загрузки для конкретного файла, используйте этот код:

<div style="width:120px;">
<a data-download-count="true" href="###">Скачать!</a>
<div class="blog-stats" id="download-count">
</div>
</div>

Вместо решеток вставляйте ссылку на файл. Текст "Скачать" можете менять на любой. Если текст слишком длинный, то поменяйте 120px на своё значение.

Удачи. До новых встреч. Пока.

Виджет от - mybloggertricks

С уважением, Сергей