Hiển thị lượt xem bài viết cho blogspot với Firebase

Tất cả các blogger bây giờ chắc hẳn đều mong muốn sẽ có một tiện ích đếm số lượt đọc bài viết trên blogspot của mình một cách "miễn phí".

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.
Hiển thị lượt xem bài viết cho blogspot với Firebase
Đầ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
Hiển thị lượt xem bài viết cho blogspot với Firebase
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
Hiển thị lượt xem bài viết cho blogspot với Firebase
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
Hiển thị lượt xem bài viết cho blogspot với Firebase
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
}
}
Hiển thị lượt xem bài viết cho blogspot với Firebase
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
Hiển thị lượt xem bài viết cho blogspot với Firebase
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ào
Tiế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
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji