Hướng dẫn thêm bộ đếm lượt xem bài viết bằng FireBase đơn giản
25 tháng 8
9
À 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.
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é.
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:
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.
<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 == "item"'>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.