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.

Đầ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à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

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait