Thêm cảm xúc reaction emoji cho blogger version 2

 


Từ phần 1 của bài viết này, ngẫu hứng mình tìm được một cách nữa để tạo phần reaction cho blogger theo hướng realtime. Cho bạn chưa biết thì realtime là khi A và B đang cùng đọc một bài, khi A thả cảm xúc thì bên B số lượng của các reaction cũng sẽ thay đổi theo mà không cần reload lại trang như ở phần 1.
Các bạn có thể xem demo dưới đây, hoặc 1 bài viết bất kỳ nào trong link demo đều có nhé

Live Preview

Oke bắt đầu

Bước 1

Truy cập trang firebase của google > Get started > Creat a project > điền tên project tùy thích, tích chọn các điều khoản và chọn continue, tích chọn analytics nếu thích bị gg theo dõi còn không thì thôi :)) > Continue {Create project} và chờ một lát > Continue để vào dashboard.
Tại đây chọn mục Rules

Và Sửa lại thành như sau:

Chọn publish để lưu thay đổi

Bước 2

Bên thanh sidebar bên tay trái, chọn Build > Realtime database > Create database

Chọn địa điểm càng gần càng nhanh, ở Việt Nam thường nên chọn Singapore, bấm next

Chọn test mode > Enable

Chọn Project setting

Kéo xuống dưới và chọn mình khoanh đỏ này

Nhập tên app,... và chọn Register app (không tick Also set up Firebase Hosting for this app)

Sẽ hiện như này, copy hoặc lưu lại phần apiKey databaseURL là được, sau đó bấm continue to console

Bước 3

Sau khi có được api key với database url rồi thì quên cái firebase đi, chúng ta sẽ vào template và nhấn chỉnh sửa, các bạn chưa biết sửa template như thế nào thì có thể xem lại phần 1 mình đã hướng dẫn rồi.
Tìm đến thẻ <data:post.body/>  rồi pase đoạn code này vào dưới thẻ đó
<div class='CHA'>
  <div class='CON'>
    <input id='r1' type='checkbox'/>
    <label class='react' for='r1'>
      <i data-icon='👍'/>
    </label>
    <span id='ir1'>0</span>
  </div>
  <div class='CON'>
    <input id='r2' type='checkbox'/>
    <label class='react' for='r2'>
      <i data-icon='😍'/>
    </label>
    <span id='ir2'>0</span>
  </div>
  <div class='CON'>
    <input id='r3' type='checkbox'/>
    <label class='react' for='r3'>
      <i data-icon='😁'/>
    </label>
    <span id='ir3'>0</span>
  </div>
  <div class='CON'>
    <input id='r4' type='checkbox'/>
    <label class='react' for='r4'>
      <i data-icon='😮'/>
    </label>
    <span id='ir4'>0</span>
  </div>
  <div class='CON'>
    <input id='r5' type='checkbox'/>
    <label class='react' for='r5'>
      <i data-icon='🤔'/>
    </label>
    <span id='ir5'>0</span>
  </div>
</div>
Tiếp theo kéo xuống dưới cùng, trước thẻ </body> thì dán đoạn code này vào, vì để vào đây thì nó sẽ bị lỗi nên mình để link drive, các bạn vào đó copy xong vào paste cái là xong.
https://drive.google.com/file/d/1o5JbmHQTTvfYZrCTHXX3uXtHAfDNDC4s/view?usp=sharing
Lưu ý là sửa phần YOUR_FIREBASE_API YOUR_FIREBASE_URL bằng thông tin ở trên bước 2 là được. Đừng xóa nhầm phải mấy cái &quot; là được nha 😂

Vậy là xong rồi đó, bấm save và tận hưởng thôi
Các bạn hoàn toàn có thể check cái "realtime" này bằng cách dùng 2 máy mà thả reaction để tự kiểm tra nhé, bạn cũng hoàn toàn có thể custom các icon nếu bạn thích
Đừng quên để lại cảm xúc và câu hỏi nếu bạn còn thắc mắc chỗ nào nhé.
0
0
0
0
0
Ng.Đ Hoàng

@iHoala

4 Nhận xét

Mới hơn Cũ hơn