Tích hợp Comment Facebook vào website Wordpress, Blogspot

Hướng dẫn tích hợp Comment Facebook vào website wordpress & blogspot đơn giản

// Ưu điểm 

• Giao diện khung bình luận Facebook đơn giản, thân thiện và dễ dàng sử dụng với người dùng.
• Khách hàng có thể comment vào bài viết chỉ cần có sẵn tài khoản Facebook mà không cần nhập thông tin.
• Bài viết được chia sẻ gián tiếp khi người dùng bình luận, nên website được hưởng một lượng traffic từ Facebook.
• Việc quản trị và kiểm duyệt comment, xóa comment và chặn người dùng bình luận vào bài viết dễ dàng.
• Tích hợp khung bình luận Facebook vào website WordPress rất nhanh chóng và không cần dùng đến Plugin.
• Facebook Comment hoạt động tốt trên các thiết bị máy tính PC, laptop, tablet và điện thoại.

// Khuyết điểm

• Khung bình luận Facebook hiển thị nhanh hay chậm phụ thuộc vào tốc độ tải của Facebook.
• Bạn phải quản lý các comment thông qua trang công cụ kiểm duyệt của Facebook chứ không phải trực tiếp.
• Việc quản lý Comment không tốt sẽ là cơ hội cho các spammer lộng hành, bình luận spam tràn lan.

// Cách chèn comment facebook vào website wordpress

Để tích hợp comment facebook vào website wordpress trước tiên bạn cần chuẩn bị 2 điều kiện sau:

• Fanpage đã được lập, kết nối trực tiếp với website, dùng để quản lý comment trên facebook vào website. 

Hướng dẫn tạo fanpage facebook cho người mới bắt đầu

• Vào công cụ phát triển của facebook tại đây để tạo 1 app facebook, mục đích dùng để thêm ID vào đoạn code của khung bình luận facebook. Nếu bạn chưa biết cách tạo app facebook, có thể tham khảo chi tiết tại bài viết hướng dẫn cách tạo facebook app tại đây. 

Sau khi chuẩn bị đầy đủ 2 điều kiện trên, chúng ta tiến hành thực hiện các bước để tích hợp comments facebook vào website wordpress như sau:

Bước 1: Thêm APP ID và USER ID quản trị vào website wordpress

Đầu tiên bạn chèm thêm đoạn code dưới đầy vào Website trước thẻ đóng </head> của file header.php và sửa "APP ID" thành App ID ứng dụng của bạn đã tạo và "USER ID" là số IP profile cá nhân của bạn trên facebook.

<meta property="fb:app_id" content="APP ID" />
<meta property="fb:admins" content="USER ID"/>

• Lấy APP ID: Bạn truy cập vào ứng dụng đã tạo, sau đó sao chép số ID ứng dụng và thêm vào code trên.

• Lấy USER ID: Để biết ID của bạn trên Facebook bạn click vào đây để điền URL cá nhân và lấy ID.

Sau khi chèn đoạn code trên vào file header.php hoàn chỉnh như sau:

Bước 2: Cài đặt comment facebook vào website wordpress

Bạn truy cập vào địa chỉ https://developers.facebook.com/docs/plugins/comments và click nút Lấy mã/Get code phía dưới để lấy code của Plugin Facebook Comment.

Lưu ý: Tại vị trí URL để bình luận bạn thay đường dẫn mặc định của facebook sang đường dẫn fanpage của bạn. 

Tại cửa số hiện ra ngay khi Lấy mã/Get code bạn hãy chọn tên ứng dụng mà bạn muốn quản lý Facebook Comment trên đó và chọn loại ngôn ngữ mà bạn muốn. 

Tiếp theo, bạn copy đoạn code Facebook SDK tại ô Step 2 để dán vào file header.php sau thẻ đóng </head> như dưới đây:

Bước 3: Cài đặt nhúng Comment Facebook vào Wordpress:

Trong theme đang dùng bạn thêm đoạn code sau đây vào file comments.php để nhúng bình luận Facebook vào WordPress:

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="20" data-colorscheme="light" data-version="v2.10">

Sau khi chèn code hoàn thành sẽ như hình dưới đây:

Cuối cùng sau khi hoàn thành những bước tích hợp Comment Facebook cho website WordPress ở trên vào các bài viết của Website sẽ có được kết quả như sau:

// Cách chèn comment facebook vào website blogspot

Tương tự như cách tích hợp comment facebook vào website wordpress thì để chèn comment facebook vào blogspot trước tiên bạn cần chuẩn bị 2 điều kiện sau:

• Fanpage đã được lập, kết nối trực tiếp với website, dùng để quản lý comment trên facebook vào website. 

<Hướng dẫn tạo fanpage facebook cho người mới bắt đầu>

