Hướng dẫn thêm bộ đếm lượt xem bài viết cho blogspot

Demo các bạn có thể xem bằng cách click vào đây

Thêm bộ đếm lượt xem bài viết

Bước 1: Sử dụng js bên dưới chèn trước thẻ đóng </body>

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
//<![CDATA[
$.each($("article.post"), function(i, e) {
  var postId = $(e).find("a[name]").first().attr("name");
  var elem = $(e).find("#postviews");
  var blogStats = new Firebase("https://viewscount-9a211-default-rtdb.firebaseio.com/post/" + postId);
  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 = postId;
      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>

• Ở js trên có đoạn article.post là mình chỉ cho phép hoạt động trong thẻ div có class='post' nằm trong phần tử article vì vậy nếu cấu trúc blog của bạn khác hãy thay đổi cho đúng
  
• Đoạn var postId = $(e).find("a[name]").first().attr("name"); để giúp cho bộ đếm chính xác trong trường hợp bạn có sử dụng chức năng ngắt dòng của blogspot <!--more-->
• https://viewscount-9a211-default-rtdb.firebaseio.com/ là link firebase mình tạo ra để demo hoặc để sử dụng được luôn cho anh em, nếu muốn riêng biệt các bạn xe thêm hướng dẫn bên dưới

Bước 2: Dán đoạn code bên dưới vào nơi muốn hiển thị lượt xem

<span class='viewscount' id='postviews'/> lượt xem

Tạo firebase

Bước 1: Vào https://console.firebase.google.com/u/0/ (Đăng nhập bằng tài khoản google) sau đó Add Project

Bước 2: Nhập tên Project muốn tạo

Bước 3: Continue

Bước 4: Nếu không muốn liên kết với Google Analytics có sẵn thì bạn tạo mới

Bước 5: Nhập tên cho tài khoản Google Analytics

Bước 6: Chọn Vietnam hay đâu cũng được, tùy bạn. Accept sau đó tạo Project

Bước 7: Continue

Bước 8: Tạo project thành công, bạn chọn Realtime Database

Bước 9: Tạo database

Bước 10: Next

Bước 11: Enable

Bước 12: Tại trang Realtime Database bạn vào tab Rules sau đó thay đổi false thành true như hình dưới

Bước 13: Quay trở lại tab Data copy đường link sau đó thay thế bằng link ở phần này