Thêm bộ đếm lượt xem bài viết blogspot bằng Firebase

Hello chào các bạn, Trong bài viết này iTechrum sẽ chia sẻ cho bạn cách thêm công cụ hiển thị lượt xem bài viết trên Blogger bằng Google Firebase đơn giản nhất!

FireBase là một tiện ích đếm views thực trên nền tảng Web, trên wordpress có plugin rồi hoặc theme mặc định đã có sẵn nên các bạn chỉ cần cài plugin là được. Còn trên Blogger không hỗ trợ tiện ích hiển thị lượt xem trên bài viết, các bạn hãy làm theo hướng dẫn của mình sau đây để thêm tiện ích hiển thị views, giúp cho blog của bạn chuyên nghiệp và thân thiện hơn đối với người đọc.

Tạo tài khoản Firebase

Bước 1: Bạn truy cập vào trang chủ Firebase, login bằng tài khoản Google(Các bạn chuyển sang tiếng việt dễ thao tác).

Bước 2: Các bạn nhấn vào chữ Thêm dự án. Bước 3: Nhập tên dự án ➔ Tiếp tục. Bước 4: Tắt Google Analytics cho dự án này ➔ Tạo một dự án. Bước 5: Bạn đợi môt chút rồi nhấn Tiếp tục. Bước 6: Tại giao diện chính bạn vào dòng Cơ sở dữ liệu Firestore ➔ Tạo cơ sở dữ liệu. Bước 7: ấn Tiếp tục ➔ Cho phép. Bước 8: Bạn chuyển sang dòng Cơ sở dữ liệu thời gian thực ➔ Tạo cơ sở dữ liệu ➔ Tiếp theo ➔ Activer. Bước 9: Tại tab Quy tắc bạn xóa hết dòng code đi và thay thế bàng dòng code bên dưới, xong nhấn Publier.

{
  "rules": {
    ".read": true,
    ".write": true
  }
  }

Cài đặt bộ đếm lượt xem vào blogger

Bước 1: Cách thêm Font Awesome & jQuery. Nếu Blog của bạn đã có rồi thì bỏ qua bước này.

Thêm đoạn mã dưới trên thẻ đóng </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>

Bước 2: Thêm đoạn CSS dưới trên thẻ ]]></b:skin>.

.post-views {font-size: 13px;color: var(--meta-color);position: relative;display: inline-block;top:3px;}

Bước 3: Thêm đoạn js sau trên thẻ đóng </body>.

<script>//<![CDATA[
$(function() {
  function post_views() {
    jQuery.getScript('https://cdn.firebase.com/js/client/2.3.2/firebase.js').done(function() {
      $.each($(".post-views"), function(i, e) {
        var elem = $(e).find("#postviews"),
          rel = $('link[rel="canonical"]').attr("href"),
          blogStats = new Firebase("https://itechrum-3573b-default-rtdb.firebaseio.com/" + $(e).attr("data-id"))
        blogStats.once("value", function(snapshot) {
          var data = snapshot.val(),
            isnew = false
          if (data == null) {
            data = {}
            data.value = 0
            data.url = $(e).attr("data-href")
            data.id = $(e).attr("data-id")
            isnew = true
          }
          elem.text(data.value)
          data.value++
          if (window.location.pathname != "/" && $(e).attr("data-href") == rel) {
            if (isnew) {
              blogStats.set(data)
            } else {
              blogStats.child("value").set(data.value)
            }
          }
        })
      })
    })
  }
  post_views();
var id = $('div').attr("data-id");
$('div.post').attr('data-view', id);
})
//]]></script>

Thay dòng https://itechrum-3573b-default-rtdb.firebaseio.com/ bằng id Firebase đã tạo ở trên

Bước 4: Thêm đoạn mã HTML sau chỗ bạn muốn hiển thị trên bài viết.

<div class='align-right'>
<div class='post-views' expr:data-href='data:post.url.canonical' expr:data-id='data:post.id'> <i class='far fa-eye'/> <span id='postviews'/> Views</div>

Bước 5: Cuối cùng ấn Lưu lại và kiểm tra thành quả.

Kết luận:

Ở trên là hướng dẫn chi tiết cách thêm bộ đếm lượt xem bài viết blogger mà mình chia sẻ tới các bạn. Hy vọng bài viết sẽ hữu ích cho blog của bạn. Mọi thắc mắc hay có câu hỏi nào hãy để lại bình luận bên dưới bài viết. Chúc bạn thành công!