Và ngay bây giờ ta có thể dễ dàng tạo bộ đếm lượt truy cập bài viết mà không cần lo lắng về máy chủ hoặc mã máy chủ với dịch vụ miễn phí như firebase.
Firebase đã được đưa ra trong tháng 4 năm 2012 và kể từ đó nó đã từng là trung tâm cho các nhà phát triển.
Hiện tại dịch vụ của firebase nay đã sát nhập vào Google nên chúng ta không cần phải đăng ký nữa chỉ cần đăng nhập bằng tài khoản Goolge là được.
Đầu tiên các bạn truy cập https://firebase.google.com/ rồi nhấn vào GO TO CONSOLE
Sau đó các bạn nhấp vào tạo Project mới
Tiếp theo các bạn điền tên Project và Quốc gia, ngoài ra bạn cũng có thể sửa lại ID Project theo ý mình
Sau khi đã tạo xong Project bạn cần sửa Rules để ứng dụng có thể hoạt động được. Bạn click vào Develop => Database rồi chọn tab Rules xóa bỏ phần code mặc định
Tiếp theo các bạn copy đoạn code sau đây và dán vào bảng rồi nhấn Publier
{ "rules": { ".read": true, ".write": true } }Tiếp theo các bạn vào phần cài đặt(Click hình bánh răng cưa)chọn Project settings để lấy ID Project hoặc nếu bạn nhớ ID Project lúc bạn tạo Project thì có thể bỏ qua bước này
Trong hình là Project ID
Sau khi đã có ID Project các bạn vào blogger chọn Chủ đề -> Chỉnh sửa rồi copy đoạn code sau và dán lên trước thẻ </body> nhớ thay ID Project của bạn vào nhé.
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
//<![CDATA[
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews');
var blogStats = new Firebase("https://Project ID.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>
Thay thế Project ID vàoTiếp theo bạn dán đoạn html sau vào nơi muốn hiển thị
<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Lượt xem