Tích hợp Facebook Chat cho website không cần dùng plugin

Tích hợp Facebook Chat cho website mà không cần dùng plugin. Việc tích hợp như vậy sẽ làm website bạn đi, không còn lạm dụng vào plugin nữa.

tich hop live chat facebook vao wordpress

Trong bài viết cách đây khá lâu, tôi đã từng hướng dẫn cho các bạn cách tích hợp Facebook Chat (Facebook Messenger) vào blog/ website WordPress bằng cách sử dụng plugin rồi phải không nào. Tuy nhiên, nhược điểm của phương pháp này là plugin không phải hàng “chính chủ” nên nội dung chat sẽ không thể hiển thị ngay trên website của bạn mà sau khi gửi tin nhắn, khách hàng sẽ phải sử dụng website hoặc ứng dụng Facebook để tiếp tục trao đổi. Hơn nữa, hướng dẫn này chỉ có thể áp dụng được cho nền tản WordPress. Vậy còn những nền tảng web khác thì sao?

Tham khảo thêm:

Thật may mắn, đáp ứng được nhu cầu của đông đảo blogger/ webmaster, Facebook đã nhanh chóng cho ra mắt sản phẩm “chính chủ” với tên gọi Customer Chat Plugin. Giờ đây, khách hàng đã có thể tương tác với bạn ngay trên website giống như những ứng dụng live chat truyền thống khác.

facebook customer chat

Làm thế nào để có được 1 widget như vậy trên blog/ website của bạn? Ngay sau đây là hướng dẫn chi tiết.

Các bước tích hợp Facebook Chat cho website

1. Đầu tiên, các bạn cần phải truy cập vào trang Facebook for Developers và tạo cho mình 1 ứng dụng bằng cách click vào nút Add a New App.

click vao nut add a new app

 

2. Một khung pop-up sẽ hiện lên, hãy điền đầy đủ các thông tin được yêu cầu rồi click vào nút Create App ID.

create a new app id

Một khung CAPTCHA sẽ hiện lên, hãy nhập chính xác dãy ký tự mà bạn nhìn thấy trong hình để vượt qua bước xác nhận bảo mật.

3. Trong giao diện quản trị ứng dụng, hãy click vào mục Settings rồi chọn Basic.

click vao muc basic

 

4. Thông tin duy nhất mà các bạn bắt buộc phải điền trong phần này là Privacy Policy URL (nên điền URL website của bạn). Những mục khác các bạn có thể bỏ qua.

facebook developer dashboard privacy policy url field highlighted

Click vào nút Save Changes để lưu lại.

5. Click vào nút Off để chuyển nó sang trạng thái On (đồng nghĩa với việc ứng dụng của bạn đã được kích hoạt).

kich-hoat-app-facebook

Click vào nút Confirm để xác nhận việc kích hoạt.

image

Nhớ copy App ID vì nó sẽ được dùng đến trong các bước tiếp theo.

6. Truy cập vào trang quản trị Facebook Page của bạn. Click chọn mục Messenger platform.

click vao messenger platform trong page settings

 

7. Paste App ID mà bạn đã copy ở bước 5 vào mục Link your app to your Page rồi click vào nút Link.

link your app to your page

Sau khi liên kết thành công, tên ứng dụng sẽ được hiển thị trong danh sách Subscribed apps.

subscribed apps

8. Điền URL website của bạn vào mục White-listed domains và click vào nút Save. Nếu muốn hiển thị Facebook Customer Chat trên nhiều website cùng lúc, các bạn có thể điền nhiều URL trong mục này.

white listed domains

9. Click vào nút Set Up trong mục Customer Chat Plugin.

setup customer chat plugin

10. Chọn ngôn ngữ mà bạn muốn sử dụng cho Facebook Chat trong mục Language. Nếu muốn thay đổi nội dung câu chào, các bạn có thể click vào nút Change trong mục Greeting Message.

lua-chon-ngon-ngu-cho-facebook-chat

Click vào nút Next để chuyển qua bước tiếp theo.

11. Nếu có nhu cầu chỉnh sửa màu sắc của biểu tượng Messenger, các bạn có thể sử dụng tính năng Custom colours. Nếu không, hãy click vào nút Next để chuyển qua bước cuối cùng.

12. Copy code được cung cấp, tick vào mục I’ve added the code to the website rồi click vào nút Finish để kết thúc.

