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

You are reading: 
Thêm bộ đếm lượt xem bài viết blogspot bằng Firebase
 in iTechrum.com

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

    4 / 169 rates
    iTechrum.com

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

    3 Comments

    ➔ Attach images on the article for the best support.
    ➔ To comment with photos, go to the page Upload Photos, Drag and drop to upload images.
    ➔ You paste the image link URL into the comment box and press Publish, Photos will be automatically uploaded.
    ➔ Do not spam in the comment box, limit abbreviations.
    ➔ Check the box Notify me (Notify me) to receive Admin's feedback notification

    Previous Post Next Post

    Ads Blocker Detected!

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

    Refresh