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'
});
};
(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>
<!-- 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. :)
Chào bạn, mình muốn dời vị trí của icon messenger vì không muốn nó đè lên button”go back” của mình, mình dùng “class = “fb-customerchat”” để sửa css nhưng không được! Khi mình inspect trong chrome thì thấy nó được style inline nên mình không biết phải dùng class nào? Nếu mình dùng nguyên 1 loạt class trong tab thì nó cũng không được. Bạn có thể giúp mình phải sửa thế nào không? Mình dùng wordpress
Thay vì dời icon chat thì bạn nên tìm cách để dời vị trí của nút Back To Top sẽ đơn giản hơn đấy.
Cám ơn bạn mình đã làm được rồi!
Nhưng mình mắc lỗi mới là: mình giả đình là khách hàng dùng ipad để chát với web nhưng không thể mở cửa sổ chát để mình đăng nhập và trò chuyện trong khi mình dùng iphone hay desktop thì mình chat với website bình thường. Bạn có biết lý do gì không? Giúp mình với. Cám ơn bạn
Cái này chắc là vấn đề của Facebook bạn ạ. Không thể can thiệp được đâu.
Chào bạn, cho phép mình hỏi một vấn đề.
Mình có web bán hàng, không biết có cách nào cho live chat facebook chỉ hiển thị khi khách truy cập vào trang sản phẩm. Còn khi khách, người dùng truy cập vô bài viết trong blog bình thường thì ẩn live chat facebook đi.
Chân thành cảm ơn bạn!
Bạn thử dùng plugin Header and Footer Scripts để chèn code Facebook Chat xem sao nhé.
Cho mình hỏi là bây giờ biểu tượng messenger đè lên biểu tưởng “kéo lên”, thì phải giải quyết như nào?
Thay đổi vị trí của nút back to top nhé. Vì nó dễ hơn việc thay đổi vị trí của widget Facebook Chat 1 tỉ lần. :P
Sao có lúc em vào tạo code để chèn vào website thì chẳng còn thấy tính năng này nữa. Ko biết do fanpage hay nó đã ẩn
Nó lại đổi giao diện rồi. Tham khảo bài viết “Hướng dẫn tích hợp Facebook Chat vào website WordPress” cho nhanh.
Nếu phải dùng cùng lúc plugin Like/Share và plugin chat thì phải làm sao bạn?
=== Code từ plugin Like/Share ===
window.fbAsyncInit = function() {
FB.init({
appId : ‘…’,
cookie : true,
xfbml : true,
version : ‘v6.0’
});
FB.AppEvents.logPageView();
};
(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.js”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
============
=== Code từ plugin chat ===
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : ‘v6.0’
});
};
(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’));
===============
Thử chèn 1 code mà nó không hiện thì phải chèn cả 2 thôi. :D
Cho mình hỏi đã làm theo các bước hướng dẫn và chèn đoạn mã vào trang web sao không được ah
XIn hoi cách remove sau khi cai ah, gio minh ko muon xai nua. cam on!
Bạn xóa cái đoạn code đã nhúng vào website đi là xong mà.
Cho mình hỏi ở mục Adv Setting của fanpage mình không tìm thấy Share attribution :(
Adv Setting là chỗ nào bạn nhỉ?
phần Share Attribution trong Advanced messaging đó bạn.
Nó mới bỏ rồi thì phải bạn ạ.
vậy mình bỏ qua bước đó hay sao hả bạn ? có ảnh hưởng gì tới việc tạo chatbox k ta .
Bạn có thể bỏ qua nhé.
Vậy cách này nếu k thành công thì dùng plugin Messenger Customer Chat còn hoạt động ổn k nhỉ ad :D
Bạn tham khảo bài viết “Hướng dẫn tích hợp Facebook Chat vào website WordPress” nhé. :P
Haiz, mình add cái plugin cusctom chat facebook cho nhanh :)
hay quá, cảm ơn tác giả nhiều