Hiển thị lượt truy cập từng bài viết bằng Firebase

Ở bài viết này mình xin chia sẻ với bạn cách để hiển thị số lượt truy cập của từng bài viết trên blogspot bằng cách sử dụng Firebase. Tiện ích này giúp bạn và người đọc có thể xem số lượt truy cập của từng bài viết giúp người đọc có thể tin tưởng vào bài viết của bạn hơn nếu bài viết có nhiều lượt truy cập. Ngoài ra bạn cũng có thể theo dõi bài viết của mình được người đọc đón nhận như thế nào từ đó có hướng đi đúng đắn. Mời bạn xem thử

Hiển thị lượt truy cập từng bài viết bằng Firebase

DEMO

Cơ bản là như vậy. Nếu bạn muốn có một cái thì chúng ta bắt tay vào việc thôi. :)

Bước 1: Đăng ký tài khoản tại Firebase

Bạn click vào ĐÂY. Điền đầy dủ thông tin như bên dưới

Sau khi tạo tài khoản trang web sẽ hiện ra một khung như bên dưới đây ở góc trái. Bạn điền thông tin của mình vào và ấn chọn CREATE NEW APP

Sau đó chọn MANAGE APP 

Đến khi bạn thấy địa chỉ dạng như sau https://blogduykhanh.firebaseio.com là coi như xong. Bạn nhớ  địa chỉ này để sử dụng trong những bước sau

Trước khi đi đén bước tiếp theo thì bạn nên kiểm tra xem template của mình có thư viện jQuery hay chưa? Nếu chưa thì bạn thêm đoạn code sau trước thẻ </heaad>

 

 <Script src = "// ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js '/>

Bước 2: Cài đặt CSS

Bạn đi đến Mẫu > Chỉnh sửa HTML, dán đoạn code sau trước thẻ ]]> </ b: skin>

 .post-header-line-1 {overflow:hidden} .viewers{margin:10px 0;display:table;background:#fefefe;color:#333;padding:6px 12px;box-shadow:inset 0 0 0 1px #c9c9c9;cursor:default;font-weight:bold;transition:all .3s ease-out} .viewers:hover {background:#aaa;color:#fff;box-shadow:inset 0 0 0 1px #888;} .viewers .loading {display:inline-block;width:20px;height:20px;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiESZg0rfCL4XmPY5wyLzKEy6OICWN96NQU-25q-pK9AFFAajOGVROt2tVKlT2pEmOetfdY3BvWoiy3bRwLe17ZZ8iW6c4J8AItY0rqkGTBRndf5t-Okxq_ZQtnRptxwB0DLSr0856je4ld/s1600/loader.gif') no-repeat 0 0;vertical-align:middle}

Bước 3: Cài đặt jQuery

Dán đoạn code sau trước thẻ </body> 

 <b:if cond='data:blog.pageType != &quot;index&quot;'>
<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// View counter
$(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://xemgi-2018.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>
</b:if>

Nhớ thay đoạn địa chỉ https://xemgi-2018.firebaseio.com/ thành địa chỉ bạn tạo lúc nãy.

Bước 4: Cài đặt HTML

Đến đây thì công việc cài đặt coi như đã hoàn thành, giờ đến việc cho nó hiện lên là được. Bạn sẽ đặt code sau vào nơi bạn muốn hiển thị lượt truy cập 

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Lượt xem:&amp;nbsp;<span class='loading'/>&amp;nbsp;lần</div> </b:if> 

Về vị trí thì khó mà nói cụ thể được vì tùy từng template và ý thích từng người đặt ở những nói khác nhau. Tuy nhiên thông thường nhiều người thích đặt ở đầu bài viết. Để thực hiện điều này bạn tìm đoạn code sau 

<div class='post-header'>
<div class='post-header-line-1'/>
</div> 

Và thay thế nó bằng đoạn code sau

<div class='post-header'>
  <div class='post-header-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Lượt xem:&amp;nbsp;<span class='loading'/>&amp;nbsp;lần</div>
</b:if>
</div>
</div>

Bước 5: Lưu lại và tận hưởng

Đến đây thì công việc coi như hoàn tất. Lưu mẫu và xem kết quả.

Có một lưu ý nho nhỏ là khi blog bạn có quá nhiều trang và có quá nhiều lượt xem thì Firebaseio có thể sẽ hiển thị không đầy đủ, để hiển thị đầy đủ thì bạn phải đăng ký một tài khoản tính phí. Tuy nhiên nếu bạn vẫn muốn sử dụng chùa thì Firebaseio đã là tiện ích tốt nhất hiện nay rồi ^^