Chèn comment Facebook cho website

Chào các bạn!

Mình đang làm 1 cái website mới để kinh doanh, mình quyết định sử dụng hệ thống comment Facebook cho website mới này bởi vì tính phổ biến của Facebook. Tiện thể mình viết bài này để hướng dẫn cho những bạn chưa biết thì có thể làm theo. Bởi vì dùng comment của Facebook cũng có nhiều cái hay lắm.

Trên mạng cũng có vài bài hướng dẫn chèn rồi nhưng bài viết này mình sẽ hướng dẫn chi tiết hơn với cả làm luôn tính năng responsive cho khung comment.

Đầu tiên bạn truy cập vào link sau để tạo App

https://developers.facebook.com/quickstarts/?platform=web

Điền tên App vào và khởi tạo

Khởi tạo app

Sau đó sẽ có một Popup hiện ra, tiếp đến bạn chọn danh mục và tạo App ID như hình dưới. Việc lựa chọn danh mục chỉ mang tính tương đối và cũng ko quan trọng lắm.

Create App ID

Lúc này Facebook sẽ cấp cho bạn một đoạn code (JavaScript) bạn dùng đoạn này và cho vào ngay bên dưới thẻ <body> trong phần code của website hoặc bạn có thể chèn vào từng trang riêng biệt nếu bạn muốn chỉ trang đó sử dụng đoạn code này. Hãy chú ý đến AppID của bạn nhé.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1536435526646900',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (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/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Trên đây là code của mình, bạn có thể thay appId để sử dụng. Phần bên dưới thì bạn điền website của bạn và bấm Next

Site URL

Thực ra bấm Next xong thì cũng chẳng còn việc gì :v Bởi vì việc quan trọng là chèn đoạn code phía trên kia vào website.

Ok, tiếp đến là bạn chèn khung comment của Facebook vào vị trí mà bạn muốn nó hiển thị. Đoạn code như sau

<div class="fb-comments" data-href="http://hiepb.com/" data-numposts="10" data-width="100%" data-colorscheme="light"></div>

Thay link website thành của bạn nhé. Tiếp đến là bạn cần sử dụng thêm đoạn CSS này để làm cho phần comment của Facebook có tính năng Responsive

<style>
.fb_iframe_widget,.fb_iframe_widget span, .fb_iframe_widget span iframe[style] { min-width: 100% !important; width: 100% !important;
}</style>

Bạn thêm vào cùng vị trí với 1 trong 2 đoạn code trên đều được. Nếu bạn không phải là dân code thì hãy nhờ đội kỹ thuật. Họ sẽ biết chèn vào vị trí nào là tối ưu nhất. Như vậy là bạn đã có được phần comment bằng Facebook + tính năng responsive + có quản lý comment.
Bây giờ bạn hãy truy cập vào link sau để quản lý comment

https://developers.facebook.com/tools/comments

Hãy lựa chọn đúng App mà bạn mới tạo lúc nãy là được.

Facebook App

Chỉ đơn giản như vậy thôi là bạn đã có thể tận dụng sức mạnh viral của Facebook để tận dụng cho việc kinh doanh rồi.

Từ khóa: tích hợp comment facebook vào website, thêm comment facebook vào website, tạo comment facebook cho blogspot, code comment facebook cho blogspot, Cách nhúng Facebook Comment vào Website, Tích hợp Comment Facebook vào website