Cách nhúng Facebook Comment vào Website

Cách nhúng facebook comment vào website

[Cập nhật: 10/2015] Việc nhúng ô Facebook Comment vào website là công cụ tuyệt vời giúp bạn tương tác với khách hàng - đa số họ đều có tài khoản trên mạng xã hội Facebook, qua đó bạn có thêm nhiều traffic, giữ chân khác ở lại website lâu hơn.

Tại sao bạn nên sử dụng Facebook Comment trong website

  • Giao diện đơn giản, thân thiên.
  • Người dùng không phải đăng nhập vì đã có sẵn tài khoản Facebook
  • Bạn không tốn công lập trình, không phải lưu trữ và quản lý các comment.
  • Nội dung bình luận được chia sẻ cho bạn bè của người bình luận.
  • Có thêm một lượng lớn traffic miễn phí đến từ mạng xã hội
  • ...

Những hạn chế khi dùng Facebook Comment cho Website

  • Bạn phải quản lý các comment thông qua Facebook.com.
  • Không có giá trị về SEO bởi vì ô bình luận sử dụng iframe.
  • Bị kiểm soát bởi bên thứ 3, phụ thuộc tốc độ tải của Facebook,
    đôi khi có thể bị chặn, đứt cáp quang.

CÁC BƯỚC CÀI ĐẶT FACEBOOK COMMENT

Bước 1. Tạo 1 Facebook APP mới


  • Bạn chọn platform là: Website  (Facebook cho phép nhúng comment vào 4 nền tảng ứng dụng: iOS, Android, FB Canvas, Website):
Facebook comment Platform website
  • Bạn nhập tên miền (ví dụ: MocMeo.com), Facebook sẽ sinh ra đoạn code. Bạn copy đoạn code này và nhúng vào phần <body> của tất cả các trang trên website:
Facebook comment: thêm tên miền website

Bước 2.  Nhúng Facebook Comment vào Website
Yêu cầu: bạn cần có quyền sửa code website, hoặc gửi cho người có quyền chỉnh sửa.

1. Thêm đoạn code như hình trên vào trong phần <body> của các trang web
Kết thúc bước này, bạn đã hoàn thành việc nhúng Facebook SDK vào website. Bây giờ, bạn có thể đặt bất cứ thứ gì lên trang web: nút Login, Like, Share, Comment,..

2. Đặt đoạn mã để nhúng ô Facebook Comment:
Cách 1: Làm nhanh, đặt đoạn code sau đây vào bất kỳ vị trí nào bạn muốn hiển thị ô comment:
<div class="fb-comments" data-href="http://mocmeo.com" data-colorscheme="light" data-numposts="5" data-width="500"></div>

Trong đó:
  • data-href:  địa chỉ trang web đặt comment
  • data-numposts:  số comments được hiển thị, mặc định là 10
  • data-width: chiều rộng ô comment (pixels)
Cách 2: Thực hiện theo các bước:
Facebook comment plugin
  • Màn hình hiện lên với 2 đoạn code HTML: Facebook SDK (bạn đã nhúng ở bước 1) và đoạn code thứ 2 là Comment Plugin. Bạn hãy copy đoạn code thứ 2 và đặt vào bất cứ vị trí nào trên trang web muốn hiển thị ô comment:

Sau khi cài đặt, bạn sẽ nhìn thấy ô comment ở trong bài viết.

Vấn đề tiếp theo là gì ?
  • Làm sao biết được khi nào ai đó comment ?
  • Cấp quyền cho ai đó làm mod quản lý comment ?
  • Quản lý các nội dung comment này ở đâu ?

Bước 3. Quản lý các Facebook Comments

  • Truy cập: https://developers.facebook.com/tools/comments
  • Đây là nơi bạn quản lý các comment trên website. Bạn có thể ẩn comment, block user,...
  • 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).

Khi ai đó bình luận trên website, các quản trị viên (Moderator) sẽ nhận được thông báo trên trang Facebook cá nhân của họ. Bạn có thể thêm / bớt quản trị viên bằng cách bấm vào Settings. Bạn có thể duyệt các bình luận của người dùng trên ô comment trên website.

Bạn quay trở lại trang web, kéo xuống phần comment. Nếu thấy xuất hiện tab Moderator view (Công cụ kiểm duyệt) là OK

Cách nhúng facebook comment vào website
Vậy là bạn là hoàn thành việc cài đặt công cụ Facebook Comment vào website rồi đó.


Chúc bạn thành công!
Nguyễn Trọng Thơ - Chuyên gia Marketing Online


----------------------------------------------------------------
P/S: Ví dụ cài đặt Facebook comment trên inet.edu.vn:

1. Bổ sung thuộc tính sau vào thẻ <HTML>
  <html ... xmlns:fb="http://ogp.me/ns/fb#">

2.Cài đặt quản trị viên bằng cách đặt 1 trong 2 dòng sau ở <head>
<meta property="fb:admins" content="{YOUR_USER_ID}"/>
(Nếu có nhiều admin thì các ID phân tách bằng dấu phẩy)

Hoặc

<meta property="fb:app_id" content="{YOUR_APP_ID}" />
(Các admin của APP được quản trị comments)


3. Đặt code HTML dưới thẻ <BODY>
<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/all.js#xfbml=1&appId=YOUR_APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

4. Đặt code HTML ở vị trí bạn muốn hiển thị ô comment
<fb:comments href="http://tin.vn" colorscheme="light" numposts="5" width="500"></fb:comments>
(c) Nguyễn Trọng Thơ - Tôi luôn chia sẻ GIÁ TRỊ cho thật nhiều người - Sự kiện hôm nay - Tra cứu tên miền - Đào tạo SEO Master