Hướng dẫn thêm khung comment facebook vào blogspot

GroupMMO tháng 11 03, 2017

SEO - Chào các bạn, trong blogspot có phần comment bằng tài khoản gmail và cũng có kiểu comment nặc danh. Tuy nhiên cả hai kiểu này có thể bạn không thích, vậy hôm nay hãy thử thêm khung comment facebook vào blogspot xem sao nhé.

Một số bài viết khác có thể bạn thích xem:

Hướng dẫn thêm khung comment facebook vào blogspot

Để thêm khung comment facebook vào blogspot vừa dễ lại vừa khó vì cần động chạm chút tới code. Tất nhiên là cứ làm theo hướng dẫn và copy paste paste thôi là ok nhưng nhiều bạn vẫn không làm được. Nguyên nhân thì có nhiều nhưng có nguyên nhân chính đó là facebook thường hay thay đổi và bạn thường chỉ thấy các hướng dẫn đã cũ, khi làm theo thì giao diện không giống, code cũng không giống nên làm sai tè le ^_^. Nói vậy để các bạn biết vậy, còn trên cơ bản các bước vẫn như thế thôi, chỉ cần mò mẫm tý là ok.

Ưu nhược điểm của việc thêm khung comment facebook vào blogspot:

Ưu điểm: ít bị spam, dễ quản lý comment.
Nhược điểm: load chậm, không hỗ trợ SEO, cần có đăng nhập facebook mới comment được.

Cả ưu và nhược điểm đều khá rõ ràng, nói chung là các bạn tự xem lựa chọn có nên thêm khung comment facebook vào blogspot của mình không nhé.

Hướng dẫn thêm khung comment facebook vào blogspot

Bước 1: Tạo App trong facebook

Vào link: https://developers.facebook.com/
Vào Ứng dụng của tôi --> thêm ứng dụng mới --> điền tên bất kỳ rồi tạo App ID

Sau khi tạo được App facebook mới sẽ hiện lên trang quản trị App đó,

thêm khung comment facebook vào blogspot

Vào Xét duyệt ứng dụng --> đặt app ở chế độ công khai
Vào Vai trò --> Set quyền quản trị cho mình
Vào lại Bảng điều khiển để lấy ID app (ID ứng dụng ấy)
Vào trang http://lookup-id.com/ này và điền facebook quản trị vào để lấy ID cá nhân
Chú ý: Phiên bản API khi mình viết hướng dẫn này là v 2.10. Nếu các bạn thấy Phiên bản API trong bảng điều khiển là phiên bản khác thì chưa chắc hướng dẫn này đã đúng (thay đổi phiên bản mà)

Bước 2: Chèn code vào blogspot để thêm comment facebook

Đăng nhập Blogger -> Chủ đề --> Chỉnh sửa HTML
Thêm 4 thẻ meta vào sau thẻ <head>

<meta content='ID app của bạn' property='fb:app_id'/>
<meta content='ID facebook cá nhân của bạn' property='fb:admins'/>
<meta content='//www.facebook.com/ID app của bạn/' property='article:publisher'/>
<meta content='//www.facebook.com/ID facebook cá nhân của bạn/' property='article:author'/>

Thêm script sau vào trước thẻ đóng </body>

<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'ID app của bạn',
xfbml : true,
version : 'v2.10'
});
FB.AppEvents.logPageView();
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<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.async=true;
js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.10&appId=App ID của bạn';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Thêm khung comment
Tìm <b:include data='post' name='post'/>
Thêm code sau vào sau thẻ <b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "item"'>
<hr/>
<h3 style='margin-top: 15px;color:black;'>Bình luận cho bài viết này:</h3>
<div class='fb-comments' data-num-posts='5' data-width='100%' expr:href='data:post.canonicalUrl'/>
</b:if>

Giờ vào bài viết và test thử đi nhé!

Tổng kết:

Để thêm khung comment facebook vào blogspot trước tiên ta tạo một app trong facebook, app này sẽ dùng để quản lý comment, khi có comment mới nó sẽ báo ngay về face cá nhân. Sau khi đã có một app chúng ta sẽ vào phần tiện ích của facebook để lấy code comment (đoạn này mình bỏ qua vì code nào cũng gần giống nhau thôi).
Chèn code từ facebook vào blogspot có 3 bước, chèn thẻ <meta>, chèn JavScript, chèn lệnh hiển thị. Các bạn hãy chèn đúng chỗ muốn hiển thị theo hướng dẫn là ok nhé. Nhớ thay các chỗ chữ màu đỏ thành thông tin appID và ID cá nhân của bạn.
Chúc mọi người may mắn và thành công.