Thêm reactions bài viết với realtime database cho Blog - Tôi Share

Tính năng reactions cho bài viết là một trong các tính năng độc đáo các bạn có thể thường thấy trên các mạng xã hội như Facebook, Twitter,... Với một trang như báo điện tử hay blog thì reactions có thể giúp người đọc bày tỏ cảm xúc về bài viết của chúng ta. Trên internet có rất nhiều thủ thuật khác nhau sử dụng các plugin hay thư viện từ trang thứ 3 để thêm reactions cho bài viết. Còn trong bài viết này thì mình sẽ hướng dẫn các bạn cách thêm reactions bài viết với realtime database cho Blog sử dụng dịch vụ Firebase của Google.

Về cơ bản Realtime Database là một cơ sở dữ liệu NoSQL được lưu trữ đám mây cho phép bạn lưu trữ và đồng bộ dữ liệu của Firebase. Dữ liệu được lưu trữ dưới dạng JSON và được đồng bộ hóa theo thời gian thực cho mọi máy kết nối.

Khi bạn xây dựng các ứng dụng đa nền tảng với SDK iOS, Android và JavaScript, tất cả các client của bạn sẽ chia sẻ một phiên bản Realtime Database và tự động cập nhật với dữ liệu mới nhất. Do đó đối với các ứng dụng di động yêu cầu trạng thái đồng bộ hóa giữa các máy trong thời gian thực thì đây là một giải pháp hiệu quả và có độ trễ thấp.

Thông tin qua cho các bạn hiểu về Realtime Database là như vậy, tiện ích reactions này sẽ có các reactions như Love, Sad, Happy, Sleepy, Angry, Dead và Wink các bạn có thể thêm các reactions khác tuỳ ý nữa.

Tạo Realtime Database sử dụng Google Firebase

Đầu tiên thì chúng ta cần tạo một Firebase Project để thiết lập Realtimne Database cho chúng ta.

Tạo Project trong Firebase

Bước 1: Các bạn vào https://console.firebase.google.com.

Bước 2: Chọn vào Create a Project và nhập tên Project, các bạn cứ nhấn Continue để tiếp tục.

Bước 3: Các bạn hãy tắt Google Analytics và bấm vào Create Project.

Vậy là xong việc tạo Project trong Firebase, tiếp theo là cài đặt Realtime Database.

Cài đặt Realtime Database

Bước 1: Truy cập vào Firebase Console và chọn Project vừa tạo.

Bước 2: Tại menu bên trái truy cập vào Realtime Database.

Bước 3: Chọn vào Create Database, và chọn Next.

Bước 4: Tiếp tục chọn Test Mode và nhấn vào Enable.

Vậy là chúng ta đã tạo xong Realtime Database, hãy copy lại đường dẫn như hình mình đánh dấu.

Tiếp theo các bạn chuyển sang tab Rules và sửa lại thành như sau:

Chỉnh sửa trong template

