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. :)
Xin chào bạn!
Mình đã làm tất cả các bước như hướng dẫn nhưng tại sao website https://www.anhkhoi.vn/ của mình vẫn ko hiện ra nút chat của facebook vậy.
Nhờ bạn kiểm tra xem mình làm sai thế nào mà không được.
Thanks!
mình làm như vậy sao web không hiển thị box chat nhỉ
http://duanmoi.info
Mình thử bật Chrome Dev Tools lên cũng không thấy báo lỗi gì nên cũng không rõ nguyên nhân là do đâu luôn.
Bạn kiểm tra lại xem giao thức của website và giao thức khai báo trên Facebook đã chính xác chưa? HTTP hay HTTPS? Thử chuyển website sang giao thức HTTPS xem sao.
Em chào anh, trong phần customer chat plugim của em không có nút setup dù app id của em đã chuyển sang chế độ bật ạ. Em cảm ơn
Code mới không cần App ID nữa rồi bạn ạ.
Chào anh, em đã làm theo hướng dẫn nhưng không thấy hiển thị anh ạ.
Hiện tại code đã thay đổi, nó không có phần điền APP ID ở bước 13 nữa.
www.beefone.vn/intro
Anh có thể xem giúp em được không ạ? em xin cảm ơn
Bạn đã cấp quyền hiển thị widget chat cho tên miền chưa?
Dạ em cấp rồi anh ạ nhưng vẫn không được. :(
Bạn kiểm tra lại xem giao thức của website và giao thức khai báo trên Facebook đã chính xác chưa? HTTP hay HTTPS? Có www hay không www? Trường hợp của bạn tên miền chính xác là https://www.beefone.vn
Anh xem hộ em với em tích hợp rồi mà nó không hoạt động. thanks anh
########################### The CustomerChat plugin is no longer part of the main Facebook SDK.
# To continue using it please use the correct SDK URL,
# meaning replace sdk.js with sdk/xfbml.customerchat.js.
# For more details see https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk
##########################
Nó bảo link SDK của bạn không chính xác nhé, sửa lại cho đúng.
Anh ơi cho em hỏi là:
– Trên web của em thì chạy được bình thường, nhưng vào mobile thì lại không hiện khung chat.
– Với em vào trình duyệt ẩn danh và chưa đăng nhập vào fb trước đó thì cũng không hiện khung chat.
Đây có phải là tính năng của nó thế hay do e cài bị lỗi gì đó ạ.
Em xin chân thành cảm ơn!
Do bạn cài lỗi thôi!
Cho mình hỏi. Với tính năng này thì trên trang quản lý tin nhắn có thể phân biệt đầu là tin nhắn đến từ web và tin nhắn đến fanpage không?
Tất nhiên là không rồi bạn. Tin nhắn nào cũng là tin nhắn fanpage cả thôi.
Cảm ơn bài viết có ích của bạn!
Hướng dẫn rất chi tiết & cụ thể. Cám ơn bạn.
Bạn cho mình hỏi, làm sao di chuyển cái biểu tượng chat này tới 1 vị trí khác, để chỗ mặc định nó che cái “Về đầu trang”, rất mong bạn chia sẻ, Cám ơn bạn nhiều
Kéo lên đọc bình luận bên trên đi bạn. Vấn đề này rất nhiều người hỏi rồi. :P
Tớ mới tìm thấy chỗ này có đổi được nè bạn, nhưng ko rành code, rất mong bạn xem qua, (thay @ thành . ), vì tớ ko muốn spam link vào blog của bạn í ạ.
nguyencaotu@com/tich-hop-live-chat-gui-tin-nhan-cua-facebook-vao-website.html
Cái này không phải code chính chủ của Facebook nên bên mình không có ý kiến gì nhé. Nếu bạn thích có thể dùng. Còn về code chính chủ của Facebook, ở bình luận bên trên mình đã để 1 code CSS demo để mọi người tự chỉnh sửa theo nhu cầu rồi. Bạn kéo lên xem kỹ sẽ thấy.
là đoạn này đúng không bạn?
Tớ thử qua nhưng icon nó vẫn vậy, còn cái khung chào nó chạy qua bên trái màn hình
Làm sao cho nó vẫn bên phải mà chạy lên được, cả icon và khung welcome,
Nghĩ mãi vẫn chưa ra phương án. @@!