humghn.com
Trong blogspot , việc comment của người xem nhiều khi đóng vai trò hết sức quan trọng . Các comment có thể là cầu nối trực tiếp giữa những người xem online , hoặc cũng có thể là cầu nối giữa người xem và web master . Đôi khi , nội dung bài viết các bạn chỉ đọc qua một lượt nhưng comment các bạn lại đọc rất kĩ . Đơn giản vì nhiều comment mang tính xây dựng , đánh giá rất tốt , một vài comment lại mang tính hài hướng , hóm hỉnh khiến nhiều người xem khác bị lôi cuấn va thu hút thêm , từ đó dẫn đến lượt traffic ngày càng tăng và các chia sẻ mạng xã hội diễn ra nhiều hơn .
Nhận thấy được tầm quan trọng của các khung comment trên web/blog , hôm nay , chuyên mục xin giới thiệu tới các ban cách thêm khung comment facebook vào blogspot .
DEMO các bạn xem ngay dưới bài viết này ( Khung facebook comment các bạn làm sẽ giống với khung facebook comment mà mình đang sử dụng ) .
A - Tạo tài khoản sử dụng App trên Facebook
Bước 1 : Bạn đăng nhập vào hệ thống phát triển App trên facebook theo đường dẫn https://developers.facebook.com/apps
Bước 2 : Sau khi đăng nhập , nếu tài khoản đã được xác nhận bằng điện thoại thì bạn nhấp tiếp tục . Còn nếu chưa xác nhận được bẳng điện thoại thì bạn điền số điện thoại của bạn vào rồi facebook sẽ gửi mã xác nhận về máy cho bạn .
Bước 3 : Sau khi đã điền mã xác nhận ,bạn nhấp vào mục " Creat a New App " , hệ thống hiển thị như sau - và bạn chỉ việc điền các thông tin . Trong trường hợp thông tin bị trùng khớp ( hay trùng nhất là ở phần "Namepace " thì bạn thử bằng một tên khác và sau đó nhấp " Tạo ứng dụng "
Bước 7 : Quay trở lại màn hình đăng nhập blogspot , bạn chọn mục " cài đặt " , tiếp đến chọn " Bài đăng và nhận xét " và để chế độ nhận xét là " Nhúng " như hình bên dưới
Bước 8 : Chọn tiếp mục " Mẫu " và chọn " Chỉnh sửa HTML " . Bạn thêm đoạn code dưới đây vào sau thẻ <head>
<meta content='App ID' property='fb:app_id'/>
App ID : Bạn thay bằng đoạn mã ID bạn đã lấy ở bước 6
Bước 9 :
Tìm trong code của bạn xem đã có đoạn mã này chưa bằng cách bấm ctrl + F , sau đó tìm code :
xmlns:fb='http://www.facebook.com/2008/fbml
Nếu chưa có , bạn tìm đoạn mã có dạng <html trong code của bạn . Sau đó thay thế bằng đoạn code sau :
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Bước 10 : Dán đoạn mã dưới đây vào trước thẻ </body><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/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Bước 11 : Dán đoạn code sau lên trên 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="5" data-width="540"></div>';
//]]>
</script>
Bước 12 : Dán đoạn code dưới đây vào trước thẻ ]]></b:skin>
.comments-page {
background-color: #f2f2f2;
width:540px
}
#blogger-comments-page {
padding: 0px 5px;
display: none
}
.comments-tab {
float: left; padding: 5px;
margin-right: 3px;
cursor: pointer;
background-color: #f2f2f2
}
.comments-tab-icon {
height: 14px;
width: auto;
margin-right: 3px
}
.comments-tab:hover {
background-color: #eeeeee
}
.inactive-select-tab {
background-color: #d1d1d1
}
Trong đoạn code trên , phần bôi xanh lần lượt là thông số màu sắc và độ rộng của khung comment . bạn có thể thay đổi tùy ý thích của bạnBước 13 : Tìm đoạn code sau
<b:include data='post' name='post'/>
Thêm vào sau đoạn code đầu tiên đã tìm được như trên bằng đoạn code sau :
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>
Tùy chỉnh Trong các đoạn code trên , các bạn thấy có 2 mục có thông số 540px ; đó là thông số của chiều rộng ô comment . Nếu muốn thay đổi độ rộng đó , bạn chỉ việc thay đổi thông số 540px đó đi là ok
Chúc các bạn thành công !
