Tích hợp Facebook Chat cho website mà không cần dùng plugin.
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 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:
- Tích hợp Facebook Like Reactions vào WordPress
- Hướng dẫn tích hợp Facebook Chat vào website WordPress
Thật may mắn, đáp ứng được nhu cầu của đông đảo 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.
Làm thế nào để có được 1 widget như vậy trên 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.
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.
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.
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.
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).
Click vào nút Confirm để xác nhận việc kích hoạt.
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 (Settings). Click chọn mục Advanced messaging.
7. Paste App ID mà bạn đã copy ở bước 5 vào mục Share attribution rồi click vào nút Save.
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.
9. Click vào mục Messaging trên trang quản trị.
Click tiếp vào nút Get Started trong mục Add Messenger to your website.
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.
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. Tick vào mục I’ll install the code myself, copy đoạn code được cung cấp 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:
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v5.0'
});
};</p>
<p> (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/vi_VN/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></p>
<p> <!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="1416141145302908">
</div>14. Chèn code đã chỉnh sửa vào Footer của 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:
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.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Đã nhúng thử lên vài websitem có web thì được web thì không, không phải do mình làm sai mà dường như do code web. Không rõ có phải do website nó chặn mã hay bị xung đột gì không nữa. Có ai ở đây từng bị như thế và biết lý do không?
Bạn bật Chrome Dev Tools (F12) xem trong tab Console nó có báo lỗi gì không?
A ơi dùng cái này có bị nặng web giảm tốc độ load ko ạ
Có bạn nhé. Bạn phải lựa chọn giữa tốc độ load và sự tiện lợi dành cho khách hàng. :)
còn làm sao để đưa bình luận bằng fb vô từng bài sản phẩm của web wp bạn ơi
Hướng dẫn này mình chưa viết bạn ạ. Nhưng sẽ có trong thời gian sắp tới nhé. :)
cảm ơn bạn…hóng :D
Cám ơn bạn mình đã làm thành công :)
cho em hỏi em không muốn phần chat messeger hiển thị trên điện thoại thì cần thêm code gì ạh!?
Bạn tham khảo code này thử xem sao nhé. :P
em làm được rồi!
cảm ơn sư huynh nhiều ạh!
Đã làm theo hướng dẫn mà lúc ấn “off” thấy báo: “Bạn phải cung cấp URL Chính sách quyền riêng tư hợp lệ để đăng trực tiếp ứng dụng…” là sao ạ. Em đã coppy đúng link của web mình r ạ
Bạn phải nhập link trang chính sách riêng tư, ví dụ như trang này của bên mình: https://wpcanban.com/chinh-sach-bao-mat Nhập link trang chủ không được đâu.
Em đã thử và thành công, tuy nhiên bọn facebook này làm chậm tải trang nhiều ( em có nhúng trang fb, dùng plugin bình luận) , chưa biết cách nào để tăng tải trang cả. em có cài amp nữa
Mấy cái dịch vụ của Facebook nặng lắm bạn. Code lại không tối ưu nên tải chậm là điều không thể tránh khỏi. AMP trời cũng thế cả thôi.
Vâng, anh có code wordpress nào tốc độ load nhanh không, chia sẻ cho em xin với ạ, em cảm ơn, dùng toàn mấy giao diện rùa bò không à :D
Bạn muốn giao diện nhẹ và load nhanh thì tham khảo theme Paradise của bên mình nhé.
Của em nó hay bị lỗi kiểu không thân thiện với di động, mặc dù giao diện responsive rất tốt, nên em mới cài amp thay thế.
E làm theo nhưng bị lỗi này ạ: https://imgur.com/a/yLx6U84
Bạn thử sửa lại link Facebook SDK xem sao.
sửa lại như thế nào ạ? Em thay hết các kiểu rồi mà ko được. Anh chạy còn bình thuường chứ??
à được rồi. chắc bị xung đột vs cái plugin #
anh ơi, dùng trên 000webhost free không được ạ??
à chạy được rồi ạ =))
Host nào không quan trọng, miễn là có tên miền đàng hoàng thì đều chạy được hết. :P
Mình không gắng được cho web này nhỉ: https://thanhmobile.vn/
Dear bác em hỏi tí. Vì sao lại phải tạo mới FB app nhỉ? Vào cài đặt fanpage có luôn cái thêm plugin live chat rồi @@ cài vào cũng hiển thị như bác. Không hiểu là khi tạo thêm app fb ở bước đầu để làm gì?
Trước đây phải tạo thì mới chèn được Facebook Messenger bạn ạ. Còn hình như bây giờ không cần thiết phải tạo nữa. :)
Anh ơi em đang lập trình java web jsp servlet. làm thế nào để add vào được localhost ạ. em đã làm theo nhưng ko hiện dc cái icon messeger ạ. có cách nào ko host mà vẫn sử dụng được không ạ
Cái này cần domain và live host. Không chạy được trên localhost đâu bạn.
sao những web khác vẫn tích hợp vào localhost dc mà facebook thì ko anh nhỉ. hiên em đang sử dụng tawk.to
Vì cái bước 8 trong bài viết nó bắt phải điền địa chỉ website được phép hiển thị Facebook Messenger.