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. :)
Anh ơi. Nếu như e muốn đổi vị trí icon chat thì e có thể chỉnh sửa ở đâu ạ?
Dùng CSS thôi bạn, không có tùy chọn sẵn để thiết lập vị trí.
Hihi thấy được rep sớm như vậy mừng dã man.
Nhưng tại em không rành về css nên em không biết chỉnh sửa thế nào a ạ.
em thử dùng cách kiểm tra phần tử thì nó nằn trong file index.php
mà em tìm hoài không thể sửa được vị trí của n a ạ :(
giúp e với
Dùng CSS edit theme thôi bạn!
Cho mình hỏi là vị trí nó nằm ở góc bên phải như vậy. Mình muốn nó nằm giữa trang bên phải có được không ạ
Bạn thử chèn thêm đoạn code này vào ngay bên dưới code của Facebook xem sao nhé:
Mình đã làm và khi bấm vào chát thì thông báo nó nằm bên trái. Cũng Ok rồi. Muốn cái icon chat nó nằm lên giữa trang bên phải được ko bạn
https://imgur.com/a/A3806X4 ( hình mình chụp á)
Thay
left: 18pt;bằngbottom: xpt;Tự căn chỉnh thông sốxcho phù hợp.Cám ơn bạn đã chỉ tận tình.
Ý mình muốn cái này nè nó nằm ở trên chính giữa bên phải, Bạn xem hình
https://imgur.com/a/XYcEaCJ
Cám ơn ạ
Bạn cho mình hỏi là mình đang thiết kế web bằng Dreamwear8 và k biết lấy URL ở đâu để nhập! web của mình phải làm sao mới có URL vậy bạn? hiện tài tên miền của mình chỉ là
file:///C:/Users/admin/Downloads/VamTran.com/index.htmlthôi…mong bạn phản hồiBao giờ bạn upload mã nguồn lên host và website hoạt động online thì hãy tính đến việc tích hợp Facebook Chat nhé. Muốn có URL thì bạn phải mua tên miền.
Anh ơi, em hỏi anh 2 câu hỏi được không ạ?
Cậu 1: Em vừa cài theo hướng dẫn của anh nhưng khi vào web bình thường không sao nhưng vào web bằng tab ẩn danh thì nó không hiện lên ạ
Câu 2: Em có 2 web nhưng có 1 fanpage thôi ạ ! Vậy để cả 2 web đều hiển thị messenger và chát cho cùng 1 fanepage thì phải làm thế nào ạ?
1. Mình cũng không rõ về vấn đề này. Có thể là do cơ chế của Facebook? Bởi vì code vẫn load trong mã nguồn web khi ở trạng thái ẩn danh.
2. Bạn xem lại bước 8 trong bài viết nhé.
Thưa anh, trang web của em: daotaolaixe247.com và trang web của đối thủ: thibanglaixehn.com đều cài messenger này. Nhưng của đối thủ khi vào bằng tab ẩn danh nó vẫn hiện lên, còn của em thì không hiện lên
Của bạn bị trình duyệt nó báo lỗi này:
Một số gợi ý để fix lỗi:
1. Kiểm tra lại xem Page ID đã chính xác chưa? Page ID chỉ bao gồm các chữ số.
2. Kiểm tra lại whitelisted domain xem đã chính xác chưa? HTTP hay HTTPS? Có www hay không có www? Nếu host sử dụng port tùy chỉnh thì phải khai báo thêm cả port vào. Ví dụ
https://daotaolaixe247.com:443chẳng hạn.3. Kiểm tra xem website của bạn có đang thiết lập
Referrer-Policyheader làno-referrerkhông?1. Em kiểm tra page ID đã ok rồi ạ
2.Cpanel của em là hawkhost có mã số 2083 vậy ở bước số 8 em sẽ phải lưu trang web là: daotaolaixe247.com:2083 ạ?
3. Anh có thể hướng dẫn chi tiết em cách khắc phục lỗi đó được không ạ?
Referrer Policy: no-referrer-when-downgrade1. Host của HawkHost thì mặc định HTTPS sẽ chạy port 443 rồi, không phải khai báo gì cả.
2. Bạn thử thêm code này này vào file
functions.phpcủa theme, xóa cache web (nếu có) và kiểm tra lại:add_action('send_headers', function(){header("Referrer-Policy: no-referrer-when-downgrade");
}, 1);
Anh Hiếu ơi ! Em dán code vào Theme Editor rồi mà cũng không được, anh sửa giúp em qua temviewer với! Tiền công hết bao nhiêu em chuyển khoản qua cho anh
Thử chèn code vào footer theo hướng dẫn này đi bạn: Chèn code vào Header và Footer của WordPress một cách đơn giản. Chèn xong nhớ xóa cache web (nếu site có sử dụng plugin tạo cache).
Dạ em chèn rồi mà cũng không được ! Hay cho em sđt của anh, em mời anh cafe nha !
Mình vào web của bạn thấy hiện widget Facebook chat rồi mà. :)
Anh vào bằng tap ẩn danh nó không hiện ạ !
Vẫn cái lỗi kia nhỉ. Nếu bạn đã kiểm tra tất cả các phương án mà vẫn không được thì mình cũng bó tay.
Anh ơi, hay là anh teamvier kiểm tra cho em với,
[thông tin đã ẩn]
Chào Hiếu,
Mình cài và sử dụng ok rồi, tuy nhiên có vấn đề như vầy:
– Truy cập web bằng trình duyệt Ẩn danh thì không hiện biểu tượng nút chát fb
– Truy cập bằng web di động cũng ko hiện nút chat fb
(kiểu như trình duyệt mình load web mà chưa đăng nhập tài khoản fb thì nó ko hiện vậy)
Cái này rõ ràng. Nó là “tính năng”, không phải “lỗi” nhé. :P
VD: site https://zaca.vn mình truy cập ẩn danh vẫn hiện nút chat fb ạ. Mình có xin code của bạn này cũng y chang của mình, và vẫn không hiện ạ.
Ngoài ra còn nhiều site khác cũng thế: https://ifitness.vn/ trang này của ông anh cũng vậy ạ. Truy cập ẩn danh hoặc mobile vẫn có icon chat fb, click vào sẽ chuyễn vào trang đăng nhập tk facebook
Mình view source thấy code của bạn và code của mấy trang kia đâu có giống nhau. Code của mấy trang kia giống code mình để trong bài viết. Còn code của bạn khác hoàn toàn.
Mình vừa thay lại code trên trang bạn, cũng vậy à, vì code này mình gắn trước rồi nhưng k dc nên vào facebookfanpage lấy code kia,
Ko biết có bị xung đột code, plugin gì ko mà chỉ có site mình bị trường hợp này.
Thử deactivate toàn bộ plugin đi là biết ngay thôi mà. Nhất là mấy plugin cache dữ liệu. Nếu nó hiện thì lần lượt activate cho đến khi không thấy hiện nữa thì thôi => xác định được nguyên nhân.
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é.
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.
Đã 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!
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?
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 à.
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