Hướng dẫn thêm bộ đếm lượt xem bài viết bằng FireBase đơn giản

Ở bài viết này mình sẽ hướng dẫn các bạn cách tạo bộ đếm hiển thị lượt xem bài viết đa nền tảng: Blogsport, Wp,.... nhưng Wp đã có plugin rồi hoặc theme mặc định đã có sẵn nên các bạn chỉ cần lên Google tìm plugin thôi nha, nếu không thích thì có thể tự custom bằng FireBase như bài viết này của mình. Đây là bộ đếm view thực chứ không phải random như các bài hướng dẫn khác. Một số bạn lại không biết làm theo như các bài hướng dẫn khác vì giao diện FireBase đã thay đổi một chút nên hôm nay mình sẽ hướng dẫn lại một cách chi tiết hơn nha. Nếu ai không làm được hoặc có thắc mắc gì thì hay liên hệ cho mình hoặc bình luận phía dưới để mình biết nhé.

À mà bài viết này giành cho Newbie những người chưa biết tới thôi nha, các cao thủ có thể bỏ qua ạ 😂

Tạo tài khoản FireBase

Bước 1: Vào FireBase của Google để đăng kí, login bằng tài khoản Google nha.

Những tài khoản mới đăng kí lần đầu sẽ bắt buộc đăng kí Project mới

Các bạn nhấn vào chữ Tạo một dự án (dịch ra tiếng Việt) còn mặc định không phải là tiếng Anh, nó là tiếng Pháp: Créer un projet. 

Tiếp theo bạn chỉ cần điền tên Project vào, cứ thế nhấn tiếp tục cho đến bước 3, các bạn chọn như mình nhé. 

Xong các bạn nhấn vào nút màu xanh ở dưới để hoàn thành đăng kí nha, nó hiển thị như dưới là ok nhé.

Tạo project cho người đã tạo tài khoản thì cũng giống như ở trên nhưng khi bạn login vào nó sẽ hiển thị dấu + để bạn tạo Project thôi nhé

Còn các bạn nào có sẵn thì bỏ qua cũng được nhưng mình khuyên nên tạo cái mới cho nhanh gọn lẹ.

Khởi tạo Database

Đầu tiên các bạn vào project của mình sau đó chọn Développer --> Database --> Créer une base de données như hình nha.

Sau khi nhấn Créer une base de données thì nó sẽ hiển thị bảng như dưới và các bạn chọn Suivant.

Tiếp đó các bạn chọn Vị trí Firebase nhé, chọn ở đâu cũng được.

Sau đó các bạn vào Database chọn Règles (để ý cái tab Modifier les règles), các bạn xoá toàn bộ mã cũ và thay bằng cái này:

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

Sau đó nhấn Publier.

Như thế là các bạn đã cài đặt FireBase thành công, giờ là bước gắn bộ đếm.

Cài đặt Jquery (nếu các bạn chưa có nhé)

Nếu chưa có các bạn chèn đoạn CDN Jquery này vào:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

Chèn bộ đếm vào theme

Chèn mã này vào trước thẻ </body>

<script src="//cdn.firebase.com/v0/firebase.js" type="text/javascript"></script>
<script type='text/javascript'>
                //<![CDATA[
              $(function() {
    var a = $(".viewers");
    a.each(function() {
        var n = $(this).attr("id"),
            e = new Firebase("ID_Project_vua_tao.firebaseio.com/" + n);
        e.once("value", function(n) {
            var i = n.val();
            null == i ? i = 1 : "/" != window.location.pathname && i++, e.set(i), a.children("span").removeClass("loading").html(i)
        })
    })
});
            //]]>
         </script>

Sau đó chèn đoạn code này vào nơi bất kỳ mà bạn muốn hiển thị nhé.

<span class='viewers' expr:id='data:post.id'> <span class='loading'> 0</span> lượt xem</span>

Các bạn thay ID_Project_vua_tao bằng ID của bạn vừa tạo nhé: như của mình là test-bd0ca

Nếu là blogspot thì bạn nên kèm điều kiện chỉ hiển thị bài viết:

<b:if cond='data:blog.pageType == &quot;item&quot;'>chèn mã vào đây</b:if>

Các bạn có thể custom CSS tuỳ ý của mình nha, ví dụ thêm link svg, gif.. vào để load trước sau đó mới hiển thị chẳng hạn, nếu làm cách này thì các bạn xoá số 0 ở code trên đi nhé.
Vậy là xong r đó. Có thắc mắc gì để lại bình luận nha.

Bài viết liên quan