Bài 10: Tích hợp Chat Facebook và fanpage vào website WordPress

0

Trong bài viết này, mình sẽ hướng dẫn các bạn tích hợp chat facebook và fanpage vào website WordPress. Mình cũng sẽ hướng dẫn luôn cách thêm nút gọi cho bạn nào nào cần.

Video Tích hợp Chat Facebook và fanpage vào website WordPress

Hướng dẫn chi tiết

Tích hợp Fanpage vào website

Đầu tiên các bạn phải có một fanpage trước đã. Phần này chắc ai cũng làm được. Một lời khuyên dành cho bạn: Khi mới bắt đầu một fanpage kinh doanh nhỏ hoặc bán hàng cá nhân (không áp dụng cho thương hiệu lớn nhé), bạn nên tạo fanpage dạng Cộng đồng – Người của công chúng để chi phí khi quảng cáo page sẽ rẻ hơn chút ít.

Lấy mã tích hợp

Ok, chúng ta bắt đầu vào phần chính nào. Đầu tiên, các bạn lên Google và search từ khóa page plugin, nó sẽ dẫn các bạn đến trang developer của Facebook. Hoặc mình để đường dẫn ở đây Page Plugin, các bạn vào trực tiếp luôn nhé.

Tích hợp fanpage vào website wordpress

Bạn chỉ cần nhập đường dẫn fanpage của bạn vào phần URL Trang Facebook. Bạn có thể thêm hiển thị dòng thời gian (timeline) hoặc sự kiện (event) … Sau đó nhấn lấy mã.

Sẽ có 2 đoạn mã cần phải dán vào web.

Đoạn mã đầu tiên dán vào sau khi mở thẻ body là tốt nhất (theo khuyến nghị của Facebook). Còn mình thì do dùng plugin nên sẽ dán vào phần head của web nha.

Mã tích hợp fanpageGắn mã tích hợp vào website WordPress

Bạn có thể gắn trực tiếp mã cài đặt bằng cách sửa mã nguồn theme nhưng mình nghĩ cách đó không tốt. Thứ nhất, bạn sẽ có rủi ro làm hỏng theme và web của bạn sẽ nát, nếu có backup thì không sao. Thứ hai, bạn khó quản lý những gì đã thêm vào website của bạn vì sau này bạn còn phải thêm Google Analytics, Google Adsense … rất nhiều loại mã khác. Thứ ba, rất có thể mã nguồn bạn thêm vào sẽ mất khi theme update phiên bản mới. Do đó, bạn nên dùng plugin hoặc dùng tính năng thêm code tùy chỉnh của theme (nếu có). Trong bài này, mình dùng plugin Insert Headers and Footers, đã từng được dùng trong Bài 4 Sửa lỗi font. Mình dùng plugin này để thêm google font vào website.

Việc cài plugin và kích hoạt mình không hướng dẫn lại nha bạn.

Dán phần Step 1 vào phần Header

Dán mã nguồn vào header của web

Phần code ở Step 2 mình dán vào vị trí bạn muốn hiển thị. Ở đây, mình sẽ dán vào sidebar.

Dán code vào phần widget

Và kết quả chúng ta đạt được

Kết quả gắn fanpage

Tích hợp chat facebook vào website WordPress

Lấy mã tích hợp Facebook Chat

Các bạn vào Fanpage của bạn. Vào mục Cài đặt -> Nền tảng Messenger.

nền tảng messenger facebook

Chọn Plugin chat với khách hàng

Plugin chat với khách hàng

Một số cài đặt cơ bản như chọn ngôn ngữ, thêm lời chào đầu tiên

Chọn ngôn ngữ cho khung chat

Chọn màu cho nút chat và màu nền cuộc trò chuyện

chọn màu nền cuộc trò chuyện

Và cuối cùng, mình nghĩ là quan trọng nhất cần chú ý: Khai báo tên miền sẽ tích hợp tính năng chat và lấy mã cài đặt.

Thêm tên miền tích hợp chat facebook

Gắn mã tích hợp Facebook Chat vào website

Các bạn mở lại plugin Insert Headers and Footers nhé. Copy đoạn mã tích hợp và dán vào phần Headers.

Dán mã cài đặt vào phần Headers

Như vậy là chúng ta đã tích hợp thành công rồi. Đây là thành quả cuối cùng. Các bạn có thể xem thử tại quatang.me nhé.

Khung chat sau khi cài đặt thành công
Khung chat sau khi cài đặt thành công

Thêm nút gọi vào website

Phần cuối cùng mình muốn hướng dẫn là thêm nút gọi cho website. Phần này đụng khá nhiều đến code nên mình nghĩ các bạn nên làm như hướng dẫn sẽ tốt hơn. (Bạn nào biết code rồi sẽ dễ hiểu và chỉnh sửa code tốt hơn)

Các bạn thêm giúp mình đoạn code sau vào phần footer trong plugin Insert Headers and Footer.

<div class="phonering-alo-phone phonering-alo-green phonering-alo-show" 
      id="phonering-alo-phoneIcon" 
      style="left: -50px; bottom: 150px; position: fixed; z-index:1000;">
   <div class="phonering-alo-ph-circle"></div>
   <div class="phonering-alo-ph-circle-fill"></div>
   <a href="tel:+84901111122"></a>
   <div class="phonering-alo-ph-img-circle">
      <a href="tel:+84901111122"></a>
      <a href="tel:+84901111122" class="pps-btn-img " title="Liên hệ">
         <img src="https://i.imgur.com/v8TniL3.png" 
              alt="Liên hệ" width="50" 
              onmouseover="this.src='https://i.imgur.com/v8TniL3.png';" 
              onmouseout="this.src='https://i.imgur.com/v8TniL3.png';"/>
      </a>
   </div>
</div>

Và thêm đoạn code này trong phần CSS custom. Các bạn ra giao diện bên ngoài của trang Admin, chọn Tùy biến -> CSS tùy chỉnh và dán đoạn mã CSS này vào. Đoạn này khá dài nên mình sẽ để trong file, các bạn download về nhé.

Và đây là kết quả đạt được

Thêm nút gọi cho website

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.