Cách Thêm Lượt Xem Bài Viết Cho Template Plus UI

Thêm lượt xem bài viết cho Template Plus UI

Trong bài viết này mình sẽ hướng dẫn các bạn cách hiển thị số lượt xem bài viết cho Plus UI template. Việc thêm lượt xem bài viết cho blog sẽ giúp cho bạn nắm bắt được tình hình tương tác của bài viết. Và bây giờ chúng ta cùng tìm hiểu cách để hiển thị lượt xem (realtime views counter) cho Plus UI nhé.

---

Các bước thực hiện

Bước 1: Truy cập vào Firebase Console để tạo một dự án trong Firebase.

Tạo dự án trong firebase console

Bạn nhập tên của dự án và tick chọn vào các ô giống hình.

Dùng firebase để hiển thị lượt xem bài viết

Tạo dự án trong firebase để hiển thị lượt xem

Bước 2: Tạo cơ sở dữ liệu cho dự án

Bạn chọn mục Build, sau đó chọn vào Realtime Database

Tạo cơ sở dữ liệu cho realtime views vounter

Bước 3: Nhấp vào Creat Database, tiếp tục ấn Next, sau đó ấn Enable

Hiển thị realtime post view

Bước 4: Sau khi tạo xong, bạn qua phần Rules và dán đoạn js bên dưới vào

Hiển thị số lượt xem bài viết

Nếu sử dụng cho một blog, bạn sử dụng đoạn js này:

  {
  "rules": {
    ".read": true,
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    }
  }
}

Nếu sử dụng cho nhiều blog, bạn sử dụng đoạn js này:

  {
  "rules": {
    ".read": true,
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    },
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    },
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    }
  }
}

Bạn chỉ việc thay ID blog vào và ấn Publish là xong

Bước 5: Tiếp theo bạn vào tùy chỉnh HTML của Blogger và tìm đến đoạn

realViews: {
  databaseUrl: "",
  abbreviation: "false"
}

Tiếp theo sao chép link bên firebase

Thêm lượt xem bài viết template plus ui

Sau đó dán vào vị trí mình đánh dấu là được.

Tạo hiển thị lượt xem bài viết cho template plus ui blogger

Bạn ấn lưu và xem kết quả.

Kết luận

Trên đây là cách thêm lượt xem bài viết cho Template Plus UI Blogger vô cùng đơn giản. Nếu bạn có bất kỳ câu hỏi hoặc khiếu nại về bản quyền, hãy để lại ý kiến của bạn bên dưới để mình biết. Chúc bạn có một ngày học tập và làm việc hiệu quả.