Cách thêm lượt xem bài viết Blogger sử dụng JavaScript và Firebase

Bài viết này mình sẽ chia sẻ cho các bạn cách thêm lượt xem bài viết Blogger sử dụng JavaScript và Firebase, nó có thể rất dễ ràng thực hiện.
Cách thêm lượt xem bài viết Blogger sử dụng JavaScript và Firebase
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Xin chào các bạn, sau nhiều bài chia sẻ template blogger thì bài này mình quay lại chia sẻ thủ thuật blogger vì hết template để chia sẻ rồi. Bài viết này mình sẽ chia sẻ cho các bạn cách thêm lượt xem bài viết Blogger sử dụng JavaScript và Firebase.

Cách thêm lượt xem bài viết Blogger sử dụng JavaScript và Firebase

Bài hướng dẫn này sẽ không yêu cầu các bạn có nhiều kiến thức về HTML, CSS hoặc JS vì code mình chia sẻ đã có sẵn. Các bạn chỉ cần triển khai đúng theo hướng dẫn và chèn đúng cách trong template của các bạn là được. Các bạn có thể xem demo ngay tại Blog mình nhé!

Tạo Realtime Database và thêm Rules

Đầu tiên, chúng ta cần tạo một Firebase Project để thiết lập real-time database trong Firebase. Chúng ta có thể đồng bộ và chỉnh sửa nó theo giống số lượng view trên Blogger.

Để tạo Firebase Project và real-time database các bạn hãy tham khảo các bước sau:

Tạo Project trong Firebase

Bước 1: Các bạn vào Firebase Console.

Bước 2: Chọn vào Create a Project và nhập tên Project, các bạn cứ nhấn Continue để tiếp tục.

Bước 3: Các bạn hãy tắt Google Analytics và bấm vào Create Project.

Vậy là xong việc tạo Project trong Firebase, tiếp theo là cài đặt Realtime Database.

Cài đặt Realtime Database

Bước 1: Truy cập vào Firebase Console và chọn Project vừa tạo.

Bước 2: Tại menu bên trái truy cập vào Realtime Database.

Cách thêm lượt xem bài viết Blogger sử dụng JavaScript và Firebase

Bước 3: Chọn vào Create Database, và chọn Next.

Bước 4: Tiếp tục chọn Locked Mode và nhấn vào Enable.

Cách thêm lượt xem bài viết Blogger sử dụng JavaScript và Firebase

Vậy là chúng ta đã tạo xong Realtime Database, hãy copy lại đường dẫn như hình mình đánh dấu.

Thêm Rules vào Database

Tiếp theo chuyển qua tab RULES và các bạn thay thế toàn bộ code cũ bằng đoạn code như sau:

{
  "rules": {
    ".read": true,
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    }
  }
}

Sửa 0000000000000000000 thành Blog ID của các bạn nhé.

Sau đó nhấn chọn Publish để lưu lại đoạn code vừa thay.

Chỉnh sửa trong template

Bước 1: Các bạn chèn đoạn CSS sau vào trước thẻ ]]></b:skin>

