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. :)
Làm sao để đăng ký cái Privacy Policy URL này vậy ?? Mình điền đủ kiểu rồi vẫn ko được. Ai biết hướng dẫn với
Bạn điền link trang liên hệ hoặc trang chính sách trên website của bạn vào đó là được.
Ko được. Mình điền đủ kiểu luôn rồi, kể cả trang liên hệ luôn :(. Như vậy là bị cái gì ??
Cái này hay vì giờ fb quá khả dụng rồi
Cái này kết hợp được với chatbot là ok nhất. Tự động trả lời cho mình. Và thu thập người dùng.
Không hiểu sao mình không có cảm tình với mấy dịch vụ chat bots của Facebook cho lắm. Giao diện nó cứ thế nào ấy. Nói chung chưa tìm được con nào vừa mắt để viết bài giới thiệu. :D
Mình đang dùng chatfuel thấy ok mà.
Website của em có Back To Top. Khi cài vào bị che back to top. Xin anh cho code nâng biểu tượng chat lên cao ạ. Em cảm ơn
website em: http://petschoolshop.com/
Cái này hơi khó. Điều chỉnh vị trí nút back to top của bạn sẽ dễ hơn. 1 là cho nó sang bên trái màn hình. 2 là cho nó nằm bên trên nút FB Chat. :P
a ơi hỗ trợ e làm như vậy mà không hiển thị trên website của mình được ạ :(
Bạn thử đổi link Facebook SDK trong code thành https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js hoặc https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js xem sao.
sao mình làm rồi mà nó ra đoạn code mới không giống trên hinh nhap vao web thi nó không hiện lên
Bạn chụp ảnh đoạn code bạn nhận được rồi upload lên mạng và gửi link đây mình xem nào. :)
https://tranhdantuongkimsa.com/wp-content/uploads/2018/03/tranhdantuongkimsa_zalo_screenshot_9_3_2018_179285.png
đây là đoạn code mới ạ ko thấy phần nhập ID
Bạn đã tạo Facebook App và liên kết App với Messenger chưa vậy?
rồi ạ, anh xem lại đi hình như nó mới cập nhật code mới hay sao á
Đúng thật. Nó vừa đổi code. Nếu vậy thì không cần điền App ID nữa. Cứ copy code đó chèn vào thôi. :)
Mình nhúng có mỗi cái code kia vào cũng được :D
Ý bạn là không cần tạo App và lấy App ID à? :P
Mình lấy App ID của cái App trước đó đã tạo để nhúng Page Like và Comment FB :D
Làm thế này mình thấy hơn đc cái là sẽ tracking được (đoán thế) và có hiển thị tên App trong Message Platform của Fanpage.
Tạo App nhanh mà. Cũng đâu mất tiền. Tội gì phải dùng chung. :D
Đã thực hành thành công, cảm ơn Hiếu
Bài viết hay quá ạ
Chào anh Hiếu. E có 1 câu hỏi liên quan đến facebook nhưng không phải chat mà là facebook comment: Làm thế nào để nhận được thông báo khi có người bình luận trên website bằng plugin facebook comment ạ. Em cảm ơn anh nhiều.
Trong phần Cài đặt của ứng dụng dành cho Facebook Comments, bạn nhớ bật thông báo lên là được: https://photos.app.goo.gl/88MZWTzNsUCmyQlF2
Link truy cập: https://developers.facebook.com/tools/comments/
Em bật rồi những vấn không được anh ạ. Đọc mấy bài viết nước ngoài cũng có khá nhiều người gặp vấn đề tương tự.
Ca này chắc phải hỏi trực tiếp anh Mark Zuckerberg. :)
Đã dùng cách đây vài tháng, cảm thấy oke :D