Hướng dẫn thêm lượt xem bài viết vào blogspot mới nhất

Hướng dẫn thêm lượt xem bài viết vào blogspot mới nhất

Bài viết ngoài trang chủ hay bài viết chi tiết nếu có hiển thị lượt xem bài trông sẽ rất thẩm mỹ qua đó cũng tạo cho blog chuyên nghiệp và thân thiện hơn đối với người đọc, và không kém phần quan trọng mang lại sự tương tác cao hơn đặc biệt với những blog bán hàng hay blog xem online. Việc thêm lượt xem không khó nhưng phải chính xác thì mới hiển thị lượt xem được. Vẫn theo cách sử dụng dịch vụ của firebase nay đã sát nhập vào Google nên chúng ta không cần phải đăng ký nữa chỉ cần đăng nhập bằng tài khoản Goolge là được.


Công việc tiếp theo sẽ tạo một project mới, nếu có rồi bỏ qua bước này.


Lưu ý: Quốc gia để ở đâu cũng được tốt nhất mình ở đâu thì để ở đó. Khi đã có project chuyển sang bước 2 sửa rules, vào giao diện project truy cập Database sau đó copy đoạn code dưới đây thay thế. Hình demo


Code:

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

Copy xong chuyển qua bước 3 lấy project id của app. Truy cập vào biểu tượng bánh răng cưa chọn Project settings bên phải tìm đến dòng Project ID và copy nó


Bước 4: Truy cập Blogger chọn Chủ đề » Chỉnh sửa HTML » copy đoạn script bên dưới vào trước thẻ đóng </body>

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
//<![CDATA[
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews');
var blogStats = new Firebase("https://Project ID.firebaseio.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', 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('name');
isnew = true;
}
elem.text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
//]]>
</script>

Thay thế Project ID ở bước 3


Bước 5: Chèn đoạn code dưới đây vào nơi cần hiển thị có thể ngoài trang chủ hay trang bài viết

<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Lượt xem

Bạn có thể bỏ chữ Lượt xem hoặc xóa cũng được, kiểm tra nếu temeplate của bạn chưa có fontawesome thì copy thêm đoạn này dưới thẻ <head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Như vậy chỉ vài bước đơn giản thôi là bạn đã thêm được lượt xem bài viết trông rất chuyên nghiệp phải không.

  1. đã làm theo hướng dẫn nhưng không hiện được số lượt xem bác ơi! :( còn lượt like thì đc rồi! cảm ơn bác! web: qthang.net

    Trả lờiXóa
    Trả lời
    1. e sử dụng yk này là được
      phuongcloudit-6363b

      Xóa
    2. vẫn ko được bác ơi!

      Xóa
    3. em xem lại đoạn code chèn anh mới sửa

      Xóa
    4. Thanks a nhé! đc rồi a! nó bắt đầu tình lượt xem từ lúc em thêm đoạn code đó à a?

      Xóa
  2. Làm như này xong khi check bên pagespeed/insights của gg thì có 1 file cần bật nén thì có nên nén vào k bác?

    Trả lờiXóa
    Trả lời
    1. em đừng quan tấm về pagespeed quá miễn mình thấy site mình chạy ổn định là được

      Xóa
    2. Vâng e cảm ơn a nhiều ạ :))

      Xóa
  3. Đây là bài đầu tiên chia sẻ về lượt xem bài viết thật của blogger mà em được đọc
    Trước giờ không biết blog của bác :)
    hay quá đi

    Trả lờiXóa
  4. bài viết rất hữu ích ạ! anh cho em hỏi 3 dòng cuối bào viết:
    nút thích, gửi Mesenger
    Từ khoá: code, lượt xem đăng,....
    Chia sẻ, Bình Luận, nhắn tin
    Làm sao làm được mấy mục đó ạ! A có thể chia sẻ không ạ!
    Thanks! chúc anh sức khoẻ

    Trả lờiXóa
    Trả lời
    1. Tốt nhất em backup mẫu vào notepad gửi qua Facebook anh làm cho nha, chứ giờ chỉ em cũng khó làm lắm :grin:

      Xóa
    2. Em đã gửi code qua mail rồi ạ! nhờ anh giúp với ạ!
      Thanks Anh

      Xóa
    3. Lỗi font rồi em ơi, em phải lưu dạng Unicode nha, mà hình như em dùng theme này phải không?
      www.anhnguyentechnology.com

      Xóa