[Blogspot] Thêm số lượt xem bài viết mới nhất từ Firebase

Tiện ích thống kê số lượt xem bài viết trong Blogspot cũng không có nhiều blog áp dụng và những cách cũ cũng có phần không hoạt động được nữa nên hôm nay mình xin hướng dẫn các bạn một cách mới vừa đơn giản, vừa hiệu quả từ Firebase nhé.

Thêm số lượt xem bài viết mới nhất từ Firebase

Cách thực hiện: Bước 1: Truy cập https://firebase.google.com/ và đăng nhập bằng tài khoản Gmail.
Sau khi đăng nhập xong, bạn chọn Get Started để bắt đầu vào giao diện quản lý.
Bước 2: Tại giao diện này, bạn chọn Add a project như hình dưới:

Điền tên Project và chọn quốc gia (nếu bạn ở Việt Nam thì tốt nhất nên chọn Vietnam nhé). Phần Project-ID chúng ta không cần làm gì cả, ở bước sau sẽ làm việc với nó sau.

Sau khi hoàn tất thông tin cơ bản, bạn click Create a project để khởi tạo project mới.
Tạo xong, chúng ta được chuyển tới giao diện code như ở dưới. Bạn hãy thay thế toàn bộ code cũ trong khung bằng code mới bên dưới và ấn Publish.

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

Hãy lưu ý sau khi Publish nó sẽ hiện thông báo đỏ, bạn cứ kệ nó nhé vì không hề ảnh hưởng gì đâu.
Tiếp đến bạn click biểu tượng bánh răng cưa và chọn Project Settings để ta lấy ID phục vụ cho bước sau.

Copy ID tại Project-ID được khoanh đỏ ra Notepad.

Bước 3: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
--- Dán toàn bộ đoạn Jquery dưới đây trước thẻ </body>

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
//<![CDATA[
$.each($('a[name]'), function(i, e) { 
var elem = $(e).parent().find('#postviews'); 
var blogStats = new Firebase("https://Project ID.firebaseio.com/pages/id/" + $(e).attr('name')); 
blogStats.once('value', function(snapshot) { 
var data = snapshot.val(); 
var isnew = false; 
if(data == null) { 
data= {}; 
data.value = 0; 
data.url = window.location.href; 
data.id = $(e).attr('name'); 
isnew = true; 
} 
elem.text(data.value); 
data.value++; 
if(window.location.pathname!='/') 
{ 
if(isnew) 
blogStats.set(data); 
else 
blogStats.child('value').set(data.value); 
} 
}); 
}); 
//]]>
</script>

Thay thế ID vừa lấy được (lưu ở Notepad đó) vào Project ID trong đoạn code trên.
--- Chèn đoạn code dưới vào nơi bạn muốn hiển thị thống kê lượt xem bài viết.

<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Lượt xem

Nếu như không hiển thị icon cái mắt thì do bạn chưa thêm thư viện FontAwesome, khi đó hãy dán dòng code sau trước thẻ </head> nhé.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Bước 4: Lưu template lại.
Kết luận: Vậy là mình vừa hướng dẫn xong cho các bạn cách thêm số lượt xem bài viết vào blogspot từ Firebase rồi đó. Lượt view sẽ được tính từ lúc hoàn thành xong thủ thuật này nhé, sẽ không tính view từ ban đầu đâu. Ngoài ra, code trên chưa chỉnh sửa gì nhiều nên nếu muốn trang trí thêm bạn phải tự thêm CSS cho hệ thống view nhé.
Chúc các bạn thành công :)
Source code: Blog thủ thuật win 10

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!