Hôm nay mình sẽ chia sẻ một tiện ích thích bài đăng cho nền tảng blogger.
Widget này có chức năng hiển thị số like trên các bài viết mà chúng ta đã tạo, mình sử dụng lại widget này từ Firebase Console
Mình cũng đã thêm localStorage vào tiện ích này để những người đã thích không thể thích nó nhiều lần, nhưng nếu cookie trình duyệt bị xóa thì có thể thích lại.
Widget này chỉ có thể tăng lượt thích/click chứ không thể bỏ thích hay hủy like, để demo các bạn bấm vào nút bên dưới nhé, bạn nào muốn dùng thử thì xem thế nào nhé.
|
| Thêm tiện ích like bài viết trên blogger |
Tiện ích thích bài đăng cho Blogger
Lưu ý!
Tiện ích này chỉ dành cho nền tảng blogger/blogspot.
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> và dán các mã CSS sau ngay trên vào nó.
/* Widget Like */
.gh-like-btn{position:relative;padding:20px 20px;background:#f89000;font-size:18px;border-radius:5px;color:#fff;outline:none;border:none;display:flex;align-items:center;justify-content:center;cursor:default}
.gh-like-btn::after{content:'';position:absolute;padding:20px 20px;background:#f89000;bottom:-15px;transform:rotate(45deg)}
.gh-like-btn svg{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:25px;height:25px;margin-right:5px;z-index:2}
.gh-like-btn svg.like{fill:#fff;stroke:#fff}
#gh-liked{margin-top:5px;z-index:2}
#gh-liked::before{content:attr(data-click)}
#gh-liked::after{content:attr(data-text);margin-left:5px}
.wrap-center{display:flex;justify-content:center}
Bước 6: Tiếp tục hãy thêm code sau ngay bên dưới thẻ: <data:post.body/>.
Nếu bạn đang sử dụng theme Median ui 1.7 có thể đặt mã bên dưới thẻ: <b:include data='post' name='postBody'/>.
<div class='wrap-center'> <button class='gh-like-btn' expr:data-like='data:blog.blogId + "/" + data:post.id + "/likepost"'> <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-liked' data-click='0' data-text='Like' data-after='Liked'></span> </button> </div> <script> /*<![CDATA[*/ const ghLikeFbase = { firebaseUrl: 'https://giahuy-e986f-default-rtdb.firebaseio.com/', abbreviation: '1', // 0 or 1 or 2 sharedBy: 'www.giahuy.net' // Credit }; function likePostLoad(){var script=document.createElement('script');script.async= true;script.src='https://cdn.giahuy.net/widget/js/like.js';document.body.appendChild(script)}function vcDtcLzy(){likePostLoad(),localStorage.setItem('likePostJs','true')}var ghLdStorage=localStorage.getItem('likePostJs');if('true'!=ghLdStorage){var t=!1,e=!1;window.addEventListener('scroll',()=>{(0!=document.documentElement.scrollTop&&!1===t||0!=document.body.scrollTop&&!1===t)&&(vcDtcLzy(),t=!0,e=!0)},!0),window.addEventListener('click',()=>{!1===e&&!1===e&&(vcDtcLzy(),e=!0,t=!0)},!0)}'true'===ghLdStorage&&likePostLoad(); /*]]>*/</script>
Thay thế các phần được đánh dấu, tức là:
- -
databaseUrl: Đ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 .
Tạo cơ sở dữ liệu và thêm quy tắc
Đầu tiên, chúng ta cần Tạo một Dự án Firebase để thiết lập cơ sở dữ liệu thời gian thực trong Firebase. Chúng tôi có thể Lưu trữ và Đồng bộ hóa Dữ liệu trong thời gian thực với cơ sở dữ liệu thời gian thực.
Để tạo Dự án Firebase và cơ sở dữ liệu thời gian thực, hãy làm theo các bước sau:
Tạo dự án trong Firebase
Bước 1: Truy cập Firebase Console.
Bước 2: Nhấp vào Create a Project và Enter Project Name, chấp nhận tất cả các điều khoản và Tiếp tục.
Bước 3: Bật và định cấu hình Google Analytics mặc dù bạn có thể tắt Google Analytics cho Dự án này, hãy bỏ qua bước này và nhấp vào Tạo dự án.
Xong! Bạn đã tạo thành công Dự án trong Firebase. Bây giờ chúng ta cần thiết lập Cơ sở dữ liệu thời gian thực trong Dự án này.
Thiết lập và cấu hình cơ sở dữ liệu
Bước 1: Đi tới Firebase Console và Chọn Dự án của bạn.
Bước 2: Đi tới Realtime Database trong menu Xây dựng.
Bước 3: Nhấp vào Create Database, Chọn vị trí ưa thích và nhấp vào Tiếp theo.
Bước 4: Chọn Locked Mode và nhấp vào Bật.
Xong! Bạn đã tạo thành công cơ sở dữ liệu thời gian thực, bây giờ hãy sao chép URL cơ sở dữ liệu bên dưới và dán nó vào nơi nào đó nó sẽ được sử dụng trong thiết lập HTML chủ đề.
Thêm quy tắc vào cơ sở dữ liệu
Bước 5: Bây giờ, nhấp vào Rules và dán các mã sau sau khi thay thế các phần được đánh dấu bằng ID Blog của bạn.
{
'rules': {
'.read': 'true',
'.write': 'true',
}
}
Bước 6: Nhấp vào Xuất bản sau khi thực hiện tất cả các thay đổi như hình bên dưới.
Trên đây là hướng dẫn thêm 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é.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!
Copyright © www.giahuy.net