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

113 Bình luận

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:

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. Click chọn mục Messenger platform.

click-vao-messenger-platform-trong-page-settings

7. Paste App ID mà bạn đã copy ở bước 5 vào mục Link your app to your Page rồi click vào nút Link.

link-your-app-to-your-page

Sau khi liên kết thành công, tên ứng dụng sẽ được hiển thị trong danh sách Subscribed apps.

subscribed-apps

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 nút Set Up trong mục Customer Chat Plugin.

setup-customer-chat-plugin

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

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. Copy code được cung cấp, tick vào mục I’ve added the code to the website 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:

Hãy thay your-app-id bằng App ID mà bạn đã copy ở bước 5.

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

Tích hợp Facebook Chat cho website không cần dùng plugin
4.7 (26 votes)

Reader Interactions

Bình luận

    Trả lời

    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.

  2. Chào anh Hiếu. E có 1 câu hỏi liên quan đến facebook nhưng không phải chat mà là facebook comment: Làm thế nào để nhận được thông báo khi có người bình luận trên website bằng plugin facebook comment ạ. Em cảm ơn anh nhiều.

    Trả lời

  6. sao mình làm rồi mà nó ra đoạn code mới không giống trên hinh nhap vao web thi nó không hiện lên

    Trả lời

    • Cái này hơi khó. Điều chỉnh vị trí nút back to top của bạn sẽ dễ hơn. 1 là cho nó sang bên trái màn hình. 2 là cho nó nằm bên trên nút FB Chat. :P

      Trả lời

  10. Làm sao để đăng ký cái Privacy Policy URL này vậy ?? Mình điền đủ kiểu rồi vẫn ko được. Ai biết hướng dẫn với

    Trả lời

  11. 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!

    Trả lời

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

    Trả lời

  14. 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 ?

    Trả lời

    • Đâ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.

      Trả lời

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

      Trả lời

        • 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

          Trả lời

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

    Trả lời

  18. 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!

    Trả lời

    • 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 (?)

      Trả lời

    • 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”;

      Trả lời

  19. Đ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

    Trả lời

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

    Trả lời

  21. 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 ạ?

    Trả lời

  22. 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?

    Trả lời

    • Ủ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

      Trả lời

      • 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 ?

        Trả lời

          • 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 đang dùng ngôn ngữ tiếng việt bạn à.

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

    Trả lời

  25. 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!

    Trả lời

  26. 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’;

    Trả lời

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

    Trả lời

      • 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

        Trả lời

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

          Trả lời

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

  28. 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 ạ?

    Trả lời

    • 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é.

      Trả lời

      • 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

        Trả lời

        • Của bạn bị trình duyệt nó báo lỗi này:

          Refused to display 'https://www.facebook.com/plugins/customerchat.php?app_id=&attribution=setup_tool&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FtrnHszv6jVd.js%3Fversion%3D42%23cb%3Df2609a90e8244ac%26domain%3Ddaotaolaixe247.com%26origin%3Dhttps%253A%252F%252Fdaotaolaixe247.com%252Ff277732334a5c38%26relation%3Dparent.parent&container_width=0&locale=en_US&logged_in_greeting=Ch%C3%A0o%20b%E1%BA%A1n%20!%20B%E1%BA%A1n%20%C4%91ang%20c%E1%BA%A9n%20t%C6%B0%20v%E1%BA%A5n%3F%20H%C3%A3y%20ch%C3%A1t%20Messager%20v%E1%BB%9Bi%20ch%C3%BAng%20t%C3%B4i&logged_out_greeting=Ch%C3%A0o%20b%E1%BA%A1n%20!%20B%E1%BA%A1n%20%C4%91ang%20c%E1%BA%A9n%20t%C6%B0%20v%E1%BA%A5n%3F%20H%C3%A3y%20ch%C3%A1t%20Messager%20v%E1%BB%9Bi%20ch%C3%BAng%20t%C3%B4i&page_id=795359943842984&sdk=joey&theme_color=%230084ff' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.com".

          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:443 chẳng hạn.
          3. Kiểm tra xem website của bạn có đang thiết lập Referrer-Policy header là no-referrer không?

          Trả lời

          • 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-downgrade

          • 1. 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.php củ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

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

  29. 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 ạ

    Trả lời

      • 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

        Trả lời

  31. Bạn cho mình hỏi, làm sao di chuyển cái biểu tượng chat này tới 1 vị trí khác, để chỗ mặc định nó che cái “Về đầu trang”, rất mong bạn chia sẻ, Cám ơn bạn nhiều

    Trả lời

  34. Cho mình hỏi. Với tính năng này thì trên trang quản lý tin nhắn có thể phân biệt đầu là tin nhắn đến từ web và tin nhắn đến fanpage không?

    Trả lời

  35. Anh ơi cho em hỏi là:
    – Trên web của em thì chạy được bình thường, nhưng vào mobile thì lại không hiện khung chat.
    – Với em vào trình duyệt ẩn danh và chưa đăng nhập vào fb trước đó thì cũng không hiện khung chat.
    Đây có phải là tính năng của nó thế hay do e cài bị lỗi gì đó ạ.
    Em xin chân thành cảm ơn!

    Trả lời

    • ##########################
      # The CustomerChat plugin is no longer part of the main Facebook SDK.
      # To continue using it please use the correct SDK URL,
      # meaning replace sdk.js with sdk/xfbml.customerchat.js.
      # For more details see https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk
      ##########################

      Nó bảo link SDK của bạn không chính xác nhé, sửa lại cho đúng.

      Trả lời

Footer

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

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

  1. Văn Luận (11)
  2. nguễn hưng (5)
  3. Phú Hà (5)
  4. Thành Phạm (5)
  5. Dũng Trương Minh (4)
  6. Trọng (4)

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

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