Sử dụng comments Facebook (FB) cho Website - blog - blogger

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:
Chức năng comments facebook cho Web, blog
Trong đó:
- 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
comment facebook cho blogger, comment facebook blogspot

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
a. Điền tên vào bảng Popup, giá trị Vaild cho thấy tên ứng dụng được dùng
comment cho blogger, huong dan tao comment cho blogspot

- 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.
comment cho blogger, huong dan tao comment cho blogspot

 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
comment cho blogger, huong dan tao comment cho blogspot
Tiếp theo các bạn lựa chọn ứng dụng và chọn Edit setting như hình dưới đây
comment cho blogger, huong dan tao comment cho blogspot

Ở 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:
comment cho blogger, huong dan tao comment cho blogspot
LƯU LẠI
-----------Xong bước đăng ký App FB, tiếp theo chúng ta tiến hành chỉnh sửa Template

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='http://1.bp.blogspot.com/-BE327jzCoYc/UMCPfzpWc1I/AAAAAAAADrU/NHlT11ds0y4/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='http://3.bp.blogspot.com/-mUxmyvhpkig/UMCOgRhg8aI/AAAAAAAADrM/M8fWesXcsXk/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 !
Chuyên mục: , , ,

4 comments:

  1. Thank! Qua Blog t xem thế nào nhé http://them1phut.blogspot.com
    Ơ bạn sợ auto spam sao mà đặt mã capcha...Thế này t lười comment lắm

    ReplyDelete
  2. Hi. Minh tắt đi rồi. Thanks bạn đã ghé.
    Cần thủ thuật gì thì góp ý với mình nhé.

    ReplyDelete
  3. Bạn có biết cách xem thống kê commnet không? Vì mình có nhiều bài viết mà không thấy phần quản lý commnet mới ở đâu

    ReplyDelete
    Replies
    1. Ko bạn ah, Mình sử dụng thì thấy nó có bộ xem cũ hơn thôi, Còn cách số 2 comment của FB thì mình chưa test về số lượng comment

      Delete