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

Xin chào mọi người! Nhân dịp này mình sẽ chia sẻ tiện ích like bài viết trên Blogger.

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ôi cũng đã thêm localStorage vào tiện ích này để những người đã thích không thể thích lại, nhưng nếu cookie trình duyệt bị xóa thì họ có thể thích lại.

Tiện ích này chỉ có thể thêm số lượt thích/lượt nhấp và không thể không thích hoặc hủy lượt thích, để xem bản demo vui lòng nhấp vào nút bên dưới, ok dành cho những bạn muốn dùng thử, hãy xem cách thực hiện.

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é!

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

/* Widget like shared by Giahuy.net */
.gh-like-btn{position:relative;padding:5px 10px;background:#ce2c90;font-size:13px;border-radius:5px;color:#fff;outline:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.gh-like-btn::after{content:'';position:absolute;padding:5px;background:#ce2c90;bottom:-5px;transform:rotate(45deg)}
.gh-like-btn svg{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:20px;height:20px;margin-right:5px}
.gh-like-btn svg.like{fill:#fff;stroke:#fff}
#gh-like{margin-top:5px}
#gh-like::before{content:attr(data-click)}
#gh-like::after{content:attr(data-text);margin-left:5px}
.wrap-center{display:flex;justify-content:center}

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'/>.

<!--[ Widget like shared by Giahuy.net ]-->
<div class='wrap-center'>
  <button class='gh-like-btn' expr:data-like='data:blog.blogId + &quot;/&quot; + data:post.id + &quot;/likepost&quot;'>
    <svg viewBox='0 0 24 24'><path d='M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z' /></svg>
    <span id='gh-like' data-click='0' data-text='Like' data-after='Liked'></span>
  </button>
</div>

<script>
  /*<![CDATA[*/
  const giahuyLike = {
    firebaseUrl: 'https://giahuydotnet-default-rtdb.firebaseio.com/',
    abbreviation: '1',  // 0 or 1 or 2
    sharedBy: 'www.giahuy.net' // Credit do not remove
  };
  
  function likePostLoad(){var script=document.createElement('script');script.async=true;script.src='https://cdn.giahuy.net/widget/js/like.min.js';document.body.appendChild(script)}function vcDtcLzy(){likePostLoad();localStorage.setItem("likePostJs","true")}var wcLdStorage=localStorage.getItem("likePostJs");if("true"!=wcLdStorage){var t=false,e=false;window.addEventListener("scroll",()=>{if((document.documentElement.scrollTop!==0&&t===false)||(document.body.scrollTop!==0&&t===false)){vcDtcLzy();t=true;e=true}},true);window.addEventListener("click",()=>{if(e===false){vcDtcLzy();e=true;t=true}},true)}else{likePostLoad()}
/*]]>*/</script>

Ghi chú:
firebaseUrl: Điền URL cơ sở dữ liệu thời gian thực firebase của bạn.
abbreviation: Điền 0 hoặc 1 hoặc 2, bạn sẽ thấy sự khác biệt nếu số lượt xem đạt trên 1000.

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é!