Cách thêm lượt xem bài viết vào Blogger bằng dịch vụ Google Firebase - update 2019

Edit this article 0

Hướng dẫn sử dụng dịch vụ Google Firebase thêm lượt xem bài viết vào Blogger qua vài bước đơn giản

Bài viết ngoài trang chủ hay bài viết chi tiết nếu có hiển thị lượt xem bài trông sẽ rất thẩm mỹ qua đó cũng tạo cho Blog chuyên nghiệp và thân thiện hơn đối với người đọc, và không kém phần quan trọng mang lại sự tương tác cao hơn đặc biệt với những Blog bán hàng hay Blog xem online, và quan trọng hàng đầu hoàn toàn miễn phí.

Chính xác hơn chúng ta sẽ hiểu cách dịch vụ Firebase lưu trữ số lần tải trang của Url nhất định ví dụ Url đó được tải 100 lần thì dịch vụ Firebase lưu 100 lần, chúng ta vẫn thay bằng lượt xem cho nó hoành tráng 😎

Việc thêm lượt xem không khó nhưng phải chính xác thì mới hiển thị lượt xem được. Vẫn theo cách sử dụng dịch vụ của Firebase nay đã sát nhập vào Google nên chúng ta không cần phải đăng ký nữa chỉ cần đăng nhập bằng tài khoản Goolge là được.

Bước 1: Tạo Project ID

Công việc tiếp theo sẽ tạo một project mới, lưu ý các bạn tạo mới tránh sử dụng Project ID chung vì lỡ người có tài khoản quản trị Project đó nếu xóa đi chúng ta sẽ mất lượt xem. Đăng nhập vào console.firebase.google.com bắt đầu tạo Project ID mới

Cách thêm lượt xem bài viết vào Blogger bằng dịch vụ Google Firebase
Project ID sẽ hiển thị khi bạn tạo xong Project mới

Quốc gia để ở đâu cũng được tốt nhất mình ở đâu thì để ở đó. Truy cập bước tiếp theo vào giao diện quản lý như hình

Cách thêm lượt xem bài viết vào Blogger bằng dịch vụ Google Firebase

Bên trái chọn Database đi đến giao diện sau:

Hướng dẫn thêm lượt xem bài viết mới nhất 2018 sử dụng Google Firebase

Bên phải có 2 hộp thoại các bạn chọn GET STARTED trong hộp thoại Realtime Database hay hộp thoại nào cũng được. Một hộp thoại hiện lên các bạn chọn ENABLE tiếp theo chuyển qua tab RULES bên dưới trong Realtime Database ta được như hình

Cách thêm lượt xem bài viết vào Blogger bằng dịch vụ Google Firebase

Các bạn sửa code thành như sau:

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

Hình minh họa

Hướng dẫn thêm lượt xem bài viết mới nhất 2018 sử dụng Google Firebase

Xong các bạn chọn PUBLISH hoàn thành.

Bước 2: Truy cập Blogger chọn Chủ đề » Chỉnh sửa HTML » Copy đoạn script bên dưới vào trước 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://Project ID.firebaseio.com/pages/id/" + $(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()
})
//]]></script>

Lưu ý: Đoạn script cần link thư viện jquery.js

Bạn thay Project ID đã tạo mới trong đoạn script trên. Các bạn yên tâm đoạn script không làm giảm tốc đổ tải trang vì status vẫn bằng 200

Bước 3: Chèn đoạn code dưới đây vào nơi cần hiển thị có thể ngoài trang chủ hay trang bài viết

<div class='post-views' expr:data-href='data:post.url.canonical' expr:data-id='data:post.id'>
  <span id='postviews'>0</span> lượt xem
</div>

Bước 4: Thêm chút CSS nhìn cho thẩm mĩ

.post-views {
    background-color: #f2f6fb;
    padding: 0 5px;
    border: 1px solid;
    border-color: rgba(12,27,38,.15);
    font-size: 14px;
    display: inline-block;
    min-width: 50px;
    height: 24px;
    line-height: 24px;
    border-radius: 3px;
    text-align: center;
}

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

0 Nhận xét