• Vào công cụ phát triển của facebook tại đây để tạo 1 app facebook, mục đích dùng để thêm ID vào đoạn code của khung bình luận facebook. Nếu bạn chưa biết cách tạo app facebook, có thể tham khảo chi tiết tại bài viết hướng dẫn cách tạo facebook app tại đây. 

Sau khi chuẩn bị đầy đủ 2 điều kiện trên, chúng ta tiến hành thực hiện các bước để tích hợp comments facebook vào website blogspot như sau:

Lưu ý: Với việc tích hợp comment facebook vào blogspot này cần thao tác và chèn code nhiều nên bạn cần vào sẵn trang https://www.blogger.com/ -> Chọn Blog muốn chèn -> Chủ đề -> Nút mũi tên bên phải chữ Tuỳ Chỉnh -> Chỉnh sửa HTML

Bước 1: Thêm APP ID và USER ID quản trị vào website blogspot

Đầu tiên bạn chèm thêm đoạn code dưới đầy vào Website sau thẻ <head> trong mục chỉnh sửa code của blogspot và sửa "APP ID" thành App ID ứng dụng của bạn đã tạo và "USER ID" là số IP profile cá nhân của bạn trên facebook.

<meta property="fb:app_id" content="APP ID" />
<meta property="fb:admins" content="USER ID"/>

• Lấy APP ID: Bạn truy cập vào ứng dụng đã tạo, sau đó sao chép số ID ứng dụng và thêm vào code trên.

• Lấy USER ID: Để biết ID của bạn trên Facebook bạn click vào đây để điền URL cá nhân và lấy ID.

Bước 2: Cài đặt comment facebook vào website blogspot

Bạn truy cập vào địa chỉ https://developers.facebook.com/docs/plugins/comments và click nút Lấy mã/Get code phía dưới để lấy code của Plugin Facebook Comment.

Lưu ý: Tại vị trí URL để bình luận bạn thay đường dẫn mặc định của facebook sang đường dẫn fanpage của bạn. 

Tại cửa số hiện ra ngay khi Lấy mã/Get code bạn hãy chọn tên ứng dụng mà bạn muốn quản lý Facebook Comment trên đó và chọn loại ngôn ngữ mà bạn muốn. 

Tiếp theo, bạn copy đoạn code Facebook SDK tại ô Step 2 để dán vào phần chỉnh sửa code của blogspot trong thẻ <head>, ngay sau thẻ <meta> đã được cài đặt ở bước 1 như dưới đây:

Bước 3: Cài đặt nhúng Comment Facebook vào Blogsot:

Cách 1: Thêm mã code sau ngay dưới thẻ <b:include data=’post’ name=’post’/>  hoặc thẻ gần giống

Để tìm thẻ trên bạn click chuột vào khu vực thẻ nhấn tổ hợp phím Ctrl+F sẽ bôi vàng vị trí này bạn hãy chèn vào dưới thẻ được bôi vàng đoạn code sau: 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="640" data-numposts="5" data-colorscheme="light"></div>

</b:if>

Cách 2: Thêm mã code này vào sau thẻ </div> của đoạn thẻ <div class=’post-footer’> hoặc thẻ gần giống

Vẫn thực hiện Ctrl+F để tìm <div class=’post-footer’> và kéo xuống tìm thẻ đóng của nó là </div> và chèn vào đoạn code này:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="640" data-numposts="5" data-colorscheme="light"></div>

</b:if>

Sau đó chọn Lưu mẫu và kiểm tra kết quả nếu trả về kết quả như hình 02 dưới đây là OK.

// Quản lý comment facebook chống spam

Để quản lý các comment facebook mà người dùng đã bình luận trên các bài viết của bạn, bạn hãy truy c

Để quản lý các comment facebook mà người dùng đã bình luận trên các bài viết của bạn, bạn có hãy truy cập công cụ Comment Moderation Tool của Facebook tại: https://developers.facebook.com/tools/comments
Đây là nơi bạn quản lý tất cả các Comment Facebook trên website/blog của bạn:

• Như ẩn comment, block user, báo cáo spam…

• Public: liệt kê các bình luận được hiển thị trên website

• Hidden: các bình luận đã bị ẩn khỏi trang web (bạn của người bình luận vẫn thấy).

Tại cửa sổ cài đặt trình quản lý Facebook Comment bạn có thể thiết lập quy tắc kiểm duyệt để hạn chế Spam trên Facebook như:

• Hạn chế độ dài ký tự bình luận

• Tự động đóng chuỗi bình luận

• Bật tính năng lọc spam triệt để hơn

• Xét duyệt các bình luận có liên kết…

Bạn có thể thêm/bớt quản trị viên bằng cách click vào tab Người kiểm duyệt để thêm người cùng duyệt facebook comment với bạn trên Website.

Để thiết lập các quy tắc kiểm duyệt và quản lý Facebook Comment tốt hơn bạn hãy nhấn vào Cài đặt.