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. :)
Cảm ơn đã chia sẻ. Nhờ vậy web mình có thêm chức năng FB chat
Anh ơi em làm đến bước 9 rồi nhưng nó không hiện mục Customer Chat Plugin trong phần setting pages. Liệu có phải facebook thay đổi gì không anh nhỉ? Anh giúp em với (bow) Em ở Đô Lương nè heehe
Mục đó giờ nó thay bằng “Add Messenger to your website” rồi bạn. :P
A ơi em cũng không thấy mục Add Messenger to your website anh nhỉ. :((
http://tinyurl.com/s6z7kpe
Bạn phải vào “Messaging” chứ không phải “Advanced messaging” nhé. Dạo này Facebook nó thay đổi giao diện hơi nhiều, mình chưa kịp cập nhật. :D
Em thấy rồi, cảm ơn anh nhé (bow)
Một bài viết rất hữu ích vì đúng thông tin mình đang cần. Cảm ơn bạn đã chia sẻ!
Chào b. Mình làm theo tới bước 7. link xong rồi thì ko thấy mục subricebed apps ở đâu là bị j vậy ak? tks bro.
Giờ nó đổi tên mục đó thành “Share attribution” rồi bạn nhé.
Bạn ơi cho mình hỏi là URL bắt buộc phải là https à, vậy http được ko và trên fanpage facebook ko hiện phần Customer chat plugin không biết lý do vì sao ?
Đúng rồi bạn. Facebook không hỗ trợ HTTP nữa. Mà thời nào rồi còn dùng HTTP. Cả thế giới phổ cập HTTPS hết rồi. SSL giờ miễn phí mà.
thanks bạn
Cảm ơn bạn đã chia sẻ kiến thức công nghệ, bài viết rất hay!
Cảm ơn bạn đã chia sẻ bài viết tri thức, rất hữu ích cho mọi người. Mong rằng bạn sẽ chia sẻ thêm nhiều bài viết hay, bổ ích để cho mọi người cùng học tập tham khảo.
Admin cho em hỏi sau khi đã cài Plugin Chat này lên website rồi và em muốn gắn theo dõi chuyển đổi (mỗi khi có ai Click vào nút chat) thì phải làm như thế nào ạ? Em dùng Google Tag Manager để gắn thẻ nhưng không biết phải thiết lập Trigger làm sao! Mong admin giúp đỡ ^^
Cái này mình chịu nhé. Vì dữ liệu được load từ server của Facebook chứ không phải load từ host của bạn nên rất khó để tracking click bằng Google Tags Manager hay Google Analytics.
Bạn ơi cho minh hỏi là mình làm được rồi ,mà bây h mình muốn nó di chuyển được cái nút chat thì phải làm thế nào vậy bạn
Facebook hỗ trợ tùy chỉnh vị trí của widget bạn ạ. Mặc định nó nằm ở góc dưới bên phải trình duyệt như vậy rồi.
Vậy bạn có code nào để di chuyển được cái nút đó ko
Bạn thử tham khảo link này hoặc link này xem sao nhé.
Chào bạn! Cảm ơn bạn đã chia sẻ kiến thức hữu ích.
Mình có thể chỉnh vị trí nút chat FB được không bạn ?
WEB mình : shecenter.vn
Nút chat FB + nút back to top nó đè lên nhau.
Thay vì tìm cách chỉnh vị trí nút chat FB, bạn chỉnh vị trí nút back to top sẽ đơn giản hơn rất nhiều. :P
Hì hì. Nút back top top nằm trong theme mình kiếm không thấy chỗ chỉnh nên mình nghĩ cách chỉnh vị trí FB.
Bạn có thể giúp mình cách chỉnh vị trí nút Back to top được không ?
Bạn tìm đoạn code sau đây trong file stylesheet của theme:
.td-scroll-up {...}sửa giá trịright: 5px;thànhleft: 5px;là được.Cảm ơn bạn rất nhiều!