Tích hợp comment Facebook vào website WordPress

Hiện nay, các mạng xã hội đã và đang rất phát triển. Đặc biệt là Facebook, hầu như mỗi người đều có một tài khoản cho mình. Thêm vào đó, chức năng bình luận của các website thường mang lại khá nhiều bất tiện cho người dùng khi yêu cầu họ cung cấp nhiều thông tin để bình luận. Chính vì vậy, nhu cầu tích hợp comment Facebook vào website nói riêng và các mạng xã hội khác nói chung đang trở thành một vấn đề được rất nhiều người quan tâm. Ở bài viết này, chúng ta sẽ cùng tìm hiểu về cách tích hợp bình luận bằng Facebook vào website của bạn. Cụ thể là tích hợp cho một website WordPress, các website bạn cũng có thể làm tương tự.

Tích hợp comment Facebook

Trước hết, bạn sẽ cần có một Facebook Apps để có được App ID. Nếu chưa biết cách tạo Apps thì bạn có thể tham khảo bài viết bên dưới nhé.

Tham khảo: Hướng dẫn tạo Facebook Apps và lấy App ID

Tích hợp comment Facebook vào website WordPress

Việc tích hợp  này có thể được thực hiện một cách thủ công bằng cách chèn code vào website của bạn hoặc sử dụng plugin. Ở bài viết này chúng ta sẽ tìm hiểu về cách tích hợp bình luận Facebook bằng cách chèn thêm code vào website WordPress của bạn. Để làm việc này, bạn có thể làm theo các bước sau:

Bước 1: Lấy mã code từ trang Facebook for Developer

Sau khi đã có một Facebook Apps, bạn có thể truy cập mục Comment Plugin trên trang dành cho nhà phát triển web của Facebook để bắt đầu lấy code bình luận Facebook. Tại đây, khi kéo xuống dưới, bạn sẽ thấy một khu vực như hình dưới đây.

Lấy code bình luận bằng Facebook

Đây chính là khu vực giúp sinh code bình luận bằng Facebook cho bạn. Bạn có thể nhập các mục ở đây như sau:

  • Mục URL to comment on: Nhập domain của bạn hoặc URL của trang mà bạn muốn thêm bình luận.
  • Mục Width: Nhập 100% hoặc để trống.
  • Mục Number of post: Nhập số lượng bình luận bạn muốn hiển thị sẵn khi trang web được tải.

Nhập xong, nhấn Get Code để nhận mã code. Ở đây, bạn sẽ cần lưu ý chọn Facebook Apps và ngôn ngữ mà bạn muốn dùng cho việc tích hợp comment này khi sinh code (xem hình dưới).

Code comment Facebook

Bước 2: Chèn code vào website

Ở trên, chúng ta có 2 đoạn code nhỏ với yêu cầu kèm theo. Việc của chúng ta lúc này là chèn chúng vào website của bạn. Và nó có 2 đoạn cụ thể như sau:

Phần 1: Yêu cầu chèn vào <head></head>

<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.9&appId=346718845671818";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Từ trang quản trị, truy cập vào Appearance  » Editor. Tại đây, chọn theme bạn đang sử dụng ở mục Select theme to edit (hình bên dưới) và nhấp Select.

Chọn theme để chèn code bình luận Facebook

Tiếp theo, kéo chuột xuống dưới và nhấp vào file header.php (như hình dưới).

Chèn code vào phần head của theme

Khi màn hình soạn thảo hiện ra, bạn sẽ cần chèn đoạn code thứ nhất vào vị trí ngay trước thẻ đóng </head> của theme (xem trên hình). Sau khi chèn xong, kéo xuống dưới và nhấp vào Update file để lưu lại.

Phần 2: Chèn vào vị trí bạn muốn hiển thị bình luận bằng Facebook

<div class="fb-comments" data-href="https://duchuyblog.com" data-numposts="5"></div>

Đây là phần code mà bạn có thể chèn vào bất kỳ đâu bạn muốn. Vị trí chèn của nó sẽ tùy thuộc vào mục đích của bạn và chỉnh sửa thông số cho phù hợp. Ví dụ, chúng ta sẽ thay thế bình luận mặc định của WordPress bằng bình luận của Facebook. Với các vị trí khác, bạn có thể tự tìm hiểu thêm nhé.

Để làm điều này, bạn sẽ cần thay thế code bình luận mặc định bằng đoạn code trên. Từ trang quản trị WordPress, bạn vẫn thao tác như khi chèn đoạn code thứ nhất nhưng bạn sẽ chọn file comment.php để chỉnh sửa.

Thay thế bình luận mặc định bằng bình luận Facebook

Tại đây, bạn hãy xóa hết code cũ và thay thế bằng đoạn code thứ 2. Ngoài ra, nếu bạn để ý trên hình thì đã có chút thay đổi. Đoạn data-href=”https://duchuyblog.com” đã được thay thế bằng đoạn data-href=”<?php the_permalink(); ?>”. Việc thay đổi này có mục đích tự động chèn URL của trang đang tải vào đoạn code thông qua biến the_permalink(). Ngoài ra, bạn cũng có thể chèn thêm các ID và Class vào đoạn code trên để có thể tùy chỉnh cho đẹp. Xử lý xong, bạn kéo xuống dưới và nhấp Update file để lưu lại thay đổi này. Truy cập một bài viết cụ thể để thấy sự thay đổi.

Lưu ý: Bạn cũng có thể sử dụng các phần mềm FTP để duyệt và thêm code vào các file tương ứng trên hosting của bạn.

Quản lý comment bằng Facebook

Để có thể quản lý được các comment mà người dùng đã comment trên các bài viết của bạn, bạn có thể truy cập Comment Moderation Tool của Facebook.

Quản lý comment bằng Facebook

Ngoài ra, bạn cũng có thể quản lý comment trên từng bài viết bằng cách nhấn Công cụ kiểm duyệt ở từng bài (hình dưới).

Quản lý bình luận bằng Facebook của từng bài viết

Tuy nhiên, để làm được điều này, bạn cần chèn thêm 1 trong 2 đoạn code sau vào phần <head></head> của web.

<meta property="fb:app_id" content="{YOUR_APP_ID}" />
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>

Trong đó, Your App ID là ID bạn đã có ở bước 1 và Your Facebook User ID là ID tài khoản Facebook của bạn. Nếu không biết User ID của bạn, bạn có thể truy cập vào đây để lấy ID nhé.

Tổng kết

Bài viết khá dài và cũng có khá nhiều vấn đề được nêu ra nhưng có thể nó vẫn chưa giải đáp hết được những thắc mắc của bạn về việc tích hợp comment Facebook vào website WordPress của bạn. Chính vì vậy, nếu vấn đề của bạn chưa được đưa ra ở trong bài thì có thể bình luận bên dưới để chúng ta cùng bàn luận thêm nhé.

Bài viết cùng danh mục