Hướng dẫn thêm lượt xem bài viết cho blogger một cách dễ dàng

Xin chào tất cả các bạn, hôm nay mình xin được hướng dẫn cho các bạn cách làm thế nào để thêm được chức năng đếm lượt xem bài viết cho Blog của bạn.

Trong bài Hướng dẫn thêm lượt xem bài viết cho blogger này mình sẽ cố gắng hướng dẫn các bạn một cách dễ hiểu và dễ làm nhất có thể, chúng ta cùng bắt tay vào làm nhé. Mình đã thực hiện và làm thành công cho chính Blog này của mình

– Để thêm được lượt đếm vào blogger của các bạn đầu tiên chúng ta cần phải tạo một tài khoản trên Firebase vào địa chỉ sau để đăng ký tài khoản và tạo một Ứng dụng trên Firebase

https://www.firebase.com/

Nếu bạn đã có 1 gmail thì công viêc sẽ nhẹ nhàng hơn rất là nhiều rồi đấy. Bấm vào Sign Up With Google để đăng nhập vào Firebase bằng chính tài khoản Google của các bạn

Sau khi đăng nhập thành công bằng tài khoản Google các bạn để ý Form tạo APP bên tay trái ở bài hướng dẫn này thì mình sẽ tạo một APP có tên demviewpost nhớ là tạo xong lưu APP này lại nhé để còn dùng ở bước tiếp theo

Các bạn nhập tên APP (Ứng dụng) ở ô APP NAME rồi bấm CREAT NEW APP

Sau khi đã tạo được APP các bạn bấm tiếp vào Manage App sẽ mở ra trang ứng dụng mà chúng ta vừa tạo ví dụ này là 

https://demviewpost.firebaseio.com/

Bước tiếp theo copy đoạn javascript sau chèn vào trong thẻ </body> của Blog các bạn, nhớ thanh tên APP bôi đỏ thành tên APP các bạn vừa tạo ở trên

<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;);

var blogStats = new Firebase(&quot;https://demviewpost.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.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);

}

});

});

Vào Mẫu/Chỉnh sửa html Bấm CTRL + F tìm kiếm cụm từ </body> Các bạn chèn code trên như hình dưới đây

Sau khi thêm xong đoạn Javascript trên chúng ta lại bấm CTRL + F và tìm kiếm với đoạn mã xong

<b:include data=’post’ name=’postQuickEdit’/>

và chèn thêm vào trước đoạn code trên mã sau đây

<i class=’fa fa-eye’/> Đã có <span id=’postviews’/> Người đọc

Nó giống như hình bên dưới. Hoặc bạn có thể chèn đoạn code này ở bất cứ nơi nào muốn hiện thị nó trong bài viết