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. :)
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
Đ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
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”;
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).
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
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.
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.
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.
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.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“.
Chào bạn. Mình cũng thấy plugin Subiz (https://subiz.com/vi/) sử dụng miễn phí cũng tốt. Cài cái được ngay.
Sử dụng ngon lành.
Thanks.
Subiz thì bên mình cũng đã từng có 1 bài viết giới thiệu rồi. :)