Blog DX

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

16 tháng 3, 2015
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)

26 nhận xét:

  1. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa

  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

    Trả lờiXóa
    Trả lời
    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>

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

    xem thử: Fix giam can

    Trả lờiXóa
  4. sao mình không nhúng được nhỉ

    Trả lờiXóa
  5. Bạn vào giúp mình với, sao mình không chèn được.

    Trả lờiXóa
    Trả lời
    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!

      Xóa
    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.

      Xóa
  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

    Trả lờiXóa
    Trả lời
    1. Làm sao mà không có được, bạn vào https://developers.facebook.com/tools/comments bằng tài khoản facebook quản trị. Bạn sẽ thấy mấy cột Review, Public, Hidden, bình luận sẽ hiện ở cột Review đấy.

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

      Xóa
    3. Kiểm tra thêm App ID xem có copy nhầm không

      Xóa
  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/

    Trả lờiXóa
    Trả lời
    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à

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

    Trả lờiXóa
  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.

    Trả lờiXóa
  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?

    Trả lờiXóa
  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?

    Trả lờiXóa
    Trả lời
    1. bạn đưa mình link trang web của bạn để mình xem thử nhé

      Xóa
  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

    Trả lờiXóa
  13. Các bước hack like facebook trên máy tính và điện thoại đơn giản nhất.
    Chi tiết xem tại: tanglikefree.com

    Trả lờiXóa