13. Đoạn code mà bạn được cung cấp sẽ có dạng như sau:

<script>
window.fbAsyncInit = function() {
FB.init({
appId : your-app-id,
autoLogAppEvents : true,
xfbml : true,
version : v2.12
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = https://connect.facebook.net/vn_VN/sdk/xfbml.customerchat.js;
fjs.parentNode.insertBefore(js, fjs);
}(document, script, facebook-jssdk));
</script>
<div class=fb-customerchat
page_id=1416141145302908
theme_color=#0084ff
>
</div>

Hãy thay your-app-id bằng App ID mà bạn đã copy ở bước 5.

Từ 08/01/2019, link Facebook SDK https://connect.facebook.net/en_US/sdk.jsvà https://connect.facebook.net/vi_VN/sdk.js không còn sử dụng được nữa. Các bạn phải sửa thành https://connect.facebook.net/en_US/sdk/xfbml.customerchat.jshoặc https://connect.facebook.net/vn_VN/sdk/xfbml.customerchat.js thì Messenger mới hoạt động được.

14. Chèn code đã chỉnh sửa vào Footer của blog/ website. Đối với mã nguồn WordPress, các bạn có thể chèn vào file footer.php của theme hoặc tham khảo bài viết “Chèn code vào Header và Footer của WordPress một cách đơn giản“. Và kết quả nhận được sẽ trông giống như thế này:

DOCkcAyUEAEBJIF

Thật tuyệt vời phải không nào? Chúc các bạn thành công!

Bạn đang dùng cách nào để tích hợp Facebook Chat cho website của mình? Đừng quên chia sẻ nó với chúng tôi trong khung bình luận bên dưới.

Summary
Review Date
Reviewed Item
Tích hợp Facebook Chat cho website không cần dùng plugin
Author Rating
51star1star1star1star1star

CÓ THỂ BẠN QUAN TÂM

Dich Vu SEO
Dịch Vụ SEO Đồng Tháp
Dịch vụ SEO Đồng Tháp, chúng tôi sẽ giúp bạn phát triển doanh nghiệp của bạn lên một tầm cao mới.
Báo động nền tảng website WordPress bị hacker tấn công lừa đảo
Báo động nền tảng website WordPress bị hacker tấn công lừa đảo
Vượt qua cơ chế bảo vệ của Wordfence (“tường lửa” của WordPress), các hacker sẽ lợi dụng tấn công thay đổi ...
wordpress hosting
[HOT ] 8 Lưu Ý Cách Chọn (WORDPRESS HOSTING) | TRANHAIT.COM
WordPress đang là mã nguồn mở được sử dụng nhiều nhất trên thế giới. Nắm bắt được xu thế đó, nhiều ...
cost
Thiết Kế Website Quảng Bình
Khi gõ từ khóa “thiết kế website”, hoặc “công ty thiết kế web” trên Google, khách hàng dễ bị bối rối ...
Cong Ty Thiet Ke Web Tai Dong Thap
Công Ty Thiết Kế Website Tại Đồng Tháp
Kính gửi: Quý Khách hàng Thiết kế website đồng tháp là một trong những doanh nghiệp đứng đầu về ứng dụng công nghệ ...
Thiết kế website nội thất tại Đồng Tháp
Thiết kế website nội thất tại Đồng Tháp – Tặng Tên Miền, Hosting, Miễn phí Traffic ĐƠN VỊ THIẾT KẾ WEBSITE NỘI ...
Thiết kế website máy móc công nghiệp
Link Demo : Website máy móc công nghiệp Det Tadalafil gjør det er at det hemmer PDE5 eg nærmere bestemt testosteron ...
website ban thuc pham sach 1
Giao diện website bán thực phẩm sạch
Vifonic xin giới thiệu đến Quý khách mẫu giao diện website mới: website bán hàng thực phẩm sạch với đầy đủ các tính năng của một ...
Google May 2020 Core Update 1
Phân tích Update từ Google tháng 5/2020 và những điều cần làm ngay
Google đã cập nhật thuật toán mở rộng vào ngày 4 tháng 5 và có lẽ rất nhiều trong số các bạn ...
thiet ke web theo yeu cau
Thiết kế website theo yêu cầu – Chọn mặt gửi vàng (P1)
Chuỗi bài viết này được tác giả viết năm ngoái cho công ty mà tác giả làm ở đó nhưng vì ...