Tiện ích hộp download đếm lượt tải bằng Firebase Blogger

Bạn đang tìm một cách đơn giản nhưng hiệu quả để tương tác với độc giả trên blog của mình? Tiện ích Like/Dislike trái tim do Giahuy.net phát triển là lựa chọn hoàn hảo dành cho bạn.

Tiện ích này có chức năng hiển thị số lượt thích trên các bài viết. Nó bằng cơ sở dữ liệu thời gian thực Firebase.

Tiện ích like bài viết trên Blogger

Tính năng nổi bật

• Thích hoặc không thích bài viết với giao diện trái tim đầy cảm xúc.
• Biểu tượng hiện đại: trái tim và trái tim vỡ, giống phong cách YouTube.
• Chống spam: mỗi người chỉ được phản hồi một lần, kể cả khi xóa lịch sử trình duyệt.
• Chuyển đổi linh hoạt: bấm lại để hủy, hoặc đổi từ Like sang Dislike và ngược lại.
• Lưu trữ dữ liệu trên Firebase Realtime Database – đảm bảo nhanh và bảo mật.
• Tương thích hoàn hảo với Blogger, responsive trên mọi thiết bị.

Tạo cơ sở dữ liệu và thêm quy tắc

Bạn hãy đọc bài viết tạo giấy phép với cơ sở dữ liệu thời gian thực Firebase để xem hướng dẫn chi tiết nhé!

Hãy thêm quy tắc trong cơ sở dữ liệu thời gian thực Cấu hình Firebase Realtime Database rules như sau:

{
  "rules": {
    ".read": true,
    "ghLikes": {
      "$post_path": {
        ".write": "true"
      }
    }
  }
}

Tiện ích like bài viết trên Blogger

Tiện ích này chỉ dành cho nền tảng Blogger/Blogspot không sử dụng cho các mã nguồn mở khác.

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> hoặc </style> và dán các mã CSS sau ngay trên vào nó.

/* Like by Giahuy.net */
.gh-like-bar{display:flex;justify-content:center;gap:20px;padding:15px 0}
.gh-button{display:flex;align-items:center;cursor:pointer;font-size:16px;color:#666}
.gh-button svg{width:24px;height:24px;margin-right:6px;fill:#ccc;transition:fill 0.2s}
.gh-like-status{text-align:center;color:#999;font-size:14px;margin-top:4px}
.gh-button.liked svg{fill:#ce2c90}
.gh-button.disliked svg{fill:#e53935}

Bước 6: Sao chép mã HTML bên dưới và đặt nó ở dưới mã: <data:post.body/>. Đối với theme Median UI 1.7 bạn có thể đặt dưới mã <b:include data='post' name='postBody'/>.

<!-- [ Like by Giahuy.net ] -->
<div class='ghLikes' expr:data-blog-id='data:blog.blogId' expr:data-post-id='data:post.id' expr:data-view='data:blog.blogId + &quot;/&quot; + data:post.id' id='likeContainer'></div>
<script>
/*<![CDATA[*/
var ghLikes = {
  firebaseUrl: 'https://your-project-default-rtdb.firebaseio.com/',
  sharedBy: 'www.giahuy.net' // Credit do not removed
};

function likeLoad(){var script=document.createElement('script');script.async=true;script.src='https://cdn.giahuy.net/widget/js/like-dislike.min.js';document.body.appendChild(script)}(function(){if(localStorage.getItem("LikesJs")!=="true"){let t=false;window.addEventListener("scroll",()=>{if(!t){likeLoad();localStorage.setItem("LikesJs","true");t=true}},true);window.addEventListener("click",()=>{if(!t){likeLoad();localStorage.setItem("LikesJs","true");t=true}},true)}else likeLoad()})();
/*]]>*/
</script>

Ghi chú:
firebaseUrl: Điền URL cơ sở dữ liệu thời gian thực firebase của bạn.

Bước 7: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

Trên đây là hướng dẫn tiện ích like bài viết trên Blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé!

Related Posts