Follow me on Google News Follow
  Views

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àyTạ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 FirestoreTạo cơ sở dữ liệu.
Bước 7: ấn Tiếp tụcCho phép.
Bước 8: Bạn chuyển sang dòng Cơ sở dữ liệu thời gian thựcTạo cơ sở dữ liệuTiếp theoActiver.
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ả.

    Lưu ý: Các bạn tùy chỉnh CSS cho phù hợp với template nhá!

    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!

    Thành Đạt – Tổng hợp và edit
    Bài viết được bảo vệ bởi DMCA. DMCA.com Protection Status

    About the Author

    Học để làm - Học để chia sẻ

    3 nhận xét

    1. Cái này hình như chỉ đếm bắt đầu từ khi blog thêm bộ đếm này, chứ lượt xem trc đây ko đc ghi nhận?
    2. Đr bạn
    3. mình muốn hiển thị lượt xem bài viết ngoài trang chủ thì thêm code ở đâu vậy bạn?
    • Home
    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.

    Ads Blocker Detected!

    We have detected that you are using an extension to block ads. Please support us by disabling these ad blockers.

    Refresh