Hiển thị số lượt xem bài viết đơn giản cho Blogger với busuanzi.js

Hiển thị số lượt xem bài viết để xem mức độ quan tâm của độc giả đối với bài viết. Bạn có thể áp dụng cách dùng Firebase, với ưu điểm là ổn định do là một sản phẩm của Google, nhược điểm là sử dụng Js kích thước lớn, cách cài đặt có thể gây khó khăn cho một số bạn chưa quen.

Bài viết này mình sẽ hướng dẫn một cách khác, đơn giản hơn, js nhẹ hơn đó là dùng busuanzi.js

Bước 1

Vào mục chỉnh sửa mẫu của Blogger, thêm script sau lên trên thẻ đóng </body>:

<script>
/*<![CDATA[*/
var bszCaller,bszTag;!function(){var c,d,e,a=!1,b=[];ready=function(c){return a||"interactive"===document.readyState||"complete"===document.readyState?c.call(document):b.push(function(){return c.call(this)}),this},d=function(){for(var a=0,c=b.length;c>a;a++)b[a].apply(document);b=[]},e=function(){a||(a=!0,d.call(window),document.removeEventListener?document.removeEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.detachEvent("onreadystatechange",e),window==window.top&&(clearInterval(c),c=null)))},document.addEventListener?document.addEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.attachEvent("onreadystatechange",function(){/loaded|complete/.test(document.readyState)&&e()}),window==window.top&&(c=setInterval(function(){try{a||document.documentElement.doScroll("left")}catch(b){return}e()},5)))}(),bszCaller={fetch:function(a,b){var c="BusuanziCallback_"+Math.floor(1099511627776*Math.random());window[c]=this.evalCall(b),a=a.replace("=BusuanziCallback","="+c),scriptTag=document.createElement("SCRIPT"),scriptTag.type="text/javascript",scriptTag.defer=!0,scriptTag.src=a,document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)},evalCall:function(a){return function(b){ready(function(){try{a(b),scriptTag.parentElement.removeChild(scriptTag)}catch(c){bszTag.hides()}})}}},bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback",function(a){bszTag.texts(a),bszTag.shows()}),bszTag={bszs:["site_pv","page_pv","site_uv"],texts:function(a){this.bszs.map(function(b){var c=document.getElementById("busuanzi_value_"+b);c&&(c.innerHTML=a[b])})},hides:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="none")})},shows:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="inline")})}};
/*]]>*/
</script>

Bước 2

- Thêm code hiển thị lượt xem bài viết bên dưới vào vị trí mong muốn ở trang bài viết:

<span id='busuanzi_container_page_pv' style='display:none'><span id='busuanzi_value_page_pv'></span> views</span>

- Thêm code thống kê blog (số khách đang truy cập, số lượt xem blog) vào vị trí mong muốn:

<span id='busuanzi_container_site_uv' style='display:none'>
Site Visitors&#65306;<span id='busuanzi_value_site_uv'></span>
</span>
<span id='busuanzi_container_site_pv' style='display:none'>
Traffic&#65306;<span id='busuanzi_value_site_pv'></span>
</span>

Hạn chế

Nhược điểm của cách này là khi ở trang index, số lượt xem từng bài viết sẽ không được hiển thị, mà nó chỉ hiển thị khi bạn đang ở trang bài viết.