Share CODE Hiển Thị Lượt Xem (Truy cập) cho Blogger Blogspot Chi Tiết

 
 
Ở trên google có rất nhiều bài hướng dẫn sử dụng firebase để hiển thị lượt xem (view) cho blogspot và bài này mình xin chia sẻ của Blog Duy Khánh bởi nó khá chi tiết. Chỉ có điều ở blog duy khánh là 1 bài cũ giao diện đã được google thay đổi. Bởi thế mình xin chia sẻ lại các bước mới nhất tính đến thời điểm post bài để các bạn dễ thực hiện. Nhưng code sẽ vẫn không đổi

P/S: Hãy comment nếu bạn không sử dụng được. Mình sẽ hỗ trợ

 Ở 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ử

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

Phần Project name bạn điền gì đó cũng được cũng không quan trọng sau đó ấn CREAT PROJECT

Sau khi tạo xong nó sẽ hiện như hình sau

Các bạn chọn ADD Firebase to Your website sẽ hiện như bảng dưới

Các bạn chú ý đoạn link mình bôi đỏ bên trên. Coppy lại sẽ dùng ở phần dưới

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='http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/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://project-6614606160192718629.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://project-6614606160192718629.firebaseio.com/ thành địa chỉ bôi đỏ bạn lấy 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: SET Quyền Hiển Thị

Nếu các bạn không thực hiện bước này sẽ không thể đếm lượt xem được

Hãy để ý thanh MENU bên trái trong DEVELOP có Database. Các bạn click vào đó sẽ hiện ra 2 tab là DATA và RULES và các bạn chuyển qua tab RULES xóa hết tất cả và thay vào đó bằng đoạn mã sau và ấn nút Publish

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

Bước 6: 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 ^^