Cách thêm lượt xem bài viết vào Blogger bằng Google Firebase

Tiện ích thống kê số lượt xem bài viết trong Blogger cũng không có nhiều blog áp dụng và những cách cũ cũng có phần không hoạt động được nữa nên hôm nay mình xin hướng dẫn các bạn một cách mới vừa đơn giản, vừa hiệu quả từ Firebase nhé.

Cách thêm lượt xem bài viết vào Blogger bằng Google Firebase

Bước 1: Tạo Project ID Công việc tiếp theo sẽ tạo một project mới, lưu ý các bạn tạo mới tránh sử dụng Project ID chung vì lỡ người có tài khoản quản trị Project đó nếu xóa đi chúng ta sẽ mất lượt xem.

Đăng nhập vào console.firebase.google.com bắt đầu tạo Project ID mới.

Cách thêm lượt xem bài viết vào Blogger bằng Google Firebase

Quốc gia để ở đâu cũng được tốt nhất mình ở đâu thì để ở đó. Truy cập bước tiếp theo vào giao diện quản lý như hình.

Bên trái chọn Database đi đến giao diện sau:

Bên phải có 2 hộp thoại các bạn chọn GET STARTED trong hộp thoại Realtime Database hay hộp thoại nào cũng được. Một hộp thoại hiện lên các bạn chọn ENABLE tiếp theo chuyển qua tab RULES bên dưới trong Realtime Database ta được như hình.

Các bạn sửa code thành như sau:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Hình minh họa:

Xong các bạn chọn PUBLISH hoàn thành.

Bước 2: Truy cập Blogger chọn Chủ đề » Chỉnh sửa HTML » Copy đoạn script bên dưới vào trước thẻ đóng: </body>

<script>//<![CDATA[
$(function() {
  function post_views() {
    jQuery.getScript('https://cdn.firebase.com/js/client/2.3.2/firebase.js').done(function() {
      $.each($(".post-views"), function(i, e) {
        var elem = $(e).find("#postviews"),
          rel = $('link[rel="canonical"]').attr("href"),
          blogStats = new Firebase("https://Project ID.firebaseio.com/pages/id/" + $(e).attr("data-id"))
        blogStats.once("value", function(snapshot) {
          var data = snapshot.val(),
            isnew = false
          if (data == null) {
            data = {}
            data.value = 0
            data.url = $(e).attr("data-href")
            data.id = $(e).attr("data-id")
            isnew = true
          }
          elem.text(data.value)
          data.value++
          if (window.location.pathname != "/" && $(e).attr("data-href") == rel) {
            if (isnew) {
              blogStats.set(data)
            } else {
              blogStats.child("value").set(data.value)
            }
          }
        })
      })
    })
  }
  post_views()
})
//]]></script>

Chú ý!:
Đoạn script cần link thư viện jquery.js

Bạn thay Project ID đã tạo mới trong đoạn script trên. Các bạn yên tâm đoạn script không làm giảm tốc đổ tải trang vì status vẫn bằng 200.

Bước 3: Chèn đoạn code dưới đây vào nơi cần hiển thị có thể ngoài trang chủ hay trang bài viết.

<div class='post-views' expr:data-href='data:post.url.canonical' expr:data-id='data:post.id'>
  <span id='postviews'>0</span> lượt xem
</div>

Bước 4: Thêm chút CSS nhìn cho thẩm mỹ.

.post-views {
    background-color: #f2f6fb;
    padding: 0 5px;
    border: 1px solid;
    border-color: rgba(12,27,38,.15);
    font-size: 14px;
    display: inline-block;
    min-width: 50px;
    height: 24px;
    line-height: 24px;
    border-radius: 3px;
    text-align: center;
}

Như vậy chỉ vài bước đơn giản thôi là bạn đã thêm được lượt xem bài viết trông rất chuyên nghiệp phải không.

Tham khảo: thietkeblogspot.com