(Chèn) thêm comment Facebook vào Blogspot (Mới) thành công

Chèn comment Facebook vào Blogspot (Mới) 100% thành công

Bài viết này, mình sẽ hướng dẫn các bạn cách thêm bình luận Facebook vào blog quản lý bằng App.

Ưu điểm: Dễ dàng tiếp nhận cũng như quản lý tất cả các bình luận.

Giao diện quản lý bình luận của Facebook APP

*Tạo ứng dụng Facebook quản lý bình luận, nhận xét:

Bước 1: Tạo app facebook

Đăng nhập Facebook ~> Truy cập https://developers.facebook.com/apps
Vào My Apps ~> Với những tài khoản Facebook chưa Verify (xác thực) thì sẽ hiện "Register as a Developer", bạn vào đây để xem cách xác thực tài khoản trước khi làm tiếp: Hướng dẫn cách xác minh tài khoản Facebook bằng số điện thoại

Khi tài khoản đã được xác thực: Vào My Apps ~> Add a New App

Tiếp theo nhập mã bảo vệ là ta đã tạo xong App.
Khi đã có App, bạn lưu ý copy Mã ứng dụng (App ID) lại để dùng cho bước sau.

Bước 2: Chèn Facebook Comment vào Blogger (Blogspot)

Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Thêm dòng code sau vào thẻ <html... (Thẻ html này nằm ở ngay đầu Mẫu)

xmlns:fb='https://www.facebook.com/2008/fbml'

Như ảnh dưới:

Thêm thẻ meta sau vào trước thẻ </head>

<meta content='Mã ứng dụng' property='fb:app_id'/>
<meta content='Facebook user ID' property='fb:admins'/>

Thay thế Mã ứng dụng của App mà bạn đã copy ở cuối Bước 1
Thay Facebook user ID bằng ID tài khoản Facebook của bạn (Vào http://wallflux.com/facebook_id/ nếu bạn không biết ID mình)
Thêm đoạn code sau vào trước 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/sdk.js#xfbml=1&amp;version=v2.3&amp;appId=Mã ứng dụng";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Thay thế Mã ứng dụng của App mà bạn đã copy ở cuối Bước 1

Cuối cùng ta sẽ xác định vị trí để chèn bình luận Facebook. Thường thì ta chèn bình luận Facebook vào cuối bài viết, có 2 cách để thực hiện.

Cách 1: Thêm đoạn code sau ngay dưới thẻ <b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='10' data-width='100%' expr:data-href='data:blog.canonicalUrl'/>
</b:if>

Hoặc:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' numposts='5' width='530'/>
</b:if>

Cách 2: Thêm đoạn code sau dưới thẻ đóng </div> của thẻ <div class='post-footer'> (Thẻ này nằm trong phần <b:includable id='post' var='post'>)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' numposts='5' width='530'/>
</b:if>

colorscheme='light' : màu của khung bình luận, facebook cung cấp 2 giao diện là light và dark
numposts='5' : số bình luận hiển thị
width='530' : kích thước chiều ngang của khung bình luận
Vậy là xong, ta Lưu Mẫu lại.

Bước 3: Quản lý Facebook Comment

Truy cập https://developers.facebook.com/tools/comments sau đó chọn ứng dụng của bạn để quản lý bình luận facebook trên blog.

Mọi thắc mắc comment ở dưới để mình giải đáp nhé :)