[Blogger] Reactions Comments với bộ đếm thời gian thực

Đây là phần tiếp theo trong loạt bài hướng dẫn tạo bộ reactions với bộ đếm thời gian thực sử dụng Google Firebase. Trong khuôn khổ bài viết này tôi sẽ cùng các bạn triển khai tiếp với hệ thống bình luận mặc định của blogger.
Về mặt bản chất cũng không khác post reactions là mấy, cái khó ở đây đó là bạn cần lấy được id và xử lý sự kiện khi click cho từng bình luận.

Mặc định blogger sử dụng thẻ <data:post.commentHtml/> để xuất ra mã HTML của thread comments, điều đó có nghĩa nếu không triển khai thread comments mới bạn sẽ cần đến js để chèn thêm các phần tử HTML như nút Like, Dislike,... cho từng comment child

1. Markup

Bạn tìm đến thẻ <div class='comments-content'>

Thêm cho nó thuộc tính sau expr:data-post-comment='data:post.id'.

Sau khi thêm sẽ được

<div class='comments-content' expr:data-post-comment='data:post.id'>
...
</div>

2. CSS

.svg-18{display:inline-block;width:18px;height:18px;fill:#888}
.comment-reaction .comment-like,.comment-reaction .comment-dislike{cursor:pointer;margin-right:8px}
.comment-reaction .comment-like .total,.comment-reaction .comment-dislike .total{font-size:15px;color:#888}
.comment-reaction .comment-like.like-cmt .total{color:#2187e7}
.comment-reaction .comment-like.like-cmt svg{fill:#2187e7}
.comment-reaction .comment-dislike.dislike-cmt .total{color:#2187e7}
.comment-reaction .comment-dislike.dislike-cmt svg{fill:#2187e7}
.comment-reaction svg{position:relative;top:3px;margin-right:3px}

3. JS

Bạn tự tích hợp jQuery nếu blog chưa có. Truy cập https://console.firebase.google.com/ và tạo cho mình 1 project

Sau khi tạo xong bạn vào mục Database và tạo mới như sau

Thiết lập chế độ cho phép đọc/ghi

Quay trở lại tab Authentication để lấy link nhúng và các thông số config cho project của bạn

Bạn lắp các thông số đó vào script dưới và dán script trước </body>

<b:if cond='data:view.isPost'>
<script type='text/javascript'>//<![CDATA[
$.getScript("https://www.gstatic.com/firebasejs/5.7.2/firebase.js").done(function() {
  // Comment reactions with real time counter by Hung1001
  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: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  }); /* Replace */

  $(".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-like" data-comment-id="${a}-${e.parents("li").attr("id")}"><svg class="svg svg-18" 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><a class="comment-dislike" data-comment-id="${a}-${e.parents("li").attr("id")}"><svg class="svg svg-18" 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></div>`);

   // start 2 reactions
   t(".comment-like", "like-cmt", "data-comment-id", e);
   t(".comment-dislike", "dislike-cmt", "data-comment-id", e);
  });
});
//]]>
</script>
</b:if>

Lưu mẫu và kiểm tra thành quả !

Mở rộng : nếu bạn sử dụng đồng thời cả post và comments reactions có thể làm theo hướng dẫn sau để tối ưu code . Truy cập liên kết sau để biết thêm chi tiết

Như vậy tôi đã giới thiệu xong cho bạn cách tạo Reactions Comments với bộ đếm thời gian thực, do blogger còn nhiều hạn chế mặt khác người dùng rất quen thuộc các tính năng reaction trên mạng xã hội nên những thủ thuật như này sẽ giúp bạn ghi điểm rất nhiều với họ

Để lại bình luận nếu bạn gặp khó khăn và chúc thành công !