Hướng dẫn 2 cách làm widget facebook comment cho blogger

2 hệ thống Comment đó là:
- Comment Facebook không thể quản lý.

- Comment Facebook được quản lý từ facebook thông qua tài khoản APP đăng ký với facebook.
Với loại comments này bạn có thể kích hoạt chức năng post ảnh(đính kèm photo) với plugin hỗ trợ của nó mà bạn không cần phải đưa thêm gì vào trong mẫu.
Dưới đây sẽ hướng dẫn các bạn cài đặt 2 loại comment facebook cho blogspot như đã nêu ở trên.

1- Comment Facebook không quản lý

Để chèn Comment Facebook không thể quản lý các bạn cần qua các bước sau:
+ Cách 1
A- Vào chỉnh sửa mẫu chèn trước thẻ </head> đoạn code sau:

<script type='text/javascript'>
//<![CDATA[
String.prototype.GetValue=function(e){var t=new RegExp("(^|&)"+e+"=([^&]*)(&|$)");var n=this.substr(this.indexOf("?")+1).match(t);if(n!=null)return unescape(n[2]);return null};var purl=location.href;var cm_form=purl.GetValue("cm_form");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%" data-colorscheme="light" ></div>'
//]]>
</script>

Trong đó:
Khung Comment màu sáng:light
Khung Comment màu tối:dark
B- Chèn ngay sau thẻ <b:include data='post' name='post'/> đoạn code sau:

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

C- Chèn trước thẻ </body> đoạn code sau:

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

+ Cách 2:
Cách này lợi dụng luôn code của comments có quản lý nhưng không có ID vì chưa đăng ký APP.
A- Chèn ngay sau thẻ <b:include data='post' name='post'/> đoạn code sau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-colorscheme="light" data-numposts="5" data-width="100%" />
</b:if>

Trong đó:
- data-numposts: Số comments được hiển thị, mặc định là 10
- data-width: Chiều rộng ô comment (pixels)
B- Chèn trước thẻ </body> đoạn code sau:

<div id='fb-root'></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '@@@',
xfbml : true,
version : 'v2.7'
});
};
(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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Vì chưa có ID nên phần ID để trống.
2- Comment Facebook được quản lý từ facebook
Bước 1. Tạo 1 Facebook APP mới
Bạn truy cập vào địa chỉ sau với tài khoản facebook của bạn
https://developers.facebook.com/apps
Click vào nút: + Add a New App

Điền dầy đủ thông tin:

Bạn click: Website (Website ô cuối cùng):

Bạn nhập tên miền blogspot, Facebook sẽ cung cấp cho ta đoạn code. Bạn copy đoạn code này và nhúng vào trước </body>trong mẫu.

Bước 2. Nhúng Facebook Comment vào Blogspot
Chèn ngay sau thẻ <b:include data='post' name='post'/> (hoặc nơi bạn muốn) đoạn code sau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-colorscheme="light" data-numposts="5" data-width="100%" />
</b:if>

Trong đó:
data-href: Địa chỉ trang web đặt comment
data-numposts: Số comments được hiển thị, mặc định là 10
data-width: Chiều rộng ô comment (pixels)
Lưu ý
Ta cũng có thể lấy code facebook comment theo cách mới cung cấp bằng cách truy cập:
https://developers.facebook.com/docs/plugins/comments
Bạn nhập URL blogspot của bạn và bấm nút Get Code

Facebook sẽ cung cấp cho ta 2 đoạn code như hình

- Code trong phần Step 2 bạn dán trước </body>
- Code trong phần Step 3(Bước 3) bạn dán ngay sau thẻ <b:include data='post' name='post'/> (hoặc nơi bạn muốn)
Và nhớ để nó trong thẻ điều kiện

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Nội dung đoạn code.
</b:if>

Thay đoạn 

data-href="Url blog của bạn"

Thành

expr:data-href="data:post.canonicalUrl"

Nhận xét tại từng bài viết cụ thể.
Và làm theo hướng dẫn để bật chế độ công khai (Bạn có thể bật Chế độ công khai trong Bảng điều khiển ứng dụng.)
Bạn click :Xét duyệt ứng dụng

Bước 3. Quản lý các Facebook Comments
Truy cập: https://developers.facebook.com/tools/comments
Đây là nơi bạn quản lý các comment trên Blogspot. Bạn có thể ẩn comment, block user,...
Public: liệt kê các bình luận được hiển thị trên blogspot
Hidden: các bình luận đã bị ẩn khỏi trang web (bạn của người bình luận vẫn thấy).

Khi ai đó bình luận trên blogspot, bạn sẽ nhận được thông báo trên trang Facebook cá nhân của mình.
Sau đó bạn quay trở lại trang web, kéo xuống phần comment. Nếu thấy xuất hiện tab Moderator view là bạn đã có thể quản lý các comment facebook trên blogspot của mình.
Bật tính năng post ảnh đính kèm tại comments facebook của blogspot
Để tích hợp tính năng đính kèm photo(có icon máy ảnh tại góc khung comments) chỉ có với comments có quản lý.

Bạn vào phần quản lý My apps của mình rồi nhấp vào phần cài đặt(setting) và check vào có đính kèm photo rồi lưu lại.

Với những blogspot đã responsive thì nhớ thêm cái này:

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

Chúc các bạn cài đặt thành công.

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait