الصفحة الرئيسية
Blogspot
Javascript

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

إرسال تعليق