Hiển thị lượt views cho bài viết với blogger

Ở bài trước mình có hướng dẫn các bạn tạo lượt views cho bài viết trong wordpress sử dụng Firebase. Tuy nhiên bạn cũng có thể tích hợp ứng dụng đếm và hiển thị số lượng views cho mọi website như blogger..
Điều này nghe có vẻ có thể? với sự hỗ trợ của các dịch vụ thứ 3 bạn hoàn toàn tin có thể làm được. Tất cả các blogspot bây giờ có thể hiển thị lượt views động cho từng trang riêng biệt. Chúng ta có thể tạo post views mà không phải lo lắng thuê server cho ứng dụng Node.js. Các dịch vụ cung cấp lưu trữ dữ liệu thời gian thực như Firebase, bạn có thể tạo plugin data-driven cho blogger một cách dễ dàng.
Firebase hỗ trợ lên tới 10GB băng thông và 5GB lưu trữ miễn phí. Từng này đã đủ cho website của bạn sử dụng chưa 😀 !

Xem demo.
Chú ý: số postviews không thay đổi khi bạn load ở trang blog homepage nhưng sẽ thay đổi khi bạn truy cập vào bài viết chi tiết.

Thực hiện các bước dưới đây.

Tạo tài khoản Firebase

Trước hết, bạn cần có một nơi lưu trữ số lượng views cho bài viết trên blogs, truy cập vào Firebase.com và đăng ký lấy một tài khoản.
Điền các thông tin theo hướng dẫn, sau khi đã tạo xong tài khoản bạn tiến hành tạo một Firebase database để lưu trữ dữ liệu lượt views. Xem bên dưới.

Tạo Firebase Database

Nhập tên database vào trường “Create new Firebase” và nhấn Create. Mỗi database có tên riêng biệt không được trùng với các database của người dùng khác. Database có địa chỉ:
https://your-db-name.firebaseio.com. Trong đó tên database là “your-db-name”.
Nhớ địa chỉ firebase database của bạn nhé, chúng ta sẽ sử dụng trong phần tiếp theo.

Cài đặt Postviews plugin

1. Vào Blogger > Template.
2. Backup blogger template của bạn, trước khi sửa code.
3. Nhấn vào Edit HTML
4. Chọn vào “Expand widget Templates”.
5. Tìm chuỗi

]]></b:skin>

6. Dán đoạn CSS sau vào ngay trên, từ vừa tìm.

/*-------- Post Views  ----------*/ 
#views-container { 
width: 85px; 
float: right; 
}
.mbtloading { 
background: url('http://4.bp.blogspot.com/-PZMStRDcchY/USOp3xFp4yI/AAAAAAAAJOo/rm5FSsaSKh0/s320/mbtloading.gif') no-repeat left center; 
width: 16px; 
height: 16px; 
}
.viewscount { 
float: right; 
color: #EE5D06; 
font: bold italic 14px arial; 
}
.views-text { 
float: left; 
font: bold 12px arial; 
color: #333; 
}
.views-icon{ 
background: url('http://4.bp.blogspot.com/-_dXedKDHIws/USOp369zEPI/AAAAAAAAJOs/Cv3fTZUaBTU/s1600/postviews.png') no-repeat left; 
border: 0px; 
display: block; 
width: 16px; 
height: 16px; 
float: left; 
padding: 0px 2px; 
}

Bạn có thể sửa lại css theo ý muốn như thay mầu chữ …
7. Tiếp theo, bạn tìm chuỗi và dán đoạn javascript dưới đây vào cuối trong thẻ body.

<!-- Post Views Script --> 
<script type='text/javascript'> 
    window.setTimeout(function() { 
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;); 
      }, 10); 
  </script> 
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> 
<script> 
$.each($(&#39;a[name]&#39;), function(i, e) { 
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;); 
var blogStats = new Firebase(&quot;https://mybloggertricks.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;)); 
blogStats.once(&#39;value&#39;, 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(&#39;name&#39;); 
isnew = true; 
} 
elem.removeClass(&#39;mbtloading&#39;).text(data.value); 
data.value++; 
if(window.location.pathname!=&#39;/&#39;) 
{ 
if(isnew) 
blogStats.set(data); 
else 
blogStats.child(&#39;value&#39;).set(data.value); 
} 
}); 
}); 
</script>

Nhớ thay địa chỉ firebase database của bạn.
8. Bước cuối cùng, tìm dòng:

<data:post.body/>

Chú ý: nếu kết quả tìm thấy có nhiều dòng giống như trên, thì chọn dòng đầu tiên.

9. Dán đoạn HTML sau vào trước dòng trên.

<!-- Post Views Counter --> 
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>

10. Cuối cùng, thêm thư viện jquery vào trong thẻ head.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

11. Save template và thưởng thích.
Chúc bạn thành công !

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook