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 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:
- 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 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.
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.
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. Click chọn mục Messenger platform.
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.
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.
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 nút Set Up trong mục 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.
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:
Hãy thay your-app-id bằng App ID mà bạn đã copy ở bước 5.
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:
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 subscribe 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 qua email nhé. Cảm ơn rất nhiều. :)
Đã dùng cách đây vài tháng, cảm thấy oke :D
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. :)
Bài viết hay quá ạ
Đã thực hành thành công, cảm ơn Hiếu
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
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. :)
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
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à.
Cái này hay vì giờ fb quá khả dụng rồi
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ì ??
Hi Trung Hiếu,
Rất cảm ơn về bài viết tuyệt vời của bạn. Mình đã làm theo hướng dẫn của bạn và đã thực hiện thành công. Tuy nhiên mình lại thấy tốc độ load trang khi thêm vào nút chat facebook lại bị chậm đáng kể.
Hiếu có thể chỉ mình cách khắc phục được không?
Xin cảm ơn Hiếu rất nhiều!
Cái này là điều rõ ràng bạn nhé. Tích hợp các giải pháp của Facebook vào website thì nó sẽ tải thêm các file JS, CSS từ server của Facebook => ảnh hưởng đến tốc độ load của web. Những file này không nằm trên host nên không thể tối ưu được. Bạn phải lựa chọn dùng hay không dùng mà thôi. :)
Hi Hiếu, bạn có thể cho mình biết bây h mình có thể sử dụng plugin của ai để chat online trên website mà tương đối ngon không?
Miễn phí thì nên dùng Tawk.to nhé. Tham khảo bài viết “Tawk.to – Plugin live chat miễn phí dành cho WordPress“.
Của mình không thêm được tên miền . mặc dù đã thêm code vào
link ảnh lỗi :https://sv1.uphinhnhanh.com/images/2018/05/27/eeeee.png
Cái tên miền
https://jaspers-market.comgì đó của bạn có truy cập được đâu bạn. Facebook nó báo lỗi là đúng rồi.Admin cho hỏi tại bước 12 trong bài viết của ad, khi mình setting bước đó trên fanpage của mình thì thiếu mục :”I’ve added the code to the website” để click vào. không biết mình bị lỗi gì ad có thể giúp không ạ? Lúc trước mình từng tích hợp chat box cho landing page, vẫn bình thường, không hiểu sao lần này lại bị như vậy? Cảm ơn AD. Mong phản hồi.
Em đang dùng Theme Flatsome, tìm đủ mọi cách để tích hợp cái chat này. Nhưng nó ko hiển thị. Không biết có ai gặp trường hợp này chưa ?
Kiểm tra xem theme có tính năng tối ưu load JavaScript hay cái gì đó tương tự không?
Em đã thử các script khác Facebook thì không sao. Riêng script facebook thì bị .
Anh coi ảnh http://prntscr.com/jqynx7 . Nó load xong rồi tự cancel script fb đi.
Thử với theme mặc định của WordPress (2017 chẳng hạn) xem nó có bị lỗi như vậy không? Nếu vẫn bị thì không phải do theme.
Chào Hiếu. Cảm ơn bạn vì bài hướng dẫn này.
Mình mới mày mò làm web bằng wordpress. Mình làm theo hướng dẫn thì nó ra như vầy. Bạn coi giùm mình nhé
https://uphinhnhanh.com/image/zDybGU
Cảm ơn nhiều lắm !!!
Đây là hướng dẫn dành cho WordPress self-hosted (mã nguồn download từ WordPress.org) bạn ơi. Của bạn là blog WordPress.com rồi, không chỉnh sửa hay tùy biến được gì đâu.
HIếu, vậy khi mình update theme có bị mất phần footer này hoặc header gì ko
vì nhỡ them update sẽ thay thế phần footer header của hiếu
Chèn trực tiếp vào file theme thì lúc update sẽ bị mất. Nếu chèn bằng plugin hoặc chèn vào phần cài đặt của theme (Theme Options) thì update sẽ không bị mất.
Mình sử dụng chatfuel https://chatfuel.com Mình có chỉnh bằng tiếng việt và thay đổi nội dung câu chào hỏi nhưng ko thấy có hiệu ứng ngoài wordpress. M.n có biết tại sao không
Vấn đề là bạn đang sử dụng Facebook tiếng Việt hay tiếng Anh? Ngôn ngữ của widget chat sẽ thay đổi dựa theo ngôn ngữ trên Facebook của người dùng đấy. :P
Cảm ơn anh đã chia sẻ bài viết hữu ích này.
Anh có thể hỗ trợ e thêm về vấn đề của em không
em đã làm theo các bước bài viết và kết quả ok, nhưng hôm sau e vào lại web thì cái biểu tượng chat bằng messager bị mất. nên web của em k còn tính năng này nữa. vậy e làm sao để phục hồi ak
Bạn bật Dev Tools của trình duyệt web lên, xem tab Console coi nó có báo lỗi gì không?
tab Console không hiển thị lỗi gì hết a.
Nếu bạn thấy nó bị mất thì nhiều khả năng liên quan đến việc site của bạn đang sử dụng giao thức HTTP (không bảo mật).
Chào bạn!
Mình thấy bài đăng của bạn rất hữu ích. Mình đã làm theo và thành công. Nhưng thỉnh thoảng lại không thấy biểu tượng hiển thị trên màn hình máy tính và smartphone.
Bạn giúp mình xử lý vấn đề trên với.
http://www.hongngoctoeic.com/
Cảm ơn bạn rất nhiều!
Mình thấy site của bạn hiện biểu tượng Facebook chat bình thường mà. Thỉnh thoảng không hiện có thể liên quan đến việc site của bạn đang sử dụng giao thức HTTP (?)
Bạn ơi. Làm thế nào để các chữ trong khung chat là tiếng việt vậy bạn? hiện khung chat của mình hiển thị các chữ bằng tiếng anh mặc dù mình đã chọn tiếng việt ở bước 10 trong quy trình cài đặt hướng dẫn ở bên trên rồi .
mã đã có đoạn chọn tiếng việt : js.src = “https://connect.facebook.net/vi_VN/sdk.js”;
Đang dùng chat của facebook cho site, thấy lượng tương tác qua tin nhắn rất nhiều. Site bán hàng dùng cái này thì rất tốt
Sao khi người dùng kích vào để chát thì nó hiện sẵn lên 1 câu chat của người dùng (Không phải câu đoạn chát của Page) vậy anh
Có cách nào để dùng trên Somee.com không ạ?
Em làm tương tự nhưng nó không ra khung Chat mà ra khung bình luận.
Tiếp nữa là nếu ai đó muốn bình luận thì phải nhập Capcha.
Nó báo như thế này: “Có vẻ như liên kết sau không an toàn: somee.com”
Có cách nào để khắc phục không ạ?
Do site của bạn không chạy giao thức HTTPS? Cài SSL vào và chuyển sang giao thức HTTPS đi. :P
Khi bấm vào nút messenger thì khung chat hiện ra sát vào phía bên trái màn hình. Làm thế nào để khung chat hiển thị sát bên phải màn hình như của các bạn vậy?
Ủa. Mặc định là nó hiện ở góc dưới bên phải màn hình mà bạn. Chắc web của bạn bị xung đột với code gì rồi mới như vậy chứ. :P
Muốn dịch mấy từ tiếng anh trong Khung chat sang tiếng Việt thì làm thế nào vậy bạn ?
Bước 10 có chỗ thiết lập ngôn ngữ mà bạn. :P
Mình đã chọn tiếng việt (js.src = “https://connect.facebook.net/vi_VN/sdk.js”;) ở bước 10 rồi mà vẫn hiển thị tiếng anh ở các chữ trong khung chat bạn à.
Tài khoản Facebook của bạn đang dùng ngôn ngữ tiếng Việt hay tiếng Anh?
Tài khoản Facebook đang dùng ngôn ngữ tiếng việt bạn à.
tôi làm trên blogspot nhưng không có hiển thị ra khung chat, có cách nào làm trên blogspot không? mong AD có thể chỉ cho tôi. cảm ơn rất nhiều
Mình view source đâu có thấy code Facebook mà bạn chèn vào web?
Đã sử dụng cho web mình và cảm thấy dễ dàng liên hệ với khách hàng hẳn ra! Cám ơn ad!
Mình ko thấy Messenger Platform trên trang quản trị của mình. Bạn giúp mình với. Hay Fb mới update nên ko tìm được ở chỗ cũ? Bạn chỉ mình với!
Mình vừa vào kiểm tra vẫn thấy bình thường mà bạn. Bạn thử kiểm tra lại xem.
e làm bị lỗi a ơi. A chỉ thêm e với.
Lỗi khi phân tích cú pháp XML, dòng 1481, cột 89: The reference to entity “version” must end with the ‘;’ delimiter.
dòng 1481:
js.src = ‘https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1’;
Bạn chèn trực tiếp vào file theme à? Hay sao mà bị lỗi đó? Tham khảo bài viết “Chèn code vào header và footer của website WordPress” để chèn code nhé.