Bài viết hôm nay mình giới thiệu các bạn 1 tiện ích cho Website, blogger đó là chức năng bình luận bài viết sử dụng comments của Facebook. Cách làm này mình tình cờ khi vào Alexa để theo dõi thống kê của Blog mình.
Dạng comments của facebook cho Web, blog, blogger có dạng như sau:
 |
| Comments facebook cho Website, blog |
Để sử dụng các bạn làm theo các bước sau:
- Truy cập tới trang: http://developers.facebook.com/docs/reference/plugins/comments/ và làm ghi thông tin vào các mục nhập dưới đây:
 |
| Chức năng comments facebook cho Web, blog |
- URL to comment on: ghi địa chỉ Web, blog của bạn.
- Number of posts: Số comments hiển thị.
- Width: Độ rộng của khung comments.
- Color Scheme: Màu nền comments.
Sau khi đã ghi thông tin thì các bạn bấm "Get Code" để lấy Code và chèn vào theo hướng dẫn của Developer (đơn giản nhé)
HƯỚNG DẪN SỬ DỤNG COMMENT FACEBOOK CHO BLOGSPOT
Hướng dẫn 1: Chỉ có lựa chọn Comment Facebook cho blog của bạn
DEMO
Bước 1: Tắt chức năng bình luận sẵn có của blogger
Lựa chọn lần lượt theo 4 chỉ dẫn như hình dưới
Bước 2: Vào phần Mẫu (Template) -> chỉnh sửa HTML (Edit HTML) -> nhấp chọn Mở rộng tiện ích mẫu. => Chèn đoạn code bên dưới vào 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="5" data-width="600"></div>';
//]]>
</script>
Trong đó:
data-href: là link của trang comment.
data-num-posts: Số comment hiển thị
data-width: Chiều rộng của comment
Bước 3: Chèn đoạn code sau dưới 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 4: Tìm đoạn Code bên dưới:
<b:include data='post' name='post'/>
Chèn đoạn code này ngay dưới đoạn vừa tìm được
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>
Bước 5: Lưu mẫu (Save Template) và xem kết quả :)
Hướng dẫn 2: Mặc định là Form comment của Blogspot, nếu muốn comment = Facebook thì click chuyển Form.
Bước 1: Tạo 1 App trên FB tại https://developers.facebook.com/apps/?action=create
- Trong trường hợp tài khoản chưa được xác minh thì hãy xác minh, FB yêu cầu xác minh qua Mobile hoặc Credit Card.
Mình gặp trục trặc là ở bước này mình bấm yêu cầu gửi Code xác minh qua điện thoại (mạng viettel) mà chờ ko thấy gửi, soạn tin nhắn F gửi 9224 là có Code ngay. ^^
- Xác nhận thành công, các bạn bắt đầu với Deverlop
Ở bước tiếp theo các bạn chú ý tới phần mũi tên mình chỉ xuống. đó là App ID để lát nữa mình dùng trong code. Các bạn điền theo mẫu hình dưới đây:
 |
| LƯU LẠI |
Bước 2: Tiến hành chỉnh sửa Template
1: Dán code bên dưới sau thẻ <head>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Link anh' property='og:image'/>
<meta content='App ID' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
Link anh: là ảnh hiển thị của bạn. Tốt nhất chọn ảnh có kích thước 30x30px
App ID: là số ID của App ở trên mình đã lưu ý, chỗ hình mũi tên chỉ vào.
2: Tìm <html
Và thay thế bằng
<html xmlns:fb='http://www.facebook.com/2008/fbml' 3: Dán đoạn code dưới đây ngay trên ]]></b:skin>
.comments-page {
background-color: #f2f2f2;
width:520px
}
#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
}
4: Tìm đoạn
<div class='comments' id='comments'> Và dán code dưới đây ngay sau nó
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRM7O-5r0sMFID96B9_iHokv9sNZZcj_ExKcY3UuMrai33rpaYLF4VgBaXaFDMW-t5AT7dsGXMkBbc1z2DebwEFhqnrorOLDOHWdFY4hfvT9_RJjo2s3BJK3z5wJaW9y44B1xF_6NOOIA/s1600/Facebook-icon-namkna-blogspot-com.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX3bx67GEguWMp-9XasvU92wUr_Qu8weADKknFlM-B7aG4AMRUHnC74WE46EhskkX1ArDwlRzoiRW3TqU51cd3rCLpK71FEVGrkv_EmU-RJxMRBT1j2z2ag_p9l2U0h30e_W__Kl1EOdQ/s1600/blogger-icon_namkna-blogspot-com.png'/> <data:post.numComments/> Comments
</div>
<div class='clear'/>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='520'/>
</b:if>
</div>
5: Lưu mẫu (Save Template) và xem kết quả :)
Chúc các bạn thành công !
0 nhận xét:
Post a Comment