Study blogger tips

Chèn comment facebook cho blogspot như thế nào ? Các bước tích hợp responsive comment facebook cho blogger chuẩn HTML5 ? Đó là vấn đề cần nhắc đến bài này .

Tích hợp responsive comment facebook cho blogspot chuẩn HTML5

DEMO | DEMO RESPONSIVE

Đầu tiên các bạn đăng nhập vào tài khoản blogger của bạn chọn Mẫu >> Chỉnh sửa HTML nhấn Ctrl+F tìm đến thẻ ]]></b:skin> thêm đoạn CSS bên dưới lên trước nó .

CSS Responsive comment facebook

@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;
}
}

Sau khi thêm CSS xong chúng ta tìm đến thẻ </head> thêm Javascript bên dưới lên trước nó.

Javascript comment facebook

<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>

Tiếp tục chúng ta tìm đến thẻ</body> và thêm đoạn Code ngôn ngữ facebook bên dưới lên trước nó

Code ngôn ngữ facebook

<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 = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Để hiển thị comment facebook chúng ta tìm đến thẻ <b:include data='post' name='post'/>và thêm đoạn mã bên dưới sau nó.

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>

Để quản lý facebook chúng ta cần thêm thẻ meta <meta content='App ID' property='fb:app_id'/> dưới thẻ <head>
Lưu ý:

Nếu các bạn chưa biết cách tạo App ID để quản lý facebook và ưu nhược điểm của nó thì các bạn xem bài này
data-num-posts="10" Số 10 là số lượng comment hiển thị.

Bước cuối cùng lưu lại và test kết quả tìm được .Chúc các bạn thành công !