Hướng dẫn tạo Hiển thị lượt truy cập từng bài viết với Firebase

Đăng bởi Admin | 27/4/16 | 3 nhận xét

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

Ở bài viết này BDK 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ử

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, bạn bấm nút CREATE NEW PROJECT, hiện bảng sau:

Phần Project name bạn điền tên chiến dịch (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, hệ thống 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 = "// 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/AVvXsEi7l5nFXxTdBsC_tljnNgI-8Ie-xwnBj1-EAuICpjfMJN4EVHHLAKDbGHFA9VF1IxJYpHzq2xBm1yPXOLacUjxCYXf5O5kCCi0dAtCEfXDIHaIgEDddlQ54l9a_74zr2mTyoTDRaNHFqCtC/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ạ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: 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

Tại giao diện của Firebase, bạn 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 ^^

(Nguồn: Internet)