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

29.9.23 | 5 nhận xét | 434 lượt xem
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ẻ divclass='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
Bạn đang xem bài viết "Hướng dẫn thêm bộ đếm lượt xem bài viết cho blogspot" tại chuyên mục: Blogspot , Javascript

5

nhận xét
Cũ nhất ⇅
  1. Thành Trương Blog

    Chèn cái này mà 0 lượt xem chắc xĩu

    REPLY DELETE
    1. A Đê Min

      Không có chuyện đấy được, vì nó tính từ khi mình viết bài rồi (theo ID post mà), mà khi viết phải xem đi xem lại nhiều lần trước khi public mà 😁

      REPLY DELETE
      1. Thành Trương Blog
      2. Thành Trương Blog

        Admin cho mình xin code tổng hợp bình luận được không ad?

        REPLY DELETE
        1. A Đê Min

          Tổng hợp bình luận là sao nhỉ? 🤔

          DELETE

Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh

Chèn code: [pre]Code đã mã hóa [/pre]

Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Chèn link: Click để chèn link