Hướng dẫn chèn Facebook Comment vào Blogger (Blogspot)

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 veryfi (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'

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

Thêm đoạn code sau vào trước thẻ </body>
<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/vi_VN/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

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;'>
<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.

Update: Nâng cấp Facebook Comment phiên bản mới nhất cho Blogger (Blogspot)

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

24 Comments

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

  1. This comment has been removed by a blog administrator.

    ReplyDelete

  2. Mình làm được nhưng nó hiện lên 3 ô comment một lúc , bạn hướng dẫn giúp mình xóa bớt đi được không

    ReplyDelete
    Replies
    1. Trang của bác dây đúng ko ? minhhoanrussia.blogspot.com
      hình như bác không thêm facebok comment theo cách của cháu, trang bác có 3 cái comment là do có 3 dòng code này: document.write(fbcm);
      2 dòng code ở trong template và 1 dòng ở tiện ích HTMl/JavaScript (Bố cục)

      Bác xóa 2 trong 3 cái trên đi, nhớ là xóa cả đoạn code nhé:
      <script type='text/javascript'>
      document.write(fbcm); </script>

      Delete
  3. đã làm được rồi, cảm on bạn nha

    xem thử: Fix giam can

    ReplyDelete
  4. sao mình không nhúng được nhỉ

    ReplyDelete
  5. Bạn vào giúp mình với, sao mình không chèn được.

    ReplyDelete
    Replies
    1. bạn xem hộ mình làm cách nào để chèn comment facebook vào blog của mình phamtuanhiep.blogspot.com. Nếu cần thiết thì bạn có thể làm qua teamviewer cũng được. Cảm ơn!

      Delete
    2. Bạn vào temp xóa bỏ một số chỗ sau:

      <meta content='YOUR_APPLICATION_ID' property='fb:app_id'/>



      <div id='fb-root'></div>
      <script>
      //<![CDATA[
      window.fbAsyncInit = function() {
      FB.init({
      appId : 'YOUR_APPLICATION_ID',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml : true // parse XFBML
      });
      };
      (function() {
      var e = document.createElement('script');
      e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
      e.async = true;
      document.getElementById('fb-root').appendChild(e);
      }());
      //]]>
      </script>



      <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>

      ==================================

      Thay đoạn :

      <fb:comments colorscheme='light' height='110' expr:href='data:post.canonicalUrl' title='...' width='772'></fb:comments>

      thành

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

      ======================================

      Tạm thời như vậy xem có đc ko.

      Delete
  6. Bạn ơi ! cho mình hỏi mình làm như bạn sao mình comment mà trong quản lý comment fb không có nhỉ bạn ?? giúp mình saodoc.com

    ReplyDelete
    Replies
    1. nhớ là trên hàng Review đấy có cái chọn app, bạn chọn đúng app nha

      Delete
    2. Kiểm tra thêm App ID xem có copy nhầm không

      Delete
  7. Chào bạn, mình đã làm theo bạn và được, nhưng mình vào chỗ ứng dụng vẫn ko thấy, mình muốn mỗi lần có người cmt sẽ gửi về mail của mình và hiển thị ở khung bình luận mới nhất thì làm sao hả b. Đây là blog mình: http://chiase72h.blogspot.com/

    ReplyDelete
    Replies
    1. Mấy cái thông báo đó là do facebook nhé chứ không can thiệp được đâu. Nếu vào https://developers.facebook.com/tools/comments vẫn không thấy thì thử chèn bản mới này xem sao http://www.dxoan.com/2015/06/chen-facebook-comment-phien-ban-moi-nhat-cho-blogger-blogspot.html
      nhưng mà lạ nhỉ, mình vẫn xem đc comment ở chỗ quản lý mà

      Delete
  8. Thêm comment Facebook vào Blogspot Blogger (Mới) 100% thành công:
    https://www.youtube.com/watch?v=vElOHRFK3Mk

    ReplyDelete
  9. Cảm ơn Admin. Mình đã làm được. Đây là địa chỉ Blog của mình: http://bloghuunhat.blogspot.com/
    Mình đã làm thành công.

    ReplyDelete
  10. adm cho mình hỏi, sao mình làm có khung bình luận rui nhưng lại không đăng bình luận lên được. nó báo "không gửi được tin nhắn". là bị sao z adm?

    ReplyDelete
  11. adm cho mình hỏi, sao mình làm có khung bình luận rui nhưng lại không đăng bình luận lên được. nó báo "không gửi được tin nhắn". là bị sao z adm?

    ReplyDelete
    Replies
    1. bạn đưa mình link trang web của bạn để mình xem thử nhé

      Delete
  12. Bạn Huan Nguyenxuan kiểm tra lại còn thiếu xót bước nào không, hoặc bạn gửi site lên đây để a/e test giúp cho bạn

    ReplyDelete
Previous Post Next Post

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !