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

Chia sẻ:

18.10.23 | 11 nhận xét | lượt xem

Like - Dislike cho bài viết
Like - Dislike cho nhận xét của blogspot
Tạo Database và lấy thông số config Project
JS
CSS

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!

$.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: "AIzaSyCs0mSyOmRpRkjAUwxTowSJvGO6hbmebiE",
authDomain: "like-and-dislike-3345a.firebaseapp.com",
databaseURL: "https://like-and-dislike-3345a-default-rtdb.firebaseio.com",
projectId: "like-and-dislike-3345a",
storageBucket: "like-and-dislike-3345a.appspot.com",
messagingSenderId: "662800753764"
});
$(".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)
})
})

Hải Long 19.10.23

Chia sẻ nhiều trên fb cũng tốt thôi nhưng có cái dở là vấn nạn cào bài bây giờ ghê quá mà blog của ông hầu như các bài từ 2020 tới giờ chưa index dc mấy bọn nó cào chơi wp lại index trước ông và có khi của ông mãi ko index dc ^^
1. A Đê Min 19.10.23
  
  Ha ha, kệ thôi bạn. Làm cho vui với lưu trữ kiến thức í mà :D
Hải Long 19.10.23

Cái DMCA của ông thì mới chưa bảo vệ dc ngày nào với lại nó chả ăn thua gì đâu ^^

Nặc danh 19.10.23

đã làm bước 1, tới bước 2 lấy thông số như hình thế nào ad

A Đê Min 19.10.23

Bạn tạo Database theo hướng dẫn tại đây
Tạo được rồi thì làm bước theo theo như ảnh

Nặc danh 19.10.23

chỗ Project settings bấm vào nó không hiển giống như bác
A Đê Min 19.10.23

À, mình hiểu rồi. Do mình tạo trước đấy nên mới có sẵn. Để mình update hướng dẫn
A Đê Min 19.10.23

Đây bạn nhé, xem hướng dẫn
Nặc danh 19.10.23

đã làm theo hướng dẫn lấy được các thông số như bước 2, nhưng bấm vào không hiển thị. không biết sai chỗ nào. bác xem giúp mình với https://www.suachuamaylanhbienhoa.net/

Bạn thử đoạn code bên dưới

Máy lạnh biên hòa 19.10.23

Đoạn code chạy tốt rồi nha bác, thanks bác nhé

Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh

Chèn code: [pre]Code đã mã hóa [/pre]

Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Chèn link: Click để chèn link

Bài Viết Mới ▼

Thủ Thuật Blogger

Javascript

CSS

Chủ Đề Hot ▼

Suport ▼

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

Like - Dislike cho bài viết

Like - Dislike cho nhận xét của blogspot

Tạo Database và lấy thông số config Project

JS

CSS

11

aHí

Nhận Xét Mới

Nhãn

Liên Kết Link

Bài Viết Mới ▼

Thủ Thuật Blogger

Javascript

CSS

Chủ Đề Hot ▼

Suport ▼

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

Like - Dislike cho bài viết

Like - Dislike cho nhận xét của blogspot

Tạo Database và lấy thông số config Project

JS

CSS

Bài viết liên quan:

11

Nhận Xét Mới

Nhãn