Bước 1: Các bạn chèn đoạn CSS sau vào trước thẻ ]]></b:skin>

  .reaction-section{position:relative;display:block;margin-top:40px;padding:30px 10px;border:1px solid #8882}
  .reaction-section-title{display:block;margin-bottom:25px;text-align:center}
  .rb-reaction{display:flex;flex-flow:row nowrap;justify-content:space-between;max-width:700px;margin-right:auto;margin-left:auto}
  .reaction{position:relative;flex:0 0 85px;max-width:85px;cursor:pointer}
  .reaction-content{display:block;padding-top:5px;padding-bottom:5px;-webkit-transition:all .3s cubic-bezier(.36,.8,.41,1);transition:all .3s cubic-bezier(.36,.8,.41,1);background-color:transparent}
  .reaction.active .reaction-content{border-color:#f9d045}
  .reaction-content .reaction-icon{display:block;width:100%;height:auto;margin:auto;padding-right:20px;padding-left:20px;-webkit-transition:transform .3s cubic-bezier(.36,.8,.41,1);transition:transform .3s cubic-bezier(.36,.8,.41,1);-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg);will-change:transform}
  .reaction:hover .reaction-icon{-webkit-transform:scale(1.4) rotate(-20deg);transform:scale(1.4) rotate(-20deg)}
  .reaction-content svg{max-width:100%;width:100%;height:auto}
  .reaction-title.h6{font-size:13px;display:block;margin-top:5px;text-align:center;white-space:nowrap}
  .total-wrap{font-size:1rem;font-weight:700;line-height:1.5;display:block;text-align:center;background-color:rgba(0,0,0,.025)}
  .reaction.active .total-wrap{color:#fff;background-color:#f9d045}
  .reaction:before{content:'';-webkit-transition:opacity .3s;transition:opacity .3s;pointer-events:none;opacity:0}
  .reaction.loading:before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='200' height='200'%3E%3Cg data-idx='1'%3E%3Cg transform='matrix(1,0,0,1,80,50)' data-idx='2'%3E%3Cg transform='matrix(1,0,0,1,0,0)' data-idx='3'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.9103' data-idx='4' transform='matrix(1.4551500082015991,0,0,1.4551500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,71.21320343017578,71.21320343017578)' data-idx='7'%3E%3Cg transform='matrix(0.7071067811865476,0.7071067811865476,-0.7071067811865476,0.7071067811865476,0,0)' data-idx='8'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.0353' data-idx='9' transform='matrix(1.0176500082015991,0,0,1.0176500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,50,80)' data-idx='12'%3E%3Cg transform='matrix(6.123233995736766e-17,1,-1,6.123233995736766e-17,0,0)' data-idx='13'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.1603' data-idx='14' transform='matrix(1.0801500082015991,0,0,1.0801500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,28.78679656982422,71.21320343017578)' data-idx='17'%3E%3Cg transform='matrix(-0.7071067811865475,0.7071067811865476,-0.7071067811865476,-0.7071067811865475,0,0)' data-idx='18'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.2853' data-idx='19' transform='matrix(1.1426500082015991,0,0,1.1426500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,20,50)' data-idx='22'%3E%3Cg transform='matrix(-1,1.2246467991473532e-16,-1.2246467991473532e-16,-1,0,0)' data-idx='23'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.4103' data-idx='24' transform='matrix(1.2051500082015991,0,0,1.2051500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,28.78679656982422,28.78679656982422)' data-idx='27'%3E%3Cg transform='matrix(-0.7071067811865477,-0.7071067811865475,0.7071067811865475,-0.7071067811865477,0,0)' data-idx='28'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.5353' data-idx='29' transform='matrix(1.2676500082015991,0,0,1.2676500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,50,20)' data-idx='32'%3E%3Cg transform='matrix(-1.8369701987210297e-16,-1,1,-1.8369701987210297e-16,0,0)' data-idx='33'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.6603' data-idx='34' transform='matrix(1.3301500082015991,0,0,1.3301500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,71.21320343017578,28.78679656982422)' data-idx='37'%3E%3Cg transform='matrix(0.7071067811865474,-0.7071067811865477,0.7071067811865477,0.7071067811865474,0,0)' data-idx='38'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23f9d045' fill-opacity='0.7853' data-idx='39' transform='matrix(1.3926500082015991,0,0,1.3926500082015991,0,0)'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg data-idx='42'%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size: 100%;position:absolute;right:0;bottom:auto;left:auto;display:block;width:18px;height:18px;content:'';-webkit-transform-origin:center;transform-origin:center;animation:reaction-spinner 2s linear infinite;letter-spacing:0;opacity:1;color:#f9d045;will-change:transform}
  @keyframes reaction-spinner {
    to{transform:rotate(360deg);-webkit-transform:rotate(360deg)}
  }
  @media only screen and (max-width: 767px) {
    .reaction-section{padding:20px 7px}
    .reaction-section-title{margin-bottom:10px}
    .rb-reaction{flex-flow:row wrap;justify-content:space-around}
    .reaction{flex:0 0 70px;margin-top:5px}
    .reaction-content{padding-right:2px;padding-bottom:2px}
    .reaction-content .reaction-icon{width:40px;padding-right:2px;padding-left:2px}
    .h6.reaction-title{display:none}
    span.total-wrap{font-size:11px;margin-top:5px}
  }
  @media only screen and (max-width: 767px) {
    .reaction-section{margin-top:25px}
  }

Bước 2: Thêm đoạn HTML sau vào phía dưới thẻ <data:post.body/>:

<aside class="reaction-section">
  <div class="reaction-section-title">
    <h3>What&#8217;s your reaction? </h3>
  </div>
  <div class="reaction-section-content">
    <aside id="reaction-1472" class="rb-reaction reaction-wrap">

      <div class="reaction love-action" expr:data-reaction-id="data:post.id">
        <span class="reaction-content">
          <div class="reaction-icon">
            <svg viewBox="0 0 150 150"><use xlink:href="#symbol-love"></use></svg>
          </div>
          <span class="reaction-title h6">Love</span>
        </span>
        <span class="total-wrap">
          <span class="reaction-count">0</span>
        </span>
      </div>

      <div class="reaction sad-action" expr:data-reaction-id="data:post.id">
        <span class="reaction-content">
          <div class="reaction-icon">
            <svg viewBox="0 0 150 150"><use xlink:href="#symbol-sad"></use></svg>
          </div>
          <span class="reaction-title h6">Sad</span>
        </span>
        <span class="total-wrap">
          <span class="reaction-count">0</span>
        </span>
      </div>

      <div class="reaction happy-action" expr:data-reaction-id="data:post.id">
        <span class="reaction-content">
          <div class="reaction-icon">
            <svg viewBox="0 0 150 150"><use xlink:href="#symbol-happy"></use></svg>
          </div>
          <span class="reaction-title h6">Happy</span>
        </span>
        <span class="total-wrap">
          <span class="reaction-count">0</span>
        </span>
      </div>

      <div class="reaction sleepy-action" expr:data-reaction-id="data:post.id">
        <span class="reaction-content">
          <div class="reaction-icon">
            <svg viewBox="0 0 150 150"><use xlink:href="#symbol-sleepy"></use></svg>
          </div>
          <span class="reaction-title h6">Sleepy</span>
        </span>
        <span class="total-wrap">
          <span class="reaction-count">0</span>
        </span>
      </div>

      <div class="reaction angry-action" expr:data-reaction-id="data:post.id">
        <span class="reaction-content">
          <div class="reaction-icon">
            <svg viewBox="0 0 150 150"><use xlink:href="#symbol-angry"></use></svg>
          </div>
          <span class="reaction-title h6">Angry</span>
        </span>
        <span class="total-wrap">
          <span class="reaction-count">0</span>
        </span>
      </div>

      <div class="reaction dead-action" expr:data-reaction-id="data:post.id">
        <span class="reaction-content">
          <div class="reaction-icon">
            <svg viewBox="0 0 150 150"><use xlink:href="#symbol-dead"></use></svg>
          </div>
          <span class="reaction-title h6">Dead</span>
        </span>
        <span class="total-wrap">
          <span class="reaction-count">0</span>
        </span>
      </div>

      <div class="reaction wink-action" expr:data-reaction-id="data:post.id">
        <span class="reaction-content">
          <div class="reaction-icon">
            <svg viewBox="0 0 150 150"><use xlink:href="#symbol-wink"></use></svg>
          </div>
          <span class="reaction-title h6">Wink</span>
        </span>
        <span class="total-wrap">
          <span class="reaction-count">0</span>
        </span>
      </div>

    </aside>
  </div>
</aside>

Tiếp theo tìm đến thẻ </body> và dán đoạn HTML SVG dưới đây phía trước nó:

<svg style="width:0;height:0;position:absolute; visibility:hidden" focusable="false">
  <linearGradient id="gangry" xmlns="http://www.w3.org/2000/svg" gradientTransform="matrix(1 0 0 -1 -290 -347)" gradientUnits="userSpaceOnUse" x1="306" x2="306" y1="-378.9995" y2="-347">
    <stop offset="0" style="stop-color:#FFE254" />
    <stop offset="0.1174" style="stop-color:#FFDC54" />
    <stop offset="0.2707" style="stop-color:#FECC55" />
    <stop offset="0.4439" style="stop-color:#FCB156" />
    <stop offset="0.6318" style="stop-color:#FA8B57" />
    <stop offset="0.8291" style="stop-color:#F85B59" />
    <stop offset="1" style="stop-color:#F52C5B" />
  </linearGradient>
  <linearGradient gradientUnits="userSpaceOnUse" id="gcry" x1="25.001" x2="8.9985" y1="2.1416" y2="29.8586">
    <stop offset="0" style="stop-color:#FFE254" />
    <stop offset="1" style="stop-color:#FFB255" />
  </linearGradient>
  <linearGradient gradientUnits="userSpaceOnUse" id="gdead" x1="24.001" x2="7.9985" y1="2.1416" y2="29.8586">
    <stop offset="0" style="stop-color:#FFE254" />
    <stop offset="1" style="stop-color:#FFB255" />
  </linearGradient>
  <linearGradient gradientUnits="userSpaceOnUse" id="gembarrass" x1="24.001" x2="7.9985" y1="2.1416" y2="29.8586">
    <stop offset="0" style="stop-color:#FFE254" />
    <stop offset="1" style="stop-color:#FFB255" />
  </linearGradient>
  <linearGradient gradientTransform="matrix(1 0 0 -1 -290 -347)" gradientUnits="userSpaceOnUse" id="ghappy" x1="314.001" x2="297.998" y1="-349.1416" y2="-376.8595">
    <stop offset="0" style="stop-color:#FFE254" />
    <stop offset="1" style="stop-color:#FFB255" />
  </linearGradient>
  <linearGradient gradientTransform="matrix(-1 0 0 1 69.8398 0.3862)" gradientUnits="userSpaceOnUse" id="gjoy_1" x1="45.8389" x2="61.8413" y1="1.7559" y2="29.4729">
    <stop offset="0" style="stop-color:#FFE254" />
    <stop offset="1" style="stop-color:#FFB255" />
  </linearGradient>
  <radialGradient cx="44.998" cy="20" gradientTransform="matrix(-1 0 0 1 69.998 -7)" gradientUnits="userSpaceOnUse" id="gjoy_2" r="5">
    <stop offset="0" style="stop-color:#F52C5B;stop-opacity:0.6" />
    <stop offset="0.1526" style="stop-color:#F5305B;stop-opacity:0.5389" />
    <stop offset="0.3108" style="stop-color:#F63D5A;stop-opacity:0.4757" />
    <stop offset="0.4715" style="stop-color:#F75159;stop-opacity:0.4114" />
    <stop offset="0.6341" style="stop-color:#F96E58;stop-opacity:0.3464" />
    <stop offset="0.798" style="stop-color:#FB9456;stop-opacity:0.2808" />
    <stop offset="0.961" style="stop-color:#FEC155;stop-opacity:0.2156" />
    <stop offset="1" style="stop-color:#FFCD54;stop-opacity:0.2" />
  </radialGradient>
  <radialGradient cx="62.9473" cy="3.689" gradientTransform="matrix(-0.9189 0 0 0.9189 64.8423 15.6108)" gradientUnits="userSpaceOnUse" id="gjoy_3" r="5.4414">
    <stop offset="0" style="stop-color:#F52C5B;stop-opacity:0.6" />
    <stop offset="0.1526" style="stop-color:#F5305B;stop-opacity:0.5389" />
    <stop offset="0.3108" style="stop-color:#F63D5A;stop-opacity:0.4757" />
    <stop offset="0.4715" style="stop-color:#F75159;stop-opacity:0.4114" />
    <stop offset="0.6341" style="stop-color:#F96E58;stop-opacity:0.3464" />
    <stop offset="0.798" style="stop-color:#FB9456;stop-opacity:0.2808" />
    <stop offset="0.961" style="stop-color:#FEC155;stop-opacity:0.2156" />
    <stop offset="1" style="stop-color:#FFCD54;stop-opacity:0.2" />
  </radialGradient>
  <linearGradient gradientTransform="matrix(-1 0 0 1 69.8398 0.3862)" gradientUnits="userSpaceOnUse" id="glove" x1="45.8389" x2="61.8413" y1="2.9731" y2="30.6902">
    <stop offset="0" style="stop-color:#FFE254" />
    <stop offset="1" style="stop-color:#FFB255" />
  </linearGradient>
  <linearGradient gradientUnits="userSpaceOnUse" id="gsad" x1="24.001" x2="7.9984" y1="2.1416" y2="29.8589">
    <stop offset="0" style="stop-color:#FFE254" />
    <stop offset="1" style="stop-color:#FFB255" />
  </linearGradient>
  <linearGradient gradientUnits="userSpaceOnUse" id="gsleepy" x1="24.001" x2="7.9985" y1="2.1416" y2="29.8586">
    <stop offset="0" style="stop-color:#FFE254" />
    <stop offset="1" style="stop-color:#FFB255" />
  </linearGradient>
  <linearGradient gradientUnits="userSpaceOnUse" id="gwink" x1="24.001" x2="7.9985" y1="2.1416" y2="29.8586">
    <stop offset="0" style="stop-color:#FFE254" />
    <stop offset="1" style="stop-color:#FFB255" />
  </linearGradient>
  <linearGradient gradientTransform="matrix(1 0 0 -1 -290 -347)" gradientUnits="userSpaceOnUse" id="gsurprise" x1="314.001" x2="297.998" y1="-349.1416" y2="-376.8595">
    <stop offset="0" style="stop-color:#FFE254" />
    <stop offset="1" style="stop-color:#FFB255" />
  </linearGradient>
</svg>
<svg style="display:none; visibility:hidden">
  <symbol id="symbol-angry" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="16" fill="url(#gangry)" />
    <circle cx="9.5" cy="19.5" r="1.5" fill="#212731" />
    <circle cx="22.5" cy="19.5" r="1.5" fill="#212731" />
    <path d="M5 16c1 1 4.025 3 9 3M27 16c-1 1-4.025 3-9 3" fill="none" stroke="#212731" stroke-miterlimit="10" />
    <path fill="#212731" d="M12 25h8v1h-8z" />
  </symbol>
  <symbol id="symbol-cry" viewBox="0 0 34 32" xmlns="http://www.w3.org/2000/svg">
    <circle cx="17" cy="16" r="16" fill="url(#gcry)" />
    <path d="M27.85 13.38a.512.512 0 0 1-.64.33l-4.81-1.47c-.271-.08-.4-.36-.4-.62v-.24c0-.26.13-.54.4-.62l4.84-1.47c.27-.08.55.06.63.33.08.26-.07.54-.341.62L23.45 11.5l4.079 1.26c.261.08.401.36.321.62zM6.041 9.62a.513.513 0 0 1 .641-.33l4.864 1.47c.27.08.454.36.454.62v.24c0 .26-.184.54-.454.62l-4.867 1.47a.513.513 0 0 1-.644-.33.493.493 0 0 1 .334-.62l4.076-1.26-4.082-1.26a.496.496 0 0 1-.322-.62z" fill="#212731" />
    <path d="M.525 15.598a2 2 0 0 0 2.949 2.703C4.221 17.486 4.703 14 4.703 14s-3.432.783-4.178 1.598zM33.475 15.648a2 2 0 0 1-2.949 2.703c-.746-.814-1.229-4.301-1.229-4.301s3.432.784 4.178 1.598z" fill="#2667c6" />
    <ellipse cx="17" cy="22" rx="10" ry="5" fill="#f52c5b" />
    <path d="M17 17c-5.523 0-10 2.239-10 5 0 1.183.826 2.268 2.199 3.123C9.998 23.337 13.185 22 17 22s7.001 1.337 7.801 3.123C26.174 24.268 27 23.183 27 22c0-2.761-4.477-5-10-5z" fill="#212731" />
  </symbol>
  <symbol id="symbol-dead" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="16" fill="url(#gdead)" />
    <path d="M23 23a2 2 0 0 1-2 2H11a2 2 0 0 1 0-4h10a2 2 0 0 1 2 2z" fill="#f52c5b" />
    <path d="M21 21H11a2 2 0 0 0 0 4h.307c.688-.581 2.52-1 4.693-1s4.005.419 4.693 1H21a2 2 0 0 0 0-4zM26.529 12.76l-2.537-1.093c.001-.016.008-.031.008-.047v-.24c0-.016-.007-.031-.008-.047l2.537-1.093a.497.497 0 0 0-.289-.95l-3.269 1.296-3.29-1.296a.513.513 0 0 0-.64.33c-.08.26.062.54.322.62l2.638 1.123-.002.017v.24l.002.017-2.633 1.123a.493.493 0 0 0-.334.62c.08.271.374.41.644.33l3.291-1.296 3.24 1.296c.261.08.56-.06.64-.33a.492.492 0 0 0-.32-.62zM12.529 12.76l-2.537-1.093c.001-.016.008-.031.008-.047v-.24c0-.016-.007-.031-.008-.047l2.537-1.093a.497.497 0 0 0-.289-.95l-3.269 1.296L5.682 9.29a.513.513 0 0 0-.64.33c-.08.26.062.54.322.62l2.638 1.123L8 11.38v.24l.002.017-2.633 1.123a.493.493 0 0 0-.334.62c.08.271.374.41.644.33l3.291-1.296 3.24 1.296c.261.08.56-.06.64-.33a.494.494 0 0 0-.321-.62z" fill="#212731" />
  </symbol>
  <symbol id="symbol-embarrass" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="16" fill="url(#gembarrass)" />
    <path d="M24 22c1.952 1.952-2.477 5-8 5s-9.952-3.048-8-5c2-2 2.477 1 8 1s6-3 8-1z" fill="#f52c5b" />
    <path d="M6.538 15.078c.94-4.015 5.941-3.985 7 0M19.537 15.078c.941-4.014 5.941-3.984 7 0" fill="none" stroke="#212731" stroke-miterlimit="10" />
    <path d="M24 22c-2-2-2.477 1-8 1s-6-3-8-1c-1.212 1.212.038 2.846 2.481 3.911C11.397 25.376 13.522 25 16 25s4.603.376 5.519.911C23.962 24.846 25.213 23.212 24 22z" fill="#212731" />
    <path d="M24 22c-2-2-2.477 1-8 1s-6-3-8-1c-1.212 1.212.038 2.846 2.481 3.911C11.397 25.376 13.522 25 16 25s4.603.376 5.519.911C23.962 24.846 25.213 23.212 24 22z" fill="#212731" />
    <path d="M30 8a2 2 0 0 1-4 0c0-1.104 2-4 2-4s2 2.896 2 4z" fill="#2667c6" />
  </symbol>
  <symbol id="symbol-happy" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="16" fill="url(#ghappy)" />
    <path d="M16 27c6.075 0 11-4.925 11-11H5c0 6.075 4.925 11 11 11z" fill="#f52c5b" />
    <path d="M16 19c3.416 0 6.468 1.557 8.484 4A10.944 10.944 0 0 0 27 16H5c0 2.659.944 5.098 2.515 7 2.017-2.443 5.069-4 8.485-4zM26.85 13.38a.512.512 0 0 1-.64.33l-4.81-1.47c-.271-.08-.4-.36-.4-.62v-.24c0-.26.13-.54.4-.62l4.84-1.47c.27-.08.55.06.63.33.08.26-.07.54-.341.62L22.45 11.5l4.079 1.26c.261.08.401.36.321.62zM5.042 9.62c.08-.271.38-.41.64-.33l4.864 1.47c.27.08.454.36.454.62v.24c0 .26-.184.54-.454.62l-4.867 1.47a.513.513 0 0 1-.644-.33.493.493 0 0 1 .333-.62l4.076-1.26-4.082-1.26a.494.494 0 0 1-.32-.62z" fill="#212731" />
  </symbol>
  <symbol id="symbol-joy" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="16" fill="url(#gjoy_1)" />
    <path d="M20 13.001A5.004 5.004 0 0 0 25 18c2.757 0 5-2.242 5-5s-2.24-5-5-5c-2.758 0-5 2.243-5 5.001z" opacity=".6" fill="url(#gjoy_2)" />
    <circle cx="7" cy="19" r="5" opacity=".6" fill="url(#gjoy_3)" />
    <path d="M22 15c0 4-6 7-10 4M16.293 8.222c0-2.828 3.535-4.949 6.364-2.121M5.687 11.758c0-2.829 3.535-4.95 6.363-2.122" fill="none" stroke="#212731" stroke-miterlimit="10" />
  </symbol>
  <symbol id="symbol-love" viewBox="0 0 32 33.217" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="17.217" r="16" fill="url(#glove)" />
    <path d="M17.63 25.049c5.947-1.237 9.766-7.062 8.528-13.01L4.619 16.521c1.238 5.947 7.063 9.766 13.011 8.528z" fill="#f52c5b" />
    <path d="M16 17.217a10.975 10.975 0 0 1 9.121 2.188 10.947 10.947 0 0 0 1.037-7.366L4.619 16.521a10.95 10.95 0 0 0 3.889 6.341A10.971 10.971 0 0 1 16 17.217z" fill="#212731" />
    <path d="M11.096 3.674c2.043 2.603-3.6 6.933-3.6 6.933S.595 8.887 1.431 5.684c.802-3.071 4.802-1.15 4.802-1.15s2.903-3.357 4.863-.86zM23.822 1.026c2.044 2.604-3.599 6.934-3.599 6.934s-6.901-1.721-6.065-4.923c.802-3.071 4.802-1.15 4.802-1.15s2.903-3.357 4.862-.861z" fill="#f52c5b" />
  </symbol>
  <symbol id="symbol-sad" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="16" fill="url(#gsad)" />
    <circle cx="9" cy="16" r="2" fill="#212731" />
    <circle cx="23" cy="16" r="2" fill="#212731" />
    <path d="M21 24c-2.211-2.212-7.789-2.212-10 0" fill="none" stroke="#212731" stroke-width="1.28" stroke-miterlimit="10" />
    <path d="M25 27a2 2 0 0 1-4 0c0-1.104 2-4 2-4s2 2.896 2 4z" fill="#2667c6" />
    <path d="M27 14c-1-2-3-3-5-3M5 14c1-2 3-3 5-3" fill="none" stroke="#212731" stroke-miterlimit="10" />
  </symbol>
  <symbol id="symbol-sleepy" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="16" fill="url(#gsleepy)" />
    <path d="M26 22c0 2.761-4.477 5-10 5S6 24.761 6 22s4.477-3 10-3 10 .239 10 3z" fill="#f52c5b" />
    <path d="M16 19c-5.523 0-10 .239-10 3 0 1.183.826 2.268 2.199 3.123C8.998 23.337 12.185 22 16 22s7.001 1.337 7.801 3.123C25.174 24.268 26 23.183 26 22c0-2.761-4.477-3-10-3z" fill="#212731" />
    <path d="M26 11c-.94 4.015-5.941 3.985-7 0M13 11c-.941 4.014-5.941 3.984-7 0" fill="none" stroke="#212731" stroke-miterlimit="10" />
    <path d="M23.098 21.845a.349.349 0 0 1-.348.348h-1.752a.353.353 0 0 1-.317-.204.319.319 0 0 1-.03-.149c0-.078.023-.156.078-.223L22 20.094h-1.002a.349.349 0 0 1-.348-.348.35.35 0 0 1 .348-.354h1.752c.137 0 .258.078.317.204.018.048.03.096.03.144a.355.355 0 0 1-.078.229l-1.271 1.523h1.002a.348.348 0 0 1 .348.353zM26.926 20.286a.464.464 0 0 1-.464.464h-2.335a.475.475 0 0 1-.424-.271.439.439 0 0 1-.039-.2c0-.104.031-.208.104-.296l1.695-2.031h-1.336a.463.463 0 0 1-.463-.463c0-.265.207-.473.463-.473h2.335c.185 0 .344.104.424.272.024.063.04.128.04.191a.468.468 0 0 1-.104.304l-1.695 2.031h1.335c.256 0 .464.208.464.472zM31.582 18.42c0 .32-.26.58-.58.58h-2.918a.59.59 0 0 1-.529-.34.522.522 0 0 1-.051-.25c0-.13.041-.26.131-.37l2.118-2.538h-1.669a.58.58 0 0 1-.58-.58c0-.329.26-.589.58-.589h2.918c.23 0 .43.13.53.34.03.079.05.159.05.239 0 .14-.04.27-.13.38l-2.118 2.539h1.668c.32 0 .58.26.58.589z" fill="#43af20" />
  </symbol>
  <symbol id="symbol-wink" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="16" fill="url(#gwink)" />
    <path d="M16 27c6.075 0 11-4.925 11-11H5c0 6.075 4.925 11 11 11z" fill="#212731" />
    <path d="M10.129 21.975A9.06 9.06 0 0 0 10 23.5c0 4.142 2.686 7.5 6 7.5s6-3.358 6-7.5a9.06 9.06 0 0 0-.129-1.525c-.092-.544-.668-.975-1.22-.975h-9.303c-.551 0-1.127.431-1.219.975z" fill="#f52c5b" />
    <path d="M6.042 8.62c.08-.271.38-.41.64-.33l4.864 1.47c.27.08.454.36.454.62v.24c0 .26-.184.54-.454.62l-4.867 1.47a.513.513 0 0 1-.644-.33.493.493 0 0 1 .333-.62l4.076-1.26-4.081-1.26a.494.494 0 0 1-.321-.62z" fill="#212731" />
    <circle cx="24" cy="11" r="2" fill="#212731" />
  </symbol>
  <symbol id="symbol-surprise" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="16" fill="url(#gsurprise)" />
    <ellipse cx="9" cy="12" rx="2" ry="3" fill="#212731" />
    <ellipse cx="23" cy="12" rx="2" ry="3" fill="#212731" />
    <ellipse cx="16" cy="22.5" rx="5" ry="6.5" fill="#212731" />
    <path d="M7 4c1-2 4-2 5 0M20 4c1-2 4-2 5 0" fill="none" stroke="#212731" stroke-miterlimit="10" />
  </symbol>
</svg>

Bước 3: Tiếp theo chèn đoạn JavaScript dưới đây vào trước thẻ </body>

<script>/*<![CDATA[*/
  var fbConfig = {
    databaseURL: "databaseURL"
  };

  var ls = (e, a) => {
    let t = document.createElement("script");
    t.readyState ? t.onreadystatechange = (() => {
      "loaded" != t.readyState && "complete" != t.readyState || (t.onreadystatechange = null, a())
    }) : t.onload = (() => {
      a()
    }), t.src = e, document.getElementsByTagName("body")[0].appendChild(t)
  };


  ls("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js", function () {
    ls("https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js", () => {
      function reaction(_button, _action) {
        var count, btn = document['getElementsByClassName'](_button)[0x0],
            id = btn.getAttribute('data-reaction-id');
        if (null !== localStorage.getItem(_action)) {
          var j = JSON.parse(localStorage[_action]);
          for (i = 0x0; i < j.length; i++) j[i] === id && (btn.classList.add(_action), btn.classList.add('active'))
        }
        firebase.database().ref(_action + '/' + id + '/total')['on']('value', function (e) {
          e.val() < 0x0 && firebase['database']()['ref'](_action + '/' + id + '/total')['set'](Math.abs(e.val())), count = Math.abs(e.val()) || 0x0, btn.querySelector('.reaction-count').innerText = count
        }), btn['addEventListener']('click', function (t) {
          this.classList.add('loading'), setTimeout(() => {if (t.preventDefault(), this.classList.toggle(_action), this.classList.toggle('active'), this.classList.contains(_action)) {
            if (null === localStorage['getItem'](_action)) localStorage.setItem(_action, JSON.stringify([id]));
            else {
              var all = JSON['parse'](localStorage[_action]);
              all.filter(function (e) {
                return e == id
              }).length || (all.push(id), localStorage.setItem(_action, JSON.stringify(all)))
            }
            count++
          } else {
            for (var json = JSON.parse(localStorage[_action]), i = 0x0; i < json.length; i++) json[i] === id && json.splice(i, 0x1);
            localStorage['setItem'](_action, JSON.stringify(json)), count--
          }
                                                           firebase.database().ref(_action + '/' + id + '/total').set(count), this.classList.remove('loading')}, 1000)
        })

      }

      firebase.initializeApp(fbConfig),
        reaction('love-action', 'love'),
        reaction('sad-action', 'sad'),
        reaction('happy-action', 'happy'),
        reaction('sleepy-action', 'sleepy'),
        reaction('angry-action', 'angry'),
        reaction('dead-action', 'dead'),
        reaction('wink-action', 'wink');
    });
  });
/*]]>*/</script>

Bước này các bạn thay: databaseUrl các bạn thay thành Realtime Database URL của các bạn mà mình đã bảo copy ở phần trên.

Cuối cùng lưu lại và kiểm tra trên Blog của các bạn.

{getButton} $text={Preview} $icon={preview}

Các bạn có thể tuỳ biến lại CSS cho phù hợp với Blog của mình hơn nhé, nếu gặp lỗi hay thắc mắc gì về các thực hiện thì đừng ngại comment xuống phiến dưới mình sẽ giải đáp nếu có thể.