Cách chèn Facebook Comment và Live Chat vào website đơn giản nhất

Làm cách nào để thiết lập Facebook Comments trên website WordPress (theme bất kỳ)? Ở đây, chúng ta có thể cài plugin hoặc là chèn code comment facebook vào website.

[Update] Mình bổ sung thêm đoạn code tích hợp Messenger vào website WP cho bạn nào muốn tự làm mà không dùng plugin ở MỤC 3 nha.

Mình sẽ nêu những lợi ích mà bạn nên chèn chức năng còm bằng Facebook, và cả việc nhúng chat facebook vào website ở cuối bài viết này nhé. Ngay trên trang web chia sẻ này mình cũng đã tích hợp cho thân thiện hơn. Giờ, cùng xem qua các bước tích hợp các chức năng này lên web thế nào nhé.

Cách chèn facebook comment vào website WP

Thông thường thì một website (WordPress, blogspot, CMS khác…) có cung cấp sẵn chức năng bình luận dưới mỗi bài viết. Tuy nhiên, nếu người truy cập muốn để lại comment hoặc ý kiến phản hồi thì phải nhập email, họ tên trước. Đôi khi chính điều đấy cũng làm bạn cũng chả buồn còm.

Có rất nhiều plugins hỗ trợ comment tương tác, bao gồm plugin comment của facebook. Với bình luận của Facebook trên website sẽ vừa thuận tiện dễ dàng, vừa tăng tính tương tác với mạng xã hội; và bạn có thể kiểm soát các comment spam (ở phần nâng cao). Cách thực hiện cực đơn giản.

#1. Bạn truy cập lấy plugin bình luận FB tại đây để cấu hình (cài đặt) và lấy mã code chèn vào website. Ở đấy có hướng dẫn rất cụ thể. Điền URL là trang web mình, chiều rộng (theo px), số bài viết… Độ rộng 100% để hiển thị tự động trên các màn hình khác nhau.

chen-code-comment-facebook-vao-website
Điền link website của mình và chọn LẤY MÃ – GET CODE

#2 Khi nhấn lấy mã code, có 2 khung code để chèn vào website.

  • Khung Code STEP 2 (JavaScript SDK) là khai báo sự liên kết giữa website với SDK của facebook để sử dụng plugin này. Bạn copy đoạn code đấy và dán vào sau thẻ <body> của website. Thường thì chúng ta chèn vào file footer.php (hoặc header.php cũng được) trong thư mục Child theme đang active.
  • Khung Code STEP 3, chèn vào nơi muốn hiển thị ô bình luận. Bạn sẽ copy và dán code vào file single.php trong thư mục theme của mình, đâu đó ở line 38 (recommended).

<div class=”fb-comments” data-href=”https://bontuong.com” data-width=”100%” data-numposts=”10“></div>

» Lưu ý, thuộc tính data-href khai báo ở trên sẽ chỉ hiển thị phần bình luận cho riêng 1 url bạn nhập vào mà thôi. Nếu bạn muốn khung comment xuất hiện cho toàn bài viết, đơn giản là thay đổi tham số data-href thành: data-href=”<?php the_permalink(); ?>”

#comment facebook
<div class=”fb-comments” data-href=”<?php the_permalink(); ?>” data-width=”100%” data-numposts=”10″></div>

Trường hợp bạn không thấy như những bước lấy code ở trên, có lẽ bạn cần tạo 1 Facebook app trước tiên (mất chỉ vài phút và làm 1 lần duy nhất cho những plugin muốn tích hợp khác).

Hướng dẫn cách tạo Facebook App và lấy AppID

#1 Cũng tại trang lấy code đấy (developers.facebook.com), tiến hành như hình bên dưới. Điền mã bảo mật và nhấn “GỬI”.

how-to-create-facebook-app-get-id

#2 Bạn điền bổ sung thông tin cơ bản ở menu Cài đặt bên trái.

#3 Nhấn “ON” để BẬT ID ứng dụng (nếu nó đang TẮT). Thêm nền tảng, thêm trang web là xong.

Cách chèn facebook messenger vào website WP

Để cài đặt Messenger Facebook Chat lên website, đầu tiên bạn truy cập vào mục CÀI ĐẶT ở trang quản trị Fanpage của mình.

Cach-cai-dat-Messenger-Facebook-Chat
Hướng dẫn thiết lập & chèn mã code vào website – tích hợp live chat

Sau khi nhấn “LINK” thì kéo xuống phần bên dưới bạn sẽ thấy phần “Plugin chat với khách hàng”; Nhấp THIẾT LẬP, rồi làm theo hướng dẫn nhé (chọn ngôn ngữ, thay đổi lời chào theo ý mình, tự động đặt thời gian trả lời, chỉnh màu chat). Xong COPY đoạn mã code và chèn sau thẻ <body>, như  chèn “code step 2” ở mục 1 có đề cập (lăn chuột lên xem lại nếu chưa rõ) là DONE.

Nếu bạn muốn dán code live chat này vào các blogspot, truy cập vào trang quản trị Blogger, chọn “Bố Cục” – “Thêm tiện ích” – “Tiện ích HTML/JAVASRIPT” – dán mã code và lưu lại, DONE.

Code tích hợp Messenger vào website WP

Bạn cần sao chép và dán toàn bộ code bên dưới vào file functions.php trong thư mục child theme của bạn.

NHỚ PHẢI đổi page_id=”9553394…” bên trên bằng ID page bạn, và thêm tên miền website bạn vào whitelist trong FanPage > Cài đặt > Nền tảng messenger.

Những lợi ích khi tích hợp live chat facebook vào website

Use of conditional tags to load the Facebook javascript only on specific posts.
Use of theme specific and WordPress hooks to determine the exact position you want the FB comment form to display.
Customization of the Facebook comments plugin code.

Trên đây là hướng dẫn tích hợp live chat và comment facebook vào website. Bạn có thể để lại còm chia sẻ thêm những cách khác tối ưu hơn ở bên dưới cho mọi người cùng biết thêm nha.

Chúc bạn thành công với một website thân thiện!

Please follow and like us:
0 0 vote
Article Rating

Johnny

"Doing what you like is freedom. Liking what you do is happiness." - Blog chia sẽ những vấn đề mình đã đi qua HOẶC vấp phải nhưng tìm hiểu được giải pháp cho bản thân. Rất vui khi bạn đã ghé thăm "nhà" của mình.

guest
3 Comments
Inline Feedbacks
View all comments
Nguyễn Trang
Nguyễn Trang
1 year ago

Thank ad. Mình làm được rồi nhé
Nhúng được cả 2 nhưng có vẻ hơi nặng

Nam Hải
Nam Hải
1 year ago

Chèn Facebook Comment và Live Chat vào website này có ảnh hưởng gì về chất lượng load không add, có làm chậm các web không ạ