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 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.
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.
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:
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:
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. :)
Cảm ơn tác giả bài viết!!!
Cảm ơn admin đã chia sẻ kiến thức hữu ích.
Admin cho hỏi thêm là thêm code như vậy có ảnh hưởng tới tốc độ tải trang ko ạ ?
Thanks !
Ảnh hưởng nhiều bạn nhé. Các tính năng của Facebook load rất nhiều dữ liệu từ server bên ngoài. Những dữ liệu này không được cache hay nén nên ảnh hưởng xấu đến tốc độ load web.
Thanks Ad. Plugin này đúng là tiện lợi cho việc support khách. Tương tác fb rất tốt.
Vừa đơn giản dễ làm mà lại tiện dụng cho website, tăng trải nghiệm của người dùng!
Có một vấn đề là sử dụng FB chat trên website, nếu bạn dùng điện thoại không thể chat được. Khách hàng buộc phải login FB lần nữa để chat cho dù đã sử dụng FB app rồi
Xin chào ạ!
E đã mua host tại wpcanban ạ
Dạo gần đây e gửi mail tới mail cũ admin@wpcanban mà chắc vô hòm thư spam hay qcáo rồi ạ!
Cho e hỏi là e đang muốn tạo thêm 1 domain trỏ về host thì host của mình có hoạt động ổn như trước ko ạ. E đã đọc 1 bài hướng dẫn tạo domain mới của a rồi ạ, nhưng e vẫn chưa hiểu là khi tạo wordpress mới trên tên miền thì mấy cái như FPT rồi data nó sẽ tồn tại song song vs domain cũ ạ.
E xin cảm ơn ạ!
Bạn tạo addon domain thì nó sẽ hoạt động song song với domain chính nhé, vai trò độc lập và vẫn hoạt động hoàn toàn bình thường ngay cả khi domain chính không còn hoạt động nữa.
dạ e cảm ơn ạ, nhưng dạo này gmail có vấn đề hay sao ạ. E gửi mail hỗ trợ như trc thì bị vào hòm spam hay hòm qcáo chắc rồi ạ.
Mình không nhận được email nào bạn ạ. Mình vẫn kiểm tra các hộp mail thường xuyên, kể cả mục spam.
Anh em mình biết code tốn thời gian 1 tí kiểu này cũng được, Chứ chị em mày mò kiểu beauty blogger mày mò rồi khi có nhu cầu thay đổi cũng cực phết ấy
Đơn giản mà. Có cần code gì đâu ta? Ai cũng làm được. :D
ah điện thoại dùng được luôn ad ơi, chắc tại nó còn cache nên không hiển thị.
Cảm ơn bài viết của ad nha!
Admin ơi, cái này khi mình sử dụng điện thoại thì không thấy hiển thị. Có nghĩa box chat này chỉ dùng có người sử dụng máy tính phải không ạ?
Đúng rồi bạn nhé. Chỉ dùng cho máy tính thôi.
nếu mình muốn áp dụng cho cả điện thoại thì có cách nào không vậy admin?
bây giờ nó lỗi cái url hay sao á ad ơi
Lỗi cái gì bạn nhỉ? Chụp ảnh hoặc copy đầy đủ thông báo lỗi post lên đây giúp mình nhé.
Lỗi URL chính sách quyền riêng tư ạ
https://66.media.tumblr.com/892a59eccf2315f50b49e650a95c2ac9/b9e3a28a63750e5b-03/s540x810/19b567c0dda702e2f49fe9c2c9fc44ba172f438b.png
à dạ được rồi ad ơi còn em tìm trong phần cài đặt không thấy Plugin chat với khách hàng
Bạn vào Settings => Messaging => Add Messenger to your website => click nút “Get Started” nhé.
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!
Đã nhúng thử lên vài websitem có web thì được web thì không, không phải do mình làm sai mà dường như do code web. Không rõ có phải do website nó chặn mã hay bị xung đột gì không nữa. Có ai ở đây từng bị như thế và biết lý do không?
Bạn bật Chrome Dev Tools (F12) xem trong tab Console nó có báo lỗi gì không?
A ơi dùng cái này có bị nặng web giảm tốc độ load ko ạ
Có bạn nhé. Bạn phải lựa chọn giữa tốc độ load và sự tiện lợi dành cho khách hàng. :)
còn làm sao để đưa bình luận bằng fb vô từng bài sản phẩm của web wp bạn ơi
Hướng dẫn này mình chưa viết bạn ạ. Nhưng sẽ có trong thời gian sắp tới nhé. :)
cảm ơn bạn…hóng :D
Cám ơn bạn mình đã làm thành công :)
cho em hỏi em không muốn phần chat messeger hiển thị trên điện thoại thì cần thêm code gì ạh!?
Bạn tham khảo code này thử xem sao nhé. :P
em làm được rồi!
cảm ơn sư huynh nhiều ạh!
Đã làm theo hướng dẫn mà lúc ấn “off” thấy báo: “Bạn phải cung cấp URL Chính sách quyền riêng tư hợp lệ để đăng trực tiếp ứng dụng…” là sao ạ. Em đã coppy đúng link của web mình r ạ
Bạn phải nhập link trang chính sách riêng tư, ví dụ như trang này của bên mình: https://wpcanban.com/chinh-sach-bao-mat Nhập link trang chủ không được đâu.
Em đã thử và thành công, tuy nhiên bọn facebook này làm chậm tải trang nhiều ( em có nhúng trang fb, dùng plugin bình luận) , chưa biết cách nào để tăng tải trang cả. em có cài amp nữa
Mấy cái dịch vụ của Facebook nặng lắm bạn. Code lại không tối ưu nên tải chậm là điều không thể tránh khỏi. AMP trời cũng thế cả thôi.
Vâng, anh có code wordpress nào tốc độ load nhanh không, chia sẻ cho em xin với ạ, em cảm ơn, dùng toàn mấy giao diện rùa bò không à :D
Bạn muốn giao diện nhẹ và load nhanh thì tham khảo theme Paradise của bên mình nhé.
Của em nó hay bị lỗi kiểu không thân thiện với di động, mặc dù giao diện responsive rất tốt, nên em mới cài amp thay thế.
E làm theo nhưng bị lỗi này ạ: https://imgur.com/a/yLx6U84
Bạn thử sửa lại link Facebook SDK xem sao.
sửa lại như thế nào ạ? Em thay hết các kiểu rồi mà ko được. Anh chạy còn bình thuường chứ??
à được rồi. chắc bị xung đột vs cái plugin #
anh ơi, dùng trên 000webhost free không được ạ??
à chạy được rồi ạ =))
Host nào không quan trọng, miễn là có tên miền đàng hoàng thì đều chạy được hết. :P
Mình không gắng được cho web này nhỉ: https://thanhmobile.vn/
Dear bác em hỏi tí. Vì sao lại phải tạo mới FB app nhỉ? Vào cài đặt fanpage có luôn cái thêm plugin live chat rồi @@ cài vào cũng hiển thị như bác. Không hiểu là khi tạo thêm app fb ở bước đầu để làm gì?
Trước đây phải tạo thì mới chèn được Facebook Messenger bạn ạ. Còn hình như bây giờ không cần thiết phải tạo nữa. :)
Anh ơi em đang lập trình java web jsp servlet. làm thế nào để add vào được localhost ạ. em đã làm theo nhưng ko hiện dc cái icon messeger ạ. có cách nào ko host mà vẫn sử dụng được không ạ
Cái này cần domain và live host. Không chạy được trên localhost đâu bạn.
sao những web khác vẫn tích hợp vào localhost dc mà facebook thì ko anh nhỉ. hiên em đang sử dụng tawk.to
Vì cái bước 8 trong bài viết nó bắt phải điền địa chỉ website được phép hiển thị Facebook Messenger.
Hướng dẫn của anh rất dễ hiểu và đúng theo facebook developer. Mà liệu thêm phần power by Nguyen Tin chẳng hạn thì không biết có thêm được không
Không bạn nhé. :P
Chưa quen làm hơi vất vả tý, nhưng nhận thành quả thật tuyệt vời. Cảm ơn bạn Trung Hiếu
so với dùng plugin thì không biết cách này có làm ảnh hưởng đến tốc độ load trang không ad nhỉ?
Dù là dùng plugin hay chèn thủ công thì vẫn gây ảnh hưởng nhiều đến tốc độ load web bạn nhé. Các dịch vụ của Facebook đều rất nặng.
ad cho em hỏi cái này em dùng localhost đc không ạ?
Hình như không được bạn ạ. Vì lúc thiết lập nó yêu cầu phải nhập tên miền.
Em làm theo nhưng cái trang nó ko load ngay được tin nhắn anh ơi.
Mình test thử thấy hoàn toàn bình thường mà bạn.
Thiết nghĩ cái website của mình nó có vấn đề, cứ thêm hay chỉnh sửa đoạn code nào đó. Thì y như rằng vài này sau mọi thứ sẽ trở lại như cũ. Đoạn code mới thêm vào không cánh mà bay.
có cách nào thu được số điện thoại khách hàng khi họ không chat trên website không bạn. Mình gặp tình trạng khách truy cập nhiều nhưng lại không chat hay gọi điện gì cả.
Cái này hình như lần trước mình có thấy 1 người dùng. Là dịch vụ của bên thứ 3, nhưng hình như không hỗ trợ HTTPS. Khá cùi bắp.
Em vẫn chưa biết cài vào đoạn nào trên web để hiện thị đẹp trên giao diện mobile. em cài nó toàn lấn hết web.
Site em đây ạ https://laptopbacninh.com
Tuyệt vời, cám ơn bạn nhé
Mình đã dùng trên Blogspot một thời gian mình thấy khá bất tiện. Nếu site công nghệ thì ok chứ mấy site bán hàng dùng vchat mình thấy ok hơn, đây chỉ là ý kiến cá nhân của mình thôi nhé.
Mình thấy tùy từng site để xài cái Live Chat khác nhau. Như mảng bất động sản, đa phần web mình gặp đều cài Tawk.to. Mấy bên đào tạo ngoại ngữ, marketing thì xài Chat Facebook, vì tập khách hàng đa phần là cái đó.
Chat Facebook thì tiện cho người quản lý website thôi, nếu họ chỉ xài Facebook thì rất tiện, tin nhắn gửi về fanpage hết, đỡ phải truy cập vào 1 website thứ 3 chỉ để kiểm tra và trả lời khách hàng.
Bài viết chi tiết quá. Cảm ơn bạn.
Chả hiểu sao mình chèn code theo cách này, cách đây vài tháng, mà không được, đã thử trên nhiều web.
Sau có thử plugin của Facebook trong khi Plugin WordPress.Org, nó hoạt động một thời gian thì cũng không hiển thị.
Hiện tại thì mình đang dùng WP Chat Box for Facebook Messgenger Custom Chat (Free) của HoliThemes (nay đổi tên, hay bị bán lại gì đó cho MobileMonkey).
Plugin này cho phép ẩn/hiển thị Facebook chat trong Post/Page/Category riêng. Ngoài ra nó cho phép tải Chat sau X giây kể từ khi web được tải xong, cũng khá ổn để không ảnh hưởng tới tốc độ tải của website.
Chào bác ! cho em hỏi , tại sao chat fb này hiển thị trên máy tính và các trình duyệt khác thì ok . Còn đối với trình duyệt safari của iphone lại không hiển thị ?
Facebook Messenger không hỗ trợ trình duyệt Safari trên điện thoại đâu bạn.
Mình có so sánh giữa plugin và theo cách của Hiếu. Mọi hoạt động và tốc độ web đều như nhau, chỉ khác là plugin thì phải trao thêm quyền cho plugin. Cám ơn bạn.
Của mình chèn nó không hiển thị gì cả?
Làm sao để nó hiện luôn cái khung chát cứ không cần phải nhấn vô button vậy nhỉ
Mặc định là nó hiện luôn mà bạn?
Cảm ơn bạn đã chia sẻ bài viết rất chi tiết và công phu. Chúc Web bạn năm mới ngày càng phát triển
Thanks!
Mình thử tắt các plugin đó rồi, nó vẫn không hiện, mình đang test thử code khác.
Cám ơn Hiếu nhiều nha!
Chào bạn, mình sử dụng theme flatsome, khi vào tùy chỉnh giao diện chèn code vào thẻ html xong thì thấy hiển thị khung chat bình thường, nhưng Web thực tế lại không hiển thị, mong bạn tìm hiểu giúp.
Thanks.
Bạn thử tắt các plugin như Jetpack, Autoptimize và WP Super Cache đi xem nó có hiện không nhé.
Add cho hỏi đoạn này nó không có appId và nó báo lỗi ở dòng này attribution=install_email nhờ cao nhân chỉ giúp
Dùng plugin cho dễ, người ko biết code chắc hơi khó hiểu :)))
Hướng dẫn này dành cho tất cả các mã nguồn mà bạn. Đâu chỉ riêng WordPress mà đòi dùng plugin. :P
Plugin chat facebook khá hay đối với các website bán hàng, giúp hỗ trợ, tư vấn khách hàng dễ dàng, tăng lượng chuyển đổi khá tốt. Có 1 cái mình chưa ưng lắm, đó là nó không tự mở ứng dụng Messenger khi người dùng truy cập trên mobile nên vẫn phải dùng thêm 1 giải pháp.
Không hiểu mấy ông lập trình viên của Facebook làm ăn kiểu gì. Có mỗi vấn đề đơn giản như vậy cũng không làm được. Trong khi các dịch vụ livechat khác đều có. :P
sao e coopy xong rồi ko thấy hiẹn len vậy a?
Tính năng này mình thấy không phù hợp với website vì thằng fb không cho chát Guest nên khách truy cập trên điện thoại chịu cứng
Nhiều người cần chứ riêng mình thì không ưa gì các dịch vụ của Facebook. Mã nguồn của chúng rất nặng và không hề được tối ưu, ảnh hưởng nhiều đến tốc độ load web. :P
Cho e hỏi e làm trên mà không thấy hiển thị trên web của mình
Mình đã làm theo từng bước mà nó không hiển thị bác ơi :(
Bạn kiểm tra lại xem link Facebook SDK trong code đã đúng là https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js hoặc https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js chưa?
Mình đã cài theo hướng dẫn mà sao không hiện được chatbox lên web, mong add chỉ giúp. Tks
chào bạn! mình làm trên Nukeviet thì có đc hỗ trợ không bạn?
Được bạn nhé. Miễn là bạn chèn được code vào HTML của website, còn mã nguồn gì không quan trọng.
Cảm ơn bạn nhé, thật đơn giản để chèn Messenger vào web :)
Chào anh, Em đã làm các bước như trên nhưng webiste của em không hiện box chat : toyota-hoankiem.com.vn Anh có thể xem giúp em được không ?
Bạn cho mình hỏi:
– Làm thế nào để thống kê được lượt KH bấm vào nút chat FB trên web và lưu lại thông tin KH đã chat
Mình muốn làm Báo cáo thống kê KH chat trên web
Xin chào bạn!
Mình đã làm tất cả các bước như hướng dẫn nhưng tại sao website https://www.anhkhoi.vn/ của mình vẫn ko hiện ra nút chat của facebook vậy.
Nhờ bạn kiểm tra xem mình làm sai thế nào mà không được.
Thanks!
mình làm như vậy sao web không hiển thị box chat nhỉ
http://duanmoi.info
Mình thử bật Chrome Dev Tools lên cũng không thấy báo lỗi gì nên cũng không rõ nguyên nhân là do đâu luôn.
Bạn kiểm tra lại xem giao thức của website và giao thức khai báo trên Facebook đã chính xác chưa? HTTP hay HTTPS? Thử chuyển website sang giao thức HTTPS xem sao.
Em chào anh, trong phần customer chat plugim của em không có nút setup dù app id của em đã chuyển sang chế độ bật ạ. Em cảm ơn
Code mới không cần App ID nữa rồi bạn ạ.
Chào anh, em đã làm theo hướng dẫn nhưng không thấy hiển thị anh ạ.
Hiện tại code đã thay đổi, nó không có phần điền APP ID ở bước 13 nữa.
http://www.beefone.vn/intro
Anh có thể xem giúp em được không ạ? em xin cảm ơn
Bạn đã cấp quyền hiển thị widget chat cho tên miền chưa?
Dạ em cấp rồi anh ạ nhưng vẫn không được. :(
Bạn kiểm tra lại xem giao thức của website và giao thức khai báo trên Facebook đã chính xác chưa? HTTP hay HTTPS? Có www hay không www? Trường hợp của bạn tên miền chính xác là https://www.beefone.vn
Anh xem hộ em với em tích hợp rồi mà nó không hoạt động. thanks anh
########################### 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.
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!
Do bạn cài lỗi thôi!
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?
Tất nhiên là không rồi bạn. Tin nhắn nào cũng là tin nhắn fanpage cả thôi.
Cảm ơn bài viết có ích của bạn!
Hướng dẫn rất chi tiết & cụ thể. Cám ơn bạn.
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
Kéo lên đọc bình luận bên trên đi bạn. Vấn đề này rất nhiều người hỏi rồi. :P
Tớ mới tìm thấy chỗ này có đổi được nè bạn, nhưng ko rành code, rất mong bạn xem qua, (thay @ thành . ), vì tớ ko muốn spam link vào blog của bạn í ạ.
nguyencaotu@com/tich-hop-live-chat-gui-tin-nhan-cua-facebook-vao-website.html
Cái này không phải code chính chủ của Facebook nên bên mình không có ý kiến gì nhé. Nếu bạn thích có thể dùng. Còn về code chính chủ của Facebook, ở bình luận bên trên mình đã để 1 code CSS demo để mọi người tự chỉnh sửa theo nhu cầu rồi. Bạn kéo lên xem kỹ sẽ thấy.
là đoạn này đúng không bạn?
https://gist.github.com/Kaiderella/73a0808718d5ff1acc961c3ee7e697b3
Tớ thử qua nhưng icon nó vẫn vậy, còn cái khung chào nó chạy qua bên trái màn hình
Làm sao cho nó vẫn bên phải mà chạy lên được, cả icon và khung welcome,
Nghĩ mãi vẫn chưa ra phương án. @@!
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é: https://gist.github.com/Kaiderella/73a0808718d5ff1acc961c3ee7e697b3
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:
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: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
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
Đ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
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!
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 (?)
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”;
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
Bạn bật Dev Tools của trình duyệt web lên, xem tab Console coi nó có báo lỗi gì không?
tab Console không hiển thị lỗi gì hết a.
Nếu bạn thấy nó bị mất thì nhiều khả năng liên quan đến việc site của bạn đang sử dụng giao thức HTTP (không bảo mật).
HIếu, vậy khi mình update theme có bị mất phần footer này hoặc header gì ko
vì nhỡ them update sẽ thay thế phần footer header của hiếu
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.
Mình sử dụng chatfuel https://chatfuel.com Mình có chỉnh bằng tiếng việt và thay đổi nội dung câu chào hỏi nhưng ko thấy có hiệu ứng ngoài wordpress. M.n có biết tại sao không
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
Chào Hiếu. Cảm ơn bạn vì bài hướng dẫn này.
Mình mới mày mò làm web bằng wordpress. Mình làm theo hướng dẫn thì nó ra như vầy. Bạn coi giùm mình nhé
https://uphinhnhanh.com/image/zDybGU
Cảm ơn nhiều lắm !!!
Đâ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.
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 ?
Kiểm tra xem theme có tính năng tối ưu load JavaScript hay cái gì đó tương tự không?
Em đã thử các script khác Facebook thì không sao. Riêng script facebook thì bị .
Anh coi ảnh http://prntscr.com/jqynx7 . Nó load xong rồi tự cancel script fb đi.
Thử với theme mặc định của WordPress (2017 chẳng hạn) xem nó có bị lỗi như vậy không? Nếu vẫn bị thì không phải do theme.
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.
Của mình không thêm được tên miền . mặc dù đã thêm code vào
link ảnh lỗi :https://sv1.uphinhnhanh.com/images/2018/05/27/eeeee.png
Cái tên miền
https://jaspers-market.comgì đó của bạn có truy cập được đâu bạn. Facebook nó báo lỗi là đúng rồi.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!
Cái này là điều rõ ràng bạn nhé. Tích hợp các giải pháp của Facebook vào website thì nó sẽ tải thêm các file JS, CSS từ server của Facebook => ảnh hưởng đến tốc độ load của web. Những file này không nằm trên host nên không thể tối ưu được. Bạn phải lựa chọn dùng hay không dùng mà thôi. :)
Hi Hiếu, bạn có thể cho mình biết bây h mình có thể sử dụng plugin của ai để chat online trên website mà tương đối ngon không?
Miễn phí thì nên dùng Tawk.to nhé. Tham khảo bài viết “Tawk.to – Plugin live chat miễn phí dành cho WordPress“.
Chào bạn. Mình cũng thấy plugin Subiz (https://subiz.com/vi/) sử dụng miễn phí cũng tốt. Cài cái được ngay.
Sử dụng ngon lành.
Thanks.
Subiz thì bên mình cũng đã từng có 1 bài viết giới thiệu rồi. :)
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
Bạn điền link trang liên hệ hoặc trang chính sách trên website của bạn vào đó là được.
Ko được. Mình điền đủ kiểu luôn rồi, kể cả trang liên hệ luôn :(. Như vậy là bị cái gì ??
Cái này hay vì giờ fb quá khả dụng rồi
Cái này kết hợp được với chatbot là ok nhất. Tự động trả lời cho mình. Và thu thập người dùng.
Không hiểu sao mình không có cảm tình với mấy dịch vụ chat bots của Facebook cho lắm. Giao diện nó cứ thế nào ấy. Nói chung chưa tìm được con nào vừa mắt để viết bài giới thiệu. :D
Mình đang dùng chatfuel thấy ok mà.
Website của em có Back To Top. Khi cài vào bị che back to top. Xin anh cho code nâng biểu tượng chat lên cao ạ. Em cảm ơn
website em: http://petschoolshop.com/
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
a ơi hỗ trợ e làm như vậy mà không hiển thị trên website của mình được ạ :(
Bạn thử đổi link Facebook SDK trong code thành https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js hoặc https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js xem sao.
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
Bạn chụp ảnh đoạn code bạn nhận được rồi upload lên mạng và gửi link đây mình xem nào. :)
https://tranhdantuongkimsa.com/wp-content/uploads/2018/03/tranhdantuongkimsa_zalo_screenshot_9_3_2018_179285.png
đây là đoạn code mới ạ ko thấy phần nhập ID
Bạn đã tạo Facebook App và liên kết App với Messenger chưa vậy?
rồi ạ, anh xem lại đi hình như nó mới cập nhật code mới hay sao á
Đúng thật. Nó vừa đổi code. Nếu vậy thì không cần điền App ID nữa. Cứ copy code đó chèn vào thôi. :)
Mình nhúng có mỗi cái code kia vào cũng được :D
Ý bạn là không cần tạo App và lấy App ID à? :P
Mình lấy App ID của cái App trước đó đã tạo để nhúng Page Like và Comment FB :D
Làm thế này mình thấy hơn đc cái là sẽ tracking được (đoán thế) và có hiển thị tên App trong Message Platform của Fanpage.
Tạo App nhanh mà. Cũng đâu mất tiền. Tội gì phải dùng chung. :D
Đã thực hành thành công, cảm ơn Hiếu
Bài viết hay quá ạ
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.
Trong phần Cài đặt của ứng dụng dành cho Facebook Comments, bạn nhớ bật thông báo lên là được: https://photos.app.goo.gl/88MZWTzNsUCmyQlF2
Link truy cập: https://developers.facebook.com/tools/comments/
Em bật rồi những vấn không được anh ạ. Đọc mấy bài viết nước ngoài cũng có khá nhiều người gặp vấn đề tương tự.
Ca này chắc phải hỏi trực tiếp anh Mark Zuckerberg. :)
Đã dùng cách đây vài tháng, cảm thấy oke :D