Bài viết này sẽ hướng dẫn anh em thêm Like - Dislike cho bài viết và nhận xét của blogspot. Chức năng này được viết bởi tác giả Hưng Hoàng Văn và bài viết gốc các bạn có thể xem tại đây
Và mình có chỉnh sửa đôi chút là với bài viết chỉ có Like - Dislike, còn gốc của tác giả là với bài viết thì có 3 button là Like, Thanks và Love
Không dài dòng nữa, bắt đầu thôi
Bước 2: Sau đó thay thế bằng đoạn code bên dưới
Bước 2: Làm như hướng dẫn để lấy các thông số như hình dưới
Ta sẽ có các thông số như ví dụ sau
Và mình có chỉnh sửa đôi chút là với bài viết chỉ có Like - Dislike, còn gốc của tác giả là với bài viết thì có 3 button là Like, Thanks và Love
Không dài dòng nữa, bắt đầu thôi
Like - Dislike cho bài viết
Thêm đoạn code bên dưới vào vị trí bạn muốn hiển thị trong bài viết<div class='post-reaction'> <a class='like-post' expr:data-post-id='data:blog.blogId + "_" + data:post.id'><svg class='svg svg-20' focusable='false' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'><g class='style-scope'><path class='style-scope yt-icon' d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z'/></g></svg><span class='total'/></a> <a class='dislike-post' expr:data-post-id='data:blog.blogId + "_" + data:post.id'><svg class='svg svg-20' focusable='false' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'><g class='style-scope'><path class='style-scope yt-icon' d='M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z'/></g></svg><span class='total'/></a> </div>
Like - Dislike cho nhận xét của blogspot
Bước 1: Trong template tìm<div class='comments-content'>Bước 2: Sau đó thay thế bằng đoạn code bên dưới
<div class='comments-content' expr:data-post-comment='data:post.id'>
Tạo Database và lấy thông số config Project
Bước 1: Tạo Database các bạn xem tại đâyBước 2: Làm như hướng dẫn để lấy các thông số như hình dưới
apiKey: "AIzaSyA-QgVATGUl1_ZIc_2PiXe9tS0GnQaibZM", authDomain: "huydc-090288.firebaseapp.com", databaseURL: "https://huydc-090288.firebaseio.com", projectId: "huydc-090288", storageBucket: "huydc-090288.appspot.com", messagingSenderId: "1008267032548", appId: "1:1008267032548:web:8fc8780909cbfe0d0a39f1"Hoặc đối với các bạn chưa tạo Project thì thực hiện như hướng dẫn bên dưới
JS
Thêm đoạn JS bên dưới vào trước thẻ đóng</body>
$.getScript("https://www.gstatic.com/firebasejs/5.7.2/firebase.js").done(function() {
function t(t, e, a, s) {
var o, l = s.find(t).eq(0),
c = l.attr(a);
if (null !== localStorage.getItem(e)) {
var n = JSON.parse(localStorage[e]);
for (i = 0; i < n.length; i++) n[i] === c && l.addClass(e)
}
firebase.database().ref(e + "/" + c + "/total").on("value", function(t) {
o = t.val() || 0, l.find(".total").eq(0).html(o)
}), l.on("click", function(t) {
if (t.preventDefault(), $(this).toggleClass(e), $(this).hasClass(e)) {
if (null === localStorage.getItem(e)) localStorage.setItem(e, JSON.stringify([c]));
else {
var a = JSON.parse(localStorage[e]);
a.filter(function(t) {
return t == c
}).length || (a.push(c), localStorage.setItem(e, JSON.stringify(a)))
}
o++
} else {
for (var s = JSON.parse(localStorage[e]), l = 0; l < s.length; l++) s[l] === c && s.splice(l, 1);
localStorage.setItem(e, JSON.stringify(s)), o--
}
firebase.database().ref(e + "/" + c + "/total").set(o)
})
}
firebase.initializeApp({ apiKey: "AIzaSyA-QgVATGUl1_ZIc_2PiXe9tS0GnQaibZM",
authDomain: "huydc-090288.firebaseapp.com",
databaseURL: "https://huydc-090288.firebaseio.com",
projectId: "huydc-090288",
storageBucket: "huydc-090288.appspot.com",
messagingSenderId: "1008267032548" });
$(".post-reaction").each(function() {
t(".like-post", "like", "data-post-id", $(this));
t(".dislike-post", "dislike", "data-post-id", $(this))
});
$(".comments-content .comment .comment-block").each(function() {
var e = $(this),
a = $(".comments-content").attr("data-post-comment");
e.append(`<div class="comment-reaction"><a class="comment-dislike" data-comment-id="${a}-${e.parents("li").attr("id")}"><svg class="svg svg-15" focusable="false" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g class="style-scope"><path class="style-scope yt-icon" d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"></path></g></svg><span class="total"></span></a><a class="comment-like" data-comment-id="${a}-${e.parents("li").attr("id")}"><svg class="svg svg-15" focusable="false" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g class="style-scope"><path class="style-scope yt-icon" d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path></g></svg><span class="total"></span></a></div>`);
t(".comment-like", "like-cmt", "data-comment-id", e);
t(".comment-dislike", "dislike-cmt", "data-comment-id", e)
})
})
Lưu ý: Các bạn nhớ thay các thông số màu đỏ này bằng thông số ở bước trên nhé
CSS
.post-reaction {margin: 15px 0;float: right;}
.svg-20 {display: inline-block;width: 20px;height: 20px;fill: #999;position: relative;top: 3px;margin-right: 3px;}
.like-post .total, .dislike-post .total{font-size: 20px;font-weight: bold;color:#999;}
.like-post, .dislike-post{cursor: pointer;margin-right: 8px;}
.post-reaction .like svg, .post-reaction .dislike svg{fill: #005b53;}
.post-reaction .like .total, .post-reaction .dislike .total{color: #005b53;}
.svg-15{display:inline-block;width:15px;height:15px;fill:#999}
.comment-reaction .comment-like,.comment-reaction .comment-dislike{cursor:pointer;margin-right:8px;float: right;}
.comment-reaction .comment-like .total,.comment-reaction .comment-dislike .total{font-size:15px;color:#999}
.comment-reaction .comment-like.like-cmt .total{color:#005b53}
.comment-reaction .comment-like.like-cmt svg{fill:#005b53}
.comment-reaction .comment-dislike.dislike-cmt .total{color:#2187e7}
.comment-reaction .comment-dislike.dislike-cmt svg{fill:#005b53}
.comment-reaction svg{position:relative;top:3px;margin-right:3px}
Vậy là hoàn thành, chúc anh em thành công!
