• Home
  • WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Quét mã độc website
    • Tối ưu WordPress
    • Mua theme Paradise
  • Thông báo
  • Liên hệ

WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

Trang chủ » WordPress » Thủ thuật WordPress » Tích hợp Facebook Chat cho website không cần dùng plugin

Tích hợp Facebook Chat cho website không cần dùng plugin

13/03/2018 10/01/2020 Trung Hiếu 279 Bình luận

Mục lục bài viết

  1. Các bước tích hợp Facebook Chat cho website

Tích hợp Facebook Chat cho website mà không cần dùng plugin.

tich-hop-facebook-chat-cho-website-khong-can-dung-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.

facebook-customer-chat

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.

click-vao-nut-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.

create-a-new-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.

click-vao-muc-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.

thiet-lap-facebook-app-basic

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).

kich-hoat-app-facebook

Click vào nút Confirm để xác nhận việc kích hoạt.

xac-nhan-kich-hoat-app-facebook

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.

click-vao-advanced-messaging-trong-page-settings

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.

share-attribution

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.

white-listed-domains

9. Click vào mục Messaging trên trang quản trị.

click-vao-messaging-trong-page-settings

Click tiếp vào nút Get Started trong mục Add Messenger to your website.

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.

lua-chon-ngon-ngu-cho-facebook-chat

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.

tuy-chinh-mau-sac-cho-facebook-chat

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.

copy-code-facebook-customer-chat

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>

view raw
facebook-customer-chat.js
hosted with ❤ by GitHub

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:

demo-facebook-customer-chat

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. :)

4.5 / 5 ( 32 bình chọn )
  • Share on Facebook
  • Tweet on Twitter

Bài viết liên quan

Chuyên mục: Thủ thuật WordPress Thẻ: Facebook

dich-vu-cai-dat-website-wordpress-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.

Bài viết trước « Có nên combine JavaScript và CSS trong WordPress?
Bài viết sau Tích hợp widget Facebook Page vào website WordPress »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. minh viết

    29/10/2020 lúc 06:45

    Chào bạn
    Mình cài lên mà nó bị trùng với cái nút quay lên đầu trang. Có cách nào set nó lên cao hơn 1 chút được không nhỉ. Mình dùng WP
    trang của mình: https://giahuyland.com.vn/

    Trả lời
    • Trung Hiếu viết

      29/10/2020 lúc 07:04

      Bạn có thể chuyển nút back to top sang góc dưới bên trái nhé. Làm việc đó dễ hơn nhiều so với việc điều chỉnh vị trí của Facebook Chat.

      Trả lời
  2. Ngọc Thúy viết

    29/10/2020 lúc 15:23

    Cảm ơn ad đã chia sẻ bài viết hay, mình đã tích hợp thành facebook chat vào website của mình

    Trả lời
  3. Ha Huynh viết

    29/10/2020 lúc 16:27

    Hay vậy, giờ em mới biết luôn. Cảm ơn bác nhiều nha.

    Trả lời
« 1 … 10 11 12

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Đừng quên truy cập vào email của bạn để xác nhận việc đăng ký nhé!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-website-wordpress-chat-luong-cao

Bài viết mới nhất

  • Hướng dẫn sử dụng LiteSpeed Memcached 17/01/2021
  • Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache 08/01/2021
  • Hướng dẫn nâng cấp PHP 8 cho website WordPress 15/12/2020
  • Sửa lỗi không hiện hình ảnh và mô tả khi share link lên Zalo 11/11/2020
  • Hiển thị mô tả cho category và tag trong WordPress 05/11/2020
  • Cải tiến công cụ tìm kiếm mặc định của WordPress 31/10/2020

Dịch vụ quét mã độc miễn phí

quet-ma-doc-mien-phi-cho-website

Footer

Bình luận mới nhất

  • Hải trong 5 Lời khuyên giúp tăng Adsense CTR của bạn lên 500%
  • Trung Hiếu trong Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache
  • Trung Hiếu trong 5 Lời khuyên giúp tăng Adsense CTR của bạn lên 500%
  • Trung Hiếu trong 5 Lỗi bảo mật thường gặp trên WordPress và cách khắc phục

Bình luận nhiều nhất (tháng)

  1. Doligo (7)
  2. Tuyen (7)
  3. Tien Coin (4)
  4. lê hải (3)
  5. Nguyễn Văn Long (3)
  6. Thành (3)

Thông tin hữu ích

  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

10 Chuyên mục - 978 Bài viết - 37222 Bình luận

Bản quyền © 2014 - 2020 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting