Việc tích hợp Responsive chức năng Comment bằng Facebook chuẩn HTML5 vào trong Blogspot ( Blogger ) hay Website thật sự rất dễ dàng. Để tiến hành các bạn vui lòng làm theo đúng các bước sau đây . ( Mình Demo trên nền tảng Blogspot. Với Website code vẫn có thể chèn tương tự ) . Mình đưa 3 Tab bên dưới gồm : CSS Responsive comment facebook, Script ( Có 2 loại các bạn hãy tích hợp đủ nhé ), Code chèn khung comment facebook.
Các bạn vui lòng click từng Tab, và làm theo hướng dẫn:
1. Đăng nhập Blogspot -> Mẫu -> Edit HTML
2. Tại khung code HTML, các bạn bấm tổ hợp phím Ctrl+F để tìm thẻ ]]></b:skin>
3. Copy đoạn code CSS sau đây và paste nó vào trước thẻ đóng ]]></b:skin>
4. Tiến mở Tab Script để thực hiện bước kế tiếp
2. Tại khung code HTML, các bạn bấm tổ hợp phím Ctrl+F để tìm thẻ ]]></b:skin>
3. Copy đoạn code CSS sau đây và paste nó vào trước thẻ đóng ]]></b:skin>
@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; } }
4. Tiến mở Tab Script để thực hiện bước kế tiếp
1. Tại giao diện Edit HTML, bấm tổ hợp phím Ctrl+F để tìm thẻ đóng</head>
2. Chèn đoạn Sript code sau đây trước thẻ đóng </head>
//<![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>
3. Để hiển thị giao diện cho khung Comment Facebook. Các bạn tiếp tục bấm tổ hợp phím Ctrl+F tìm đến thẻ </body>
4. Tiến hành Copy đoạn Script code sau đây và chèn nó trước thẻ đóng </body>
<div id="fb-root">
</div>
<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>
5. Bước tiếp theo ta sẽ tiến hành đặt khung Comment Facebook ở mỗi bài viết. Xem Tab tiếp theo!
2. Chèn đoạn Sript code sau đây trước thẻ đóng </head>
<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>
3. Để hiển thị giao diện cho khung Comment Facebook. Các bạn tiếp tục bấm tổ hợp phím Ctrl+F tìm đến thẻ </body>
4. Tiến hành Copy đoạn Script code sau đây và chèn nó trước thẻ đóng </body>
<div id="fb-root">
</div>
<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>
5. Bước tiếp theo ta sẽ tiến hành đặt khung Comment Facebook ở mỗi bài viết. Xem Tab tiếp theo!
1. Trong giao diện Edit HTML các bạn bấm tổ hợp phím Ctrl+F, và tìm thẻ
2. Thêm đoạn code sau đây vào dưới thẻ <b:include data="post" name="post"/>
<b:if cond="data:blog.pageType == "item"">
<script type="text/javascript">
document.write(fbcm);
</script>
</b:if>
3. Lưu mẫu. Và tiến hành kiểm tra !
2. Thêm đoạn code sau đây vào dưới thẻ <b:include data="post" name="post"/>
<b:if cond="data:blog.pageType == "item"">
<script type="text/javascript">
document.write(fbcm);
</script>
</b:if>
3. Lưu mẫu. Và tiến hành kiểm tra !
Để có thể quản lý các Comment Facebook như xóa, edit để tránh hiện tượng Spam, nói tục, share thông tin vi phạm pháp luật Việt Nam. Các bạn có thể tiến hành như sau :
1. Trong giao diện Edit HTML -> Bấm tổ hợp phím Ctrl + F -> Tìm đến thẻ <head>.
2. Thêm đoạn code sau vào dưới thẻ <head> ( chỗ nào cũng được miễn nằm dưới thẻ <head> và trên thẻ </head> )
<meta content='App ID' property='fb:app_id'/>App ID các bạn có thể click vào đây để xem App ID của bạn.
3. Lưu mẫu và kết thúc. Nếu các bạn có thắc mắc hoặc làm không được có thể Comment ở cuối bài viết này. Mình sẽ hướng dẫn cụ thể !
