Add Facebook Comments to Blogger

Facebook đã trở thành phần không thể thiếu trong cuộc sống. Hầu như bất cứ ai tiếp cận Internet đều sở hữu ít nhất 1 tài khoản Facebook. Cho nên các Website hay Blog nếu có các tính năng tương tác với Facebook thì sẽ giúp người đọc theo dõi trang Web của mình tốt hơn.

Mặc định trong Blogspot đã có hệ thống comment ko cần đăng nhập hoặc phải đăng nhập với tài khoản Google thì mới viết comment được. Còn nếu muốn sử dụng Comment của Facebook thì bạn cần thao tác qua 2 phần chính: Tạo Application trong Facebook Developers và chỉnh sửa trong Template của Blog.

Đã có rất nhiều Hướng dẫn trên mạng về cách cài đặt Facebook Comments nhưng phần lớn đều sơ sài hoặc chính bản thân người cài đặt hay bị sai ở bước đăng ký Application trong Facebook Developers. Vì vậy mình sẽ hướng dẫn chi tiết, các bạn làm theo từng bước sẽ thành công 100%.

Phần 1: Đăng ký Application trong Facebook Developers

1.1 Truy cập tại địa chỉ: https://developers.facebook.com
Truy cập Apps >>> Create a New App

Sau đó Facebook sẽ yêu cầu bạn xác minh bằng số điện thoại,bạn cần nhập số của mình vào và chờ Facebook gửi mã xác minh tài khoản.

1.2 Sau khi xác minh tài khoản thành công, sẽ chuyển sang bước 2, bạn chọn Website như trong hình

1.3 Chọn tiếp Skip Quickstart

1.4 Nhập tên ứng dụng và chọn Category là Apps for Pages, xong Creat App

1.5 Sau khi hoàn thành, bạn sẽ vào trang chủ của Ứng dụng, việc đầu tiên là cần Copy ngay App Id của ứng dụng và lưu lại.

1.7 Click Add Platform ở dưới để add trang Web của mình vào

1.8 Nhập đường dẫn Website mình vào

Sau khi add xong Web của mình vào là bạn đã hoàn thành việc tạo Application trong Facebook Developers.

Phần 2: Chỉnh sửa trong Template để hiển thị trong mỗi bài viết trên Blog

Chú ý: trước khi chỉnh sửa trong phần HTML các bạn cần backup trước Template đang dùng để tránh bị lỗi.

Hướng dẫn:

2.1: Truy cập vào quản lý Blogger, click Mẫu rồi click tiếp Chỉnh sửa HTML

2.2: Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ <html ( thông thường nó nằm ngay đầu trang

Nó sẽ có dạng như sau:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

Bạn thêm vào bên trong đoạn code sau (thêm vào sau thẻ html):

xmlns:og='http://ogp.me/ns#'

Thêm xong, nó sẽ có dạng như sau:

<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

2.3 Tìm trong HTML thẻ <body> và add đoạn code dưới đây vào dưới thẻ body

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
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>

Thay 'YOUR_APP_ID' bằng App ID mà bạn đã đăng kí ở trên

2.4 Tìm tiếp thẻ </head>

Copy và dán vào phía trên thẻ </head> đoạn mã sau:

<meta property="fb:app_id" content="YOUR_APP_ID" />

Thay 'YOUR_APP_ID' bằng App ID mà bạn đã đăng kí ở trên

2.5 Tìm tiếp đoạn code sau <b:includable id='comment-form' var='post'> và add đoạn code dưới đây vào trên thẻ vừa tìm

<b:if
cond='data:blog.pageType == "item"'>
<div
style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'>
<script
src='http://connect.facebook.net/en_US/all.js#xfbml=1'
/>
<div>
<fb:comments
colorscheme='light'
expr:href='data:post.url'
expr:title='data:post.title'
expr:xid='data:post.id'
width='550'
/>
</div>
</div></b:if>

Nếu muốn thay nền Facebook Comment bằng nền đen, thì đổi giá trị light thành dark
Nếu không tìm được đoạn code <b:includable id='comment-form' var='post'> thì tìm đoạn code khác như sau