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 | lượt xem
Nội Dung Chính [Ẩn] [Hiển thị]
    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
      Mới nhất ⇅

      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