Thủ thuật thêm comments facebook chuẩn HTML5 cho blogspot

Comments facebook cũng như bất kỳ thủ thuật blogspot nào khác mà bạn muốn thêm vào trang của mình thì đỏi hỏi những tiện ích này đạt chuẩn code của google đó là HTML. Vì nếu như template blogspot của bạn đang rất tốt mà thêm một số widget không chuẩn thì nó mất hết giá trị.

Dưới đây là hộp comments facebook đạt chuẩn HTML5 mà tôi muốn gởi đến các bạn vì một blog khi đã đạt đến chuẩn này thì seo nó khá dễ dàng các bạn ạ. Đặc biệt thủ thuật blogspot mà tôi sắp giới thiệu ở đây tích hợp responsive co giản trên tất cả các thiết bị di động.

Thủ thuật thêm comments facebook chuẩn HTML5 cho blogspot

Để thêm comments facebook cho blogspot thì thủ thuật này khá đơn giản chỉ cần các bạn làm thêm 3 bước mà tôi hướng dẫn sau đây để thực hiện. Và các bạn hãy tiến hành làm trên template blogspot của mình.
Blogger settings > Mẫu > Chỉnh sửa HTML
Bước 1 : Thêm 2 đoạn thẻ meta cấu hình app cũng như admin quảng trị hộp comments trên facebook của bạn. Có nghĩa là khi làm thế này thì bạn có thể quản trị xóa hoặc ẩn những bình luận mà bạn không thích. Dán đoạn code dưới thẻ <head>

<meta content=’YOUR_APP_ID ‘ property=’fb:app_id’/>
<meta content=’http://www.facebook.com/username‘ property=’fb:admins’/>

Bước 2 : Dán đoạn code sau dưới thẻ <body> để cấu hình app ID cho thủ thuật tiện ích comments facebook của bạn.

<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR-FB-APP-ID',
status : true, // check login status cookie : true, // enable cookies 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>

Bước 3 : Bây giờ là lúc chúng ta cho hiển thị comments facebook này ở nơi nào mà mình thích nhưng thông thường thì tôi hay đặt nó ở dưới

<div class='post-footer-line post-footer-line-1'>

Chèn ngay dưới nó

<b:if cond='data:post.isFirstPost'> <script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div style='margin: 20px 0 0 0;background:white;border:1px solid silver;'><fb:comments colorscheme='light' data-version='v2.3' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='100%'/></div>
</b:if>
<div class='clear'/>