6 tháng 7, 2015

Thêm bình luận Facebook Responsive cho blogspot

Các hướng dẫn thêm bình luận Facebook cho blogspot hiện nay thì đa số chỉ dùng trên giao diện web và không hỗ trợ wap hoặc nói cách khác là nó không "responsive". Responsive ở đây là cho dù bạn vào bằng bất cứ thiết bị nào thì khung bình luận Facebook sẽ tùy biến kích thước cho vừa cỡ màn hình.


Với cách thêm bình luận Facebook Reponsive cho blogspot này bạn sẽ không phải đau đầu để chỉnh khung bình luận Facebook nữa, nó sẽ giúp bạn tối ưu được web của bạn hơn.

Bước 1: Các bạn vào phần Chỉnh sửa HTML và tìm đến thẻ ]]></b:skin> và thêm đoạn code sau lên trước thẻ vừa tìm:
@media only screen and (max-width: 767px) {
   .fb-comments {
    width: 100% !important;
   }
.fb-comments iframe[style] {
   width: 100% !important;
  }
.fb-like-box {
   width: 100% !important;
  }
.fb-like-box iframe[style] {
   width: 100% !important;
  }
.fb-comments span {
   width: 100% !important;
  }
.fb-comments iframe span[style] {
   width: 100% !important;
  }
.fb-like-box span {
   width: 100% !important;
  }
.fb-like-box iframe span[style] {
   width: 100% !important;
  }
}

Bước 2: Tìm đến thẻ </head> thêm đoạn code sau lên trên nó:
<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="10" data-width="100%"></div>';
//]]>
</script>

Bước 3: Tìm đến thẻ </body> thêm đoạn code sau lên trên nó:
<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>

Bước 4: Để khung bình luận Facebook nằm ở cuối bài đăng thì các bạn tìm đến thẻ <b:include data='post' name='post'/> và thêm code sau bên dưới nó:
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>

Lưu ý:

- data-num-posts="10" là số lượng bình luận sẽ hiển thị.
- Thêm ID của app fb và ID của Facebook quản lí app đó để quản lý bình luận trên trang của bạn.