Like và Dislike cho bài viết và nhận xét của Blogspot

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

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 + &quot;_&quot; + 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 + &quot;_&quot; + 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 đây
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

  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!