Thêm comments facebook song song với comments blogger

byĐỗ Trực - 14


Theo yêu cầu của bạn DINH VAN Tu mình sẽ hướng dẫn bạn cách thêm "comment facebook song song với comments blogger vào blog giống blog của mình.



Demo 

Đăng ký apps trên Facebook 

  1. Bạn đăng ký một apps trên Facebook tại Developers.facebook.com và làm theo các hình bên dưới :






 Chọn chế độ cho comments mặc định của blogspot

Vào blogger > Cài đặt > Bài đăng và nhận xét
Bây giờ chúng ta sẽ tiến hành thực hiện trong template
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chọn mở rộng mẫu Tiện Ích
Bước 3: Dán code bên dưới sau thẻ <head>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='FACEBOOK APP ID' property='fb:app_id'/>
<!--[ jquery ]-->
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript' /></link>
<!--[ font-awesome ]-->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/></link>
<script type='text/javascript'>
 function commentToggle(selectTab) {
  $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
  $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
  $(&quot;.comments-page&quot;).hide();
  $(selectTab + &quot;-page&quot;).show(); }
</script>
  1. FACEBOOK APP ID bạn thay bằng ID đã tạo ở những bước trên
  2. Nếu Blog bạn đã có Jquery và font awesome rồi thì không cần thêm nữa.
Bước 4: Tìm thẻ <html và thay bằng đoạn bên dưới

<html xmlns:fb='http://www.facebook.com/2008/fbml'
Nếu tìm trong template có xmlns:fb='http://www.facebook.com/2008/fbml' rồi thì bỏ qua bước này.
Bước 5: Tìm ]]></b:skin> và dán trước nó code bên dưới

.comments-page {
 background-color: #fff;
 width:100%;
}
#blogger-comments-page {
 padding: 0px 5px;
 display: none;
}
.comments-tab {
 float: left;
 padding:5px 15px;
 margin-right: 0px;
 cursor: pointer; 
 background-color: #f90;
 color:#fff;
}
.comments-tab-icon {
 height: 25px;
 line-height:25px;
 display: inline-block;
 margin-right: 3px;
}
.comments-tab:hover {
 background-color: #f90;
}
.inactive-select-tab{
 background-color: #222;
 color:#fff;
}
@media screen and (max-width:800px){.fb_iframe_widget,.fb_iframe_widget span, .fb_iframe_widget span iframe[style] { min-width: 100% !important; width: 100% !important;}
}

Thay đổi các thông số kích thước sao cho phù hợp với blog của bạn.

Bước 6: Thêm Javascrip vào trước thẻ </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div id='fb-root'/>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : &#39;&#39;,
            xfbml      : true,
            version    : &#39;v2.7&#39;
          });
        };
        (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/en_US/sdk.js&quot;;
          fjs.parentNode.insertBefore(js, fjs);
        }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
      </script> 
    </b:if>

Bước 7: Tìm code bên dưới
<div class='comments' id='comments'>
  • Lưu ý ở nhiều template sẽ khó kiếm thấy thẻ <div class='comments' id='comments'>, thế nên bạn có thể tìm thẻ <b:includable id='threadedCommentForm' var='post'> vì nó nằm trước thẻ trên.  Tiếp theo chèn ngay sau nó (<div class='comments' id='comments'>), đọan code bên dưới.
<table>
<tbody>
<tr>
<td>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' style='float:left;' title='Facebook Comments'>
<i class="fa fa-facebook comments-tab-icon"/>
Facebook Comments
</div>
</td>
<td>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&apos;#blogger-comments&apos;);' title='Blogger Comments'>
<i class="fa fa-comments-o comments-tab-icon"/>
Blogger Comments
</div>
</td>
</tr>
</tbody>
</table>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments data-colorscheme="light" expr:href='data:post.canonicalUrl' expr:title="data:post.title" expr:xid="data:post.id" data-numposts="5" data-width="100%"/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page' style='display:none;'>

  1.  Tiếp đến thêm thẻ </div> vào trước thẻ </b:includable>. Ở bước này nhiều bạn sẽ khó kiếm thẻ đóng, thế nên bạn có thể ấn nút tam giác nhỏ ▲ ở thẻ <b:includable id='threadedCommentForm' var='post'> để nó thu gọn code lại rồi thêm thẻ </div>. Hoặc nếu khó quá cứ lưu mẫu lại sẽ xuất hiện báo lỗi bạn thấy nó lỗi dòng nào thì thêm thẻ </div> ngay dòng đó là được.
  2. # Cập nhật: các bạn có thẻ bỏ qua bước 4 rồi tiếp tục làm theo các bước phía dưới vẫn được nhé.

Chúc bạn thành công
Tags #

Người đăng: Đỗ Trực

14/Post a Comment/Comments

  1. Unknown8/2/13 22:50

    Link ảnh Logo của blog bạn thay bằng link ảnh có kích cỡ 30 x 30px
    FACEBOOK APP ID bạn thay bằng ID đã tạo ở những bước trên
    cái này nằm ở đâu vậy sao mình tìm mãi mà ko thấy vậy bạn

    Trả lờiXóa
    Trả lời
    1. Đỗ Trực16/2/13 20:30

      Đã cập nhật lại(sơ xuất trong lúc viết bài). Bạn thực hiện lại nhé chúc thành công.

      Xóa
  2. Unknown22/2/13 18:34

    Bài này hay đó Trực ơi.
    Mình sẽ nghiên cứu và thêm vào Blog của mình trong thời gian tới.
    Năm mới chúc bạn và gia đình luôn thành công và hạnh phúc.

    Thân mời bạn ghé Cỏ Lấm Bụi Đường chơi nhé!
    Chào bạn!

    Trả lờiXóa
    Trả lời
    1. Đỗ Trực22/2/13 19:07

      Thủ thuật này cũng đơn giản mà bạn.Chúc bạn áp dụng thành công!!

      Xóa
  3. Ảnh bìa đẹp4/3/13 13:28

    Cũng hay đấy bạn

    Trả lờiXóa
    Trả lời
    1. Đỗ Trực5/3/13 19:56

      Thanks bạn đã tặng comment,chúc bạn áp dụng thành công

      Xóa
  4. Thiết kế logo Nhanh11/4/13 14:17

    Hay quá mình thử và được rồi này
    cả nhà check thử nhé
    http://www.thietkelogonhanh.com

    Trả lờiXóa
  5. Unknown12/4/13 21:58

    mình làm xong rồi, nhưng khi tag một người khác vào thì bên fb người đó không có thông báo là sao vậy bạn? ;((

    Trả lờiXóa
    Trả lời
    1. Đỗ Trực12/4/13 22:20

      Bạn có thể cài đặt trong phần Settings-->Public Comments-->Moderator View của tab facebook Cái này mình cũng ít nghịch tới :d

      Xóa
  6. Unknown7/6/13 20:09

    có thể thay cmt của blogger bằng cmt G+ ko bác Trực ơi!

    Trả lờiXóa
  7. Unknown24/2/14 22:41

    sao mình viết số đt rồi mà thấy gửi text bạn chỉ giúp mình với

    Trả lờiXóa
    Trả lời
    1. Đỗ Trực26/2/14 19:19

      Để nhận đoạn mã xác nhận bạn cần nhập chính xác sđt của bạn(sdt mà bạn đăng ký fb) bỏ số 0 đầu đi nhé. Nếu làm một lần không được thì làm lại nhé . :D)

      Xóa
  8. Unknown8/10/14 13:29

    mình chèn vào được nhưng ở comment face nó vẫn hiện comment của bloger ở dưới

    Trả lờiXóa

Đăng nhận xét