<!--[ Realtime Post View Counter by NLD Blog]-->
.entry-views{color:#000;font-size:14px;visibility:hidden;opacity:0;transition:all .2s ease}
.entry-views[data-view]{visibility:visible;opacity:1}
.entry-views::after{content:attr(data-view) ' views'}

Bước 2: Thêm đoạn HTML sau để hiển thị lượt xem:

<span class='nld_view entry-views hidden' data-add='true' expr:data-id='data:post.id'/>

Ở đoạn data-add='true' các bạn sửa thành false nếu các bạn muốn hiển thị lượt xem tại các trang khác trang bài viết. Cụ thể true thì khi tải trang nó sẽ +1 lượt xem còn false thì khi tải lại trang nó sẽ không cộng thêm lượt xem mà nó chỉ hiển thị lượt xem đã có.

Bước 3: Tiếp theo chèn đoạn JavaScript dưới đây vào trước thẻ /body

<script>
  /*<![CDATA[*/
  /*! Realtime Post View Counter by NLD Blog */
  const viewSeting = {
      blogID: '0000000000000000000',
      databaseUrl: 'databaseUrl',
      abbreviation: true,
      lazyload: true
  }
  function loadJs(e, b, c, d) {
      let a = document.createElement("script");
      b && (a.id = b), a.async = c, a.defer = c, a.src = e, d && (a.onload = d), document.getElementsByTagName("head")[0].appendChild(a)
  }
  function abvr(a) {
      var b = Math.sign(Number(a));
      return 1e9 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e9).toFixed(2) + "B" : 1e6 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e6).toFixed(2) + "M" : 1e3 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e3).toFixed(2) + "K" : Math.abs(Number(a))
  }
  function loadPostVw() {
      for (var c = document.querySelectorAll(".nld_view"), e = firebase.database(), a = 0; a < c.length; a++) {
          var d = c[a],
              b = d.getAttribute("data-id");
          (b = e.ref("BlogID_" + viewSeting.blogID + "/PostID_" + b)).once("value", function(a, b) {
              return function(c) {
                  0 < (c = c.exists() ? c.val() : 0) && (a.setAttribute("data-view", viewSeting.abbreviation ? abvr(c) : c), a.classList.remove("hidden")), "true" == a.getAttribute("data-add") && (a.setAttribute("data-add", !1), c = parseInt(c) + 1, b.set(c))
              }
          }(d, b))
      }
  }
  function postVw() {
      loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js", "fb-app", !0, () => {
          loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js", "fb-db", !0, () => {
              var a = {};
              a.databaseURL = viewSeting.databaseUrl, firebase.initializeApp(a), loadPostVw()
          })
      })
  }
  if (!0 === viewSeting.lazyload) {
      var a = [],
          b = [];
      let c = () => {
          0 == a.length && null == localStorage.getItem("LZ_VIEW") && (localStorage.setItem("LZ_VIEW", 1), postVw())
      };
      window.addEventListener("scroll", a => {
          (0 != document.documentElement.scrollTop && 0 == b.length || 0 != document.body.scrollTop && 0 == b.length) && c()
      }, !0), document.getElementsByTagName("body")[0].addEventListener("click", a => {
          c()
      }), localStorage.getItem("LZ_VIEW") && postVw()
  } else postVw()
  /*]]>*/
</script>

Bước này các bạn thay:
1. 0000000000000000000 giống với Blog ID ở trên phần Thêm Rules vào Database.
2. databaseUrl các bạn thay thành Realtime Database URL của các bạn mà mình đã bảo copy ở phần trên.
3. abbreviation có thể để là true hoặc false.
4. lazyload cũng tương tự true hoặc false.

Cuối cùng lưu lại và kiểm tra trên Blog của các bạn.

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

0/5
0 ratings
5
4
3
2
1
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

7 Nhận xét

  • Chèn ảnh bằng cách dán trực tiếp link ảnh | Tool upload ảnh
  • Chèn video Youtube bằng cách dán trực tiếp link video
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

    1. Tomorrow

      hay nhưng mà blog a gần 1000 bài chắc thôi :(

      Trả lời Xóa
    2. Sagar Vishnoi
      8/12/2022 03:39:00 CH

      Nhận xét này đã bị quản trị viên blog xóa.

      Trả lời Xóa
    3. Nguyễn Đại Học
      8/12/2022 06:46:00 CH

      Có lẽ 1 ngày nào đó, google cũng sẽ đưa lượt view bài viết ra ngoài. Vì xưa anh ước blogger có cái meta descpription và 1 thời gian sau có thật!

      Cảm ơn em về bài viết hay!

      Trả lời Xóa
    4. Yazid Kx

      Bro can you give me this script without being encrypted?

      Trả lời Xóa
    5. ๖ۣۜmiuMyu
      8/22/2022 08:06:00 SA

      Sau cài rồi mà thấy mỗi chữ views nhỉ?

      https://median-ui-eris.blogspot.com/

      Trả lời Xóa
    Mới hơn Cũ hơn

    Maybe You Like

    Xin vui lòng xác nhận đồng ý nhận tin từ NLD Blog