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.