Thêm bộ đếm lượt xem bài viết blogspot bằng Firebase
in iTechrum.comHello 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ày ➔ Tạ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 Firestore ➔ Tạo cơ sở dữ liệu. Bước 7: ấn Tiếp tục ➔ Cho phép. Bước 8: Bạn chuyển sang dòng Cơ sở dữ liệu thời gian thực ➔ Tạo cơ sở dữ liệu ➔ Tiếp theo ➔ Activer. 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>
<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ả.
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.
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?
Đr bạn
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?