 |
| 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ả.
