Thêm Comments Facebook Vào Blogspot

Bài viết này sẽ hướng dẫn bạn cách thêm comments facebook vào blog thay cho comments mặc định của blogspot. Ưu điểm lớn nhất của thủ thuật này sẽ giúp blog bạn được nhiều người biết đến hơn thông qua mạng xã hội Facebook :>)
Demo tại blog này

A. Tạo app trên facebook và lấy Application ID
Trước hết bạn phải đăng ký một apps trên Facebook tại Developers.facebook.com và làm theo hình
B.  Thêm Comments Facebook Vào Blog
Trước khi thêm Comments Facebook vào blog bạn phải ẩn comments mặc định của Facebook đi theo hình ảnh hướng dẫn bên dưới. Tuy nhiên mình sẽ có bài hướng dẫn để song song cả hai thể loại comments cùng 1 lúc
Bước 1 : Vào Blogger > Mẫu > Chỉnh sửa HTML ( Nhớ lưu lại template trước khi thực hiện đề phòng thất bại thảm hại nha :-d)
Bước 2 : Chọn Mở rộng Mẫu Tiện Ích
Bước 3 : Tìm <html và thay thế nó bằng code sau (Nếu trong template có xmlns:fb='http://www.facebook.com/2008/fbml' rồi thì bỏ qua bước này)
<html xmlns:fb='http://www.facebook.com/2008/fbml'
 Bước 4 : Tìm thẻ <body> và dán sau nó code bên dưới

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId  : &#39;APP ID&#39;,
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(&#39;script&#39;);
e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>

Bước 5 : Tìm thẻ </head> và dán trước nó đoạn code sau
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Troll VL' property='og:site_name'/>
<meta content='Logo blog của bạn' property='og:image'/>
<meta content='APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/huycovip' property='fb:admins'/>
<meta content='article' property='og:type'/>
  • Thay những phần in đậm bằng các thông số của bạn
Bước 6 : Tìm thẻ
<b:include data='post' name='post'/>
Bước 7 : Dán sau đoạn code vừa tìm được code bên dưới
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 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='520'/></div></div>
</b:if> 
  • Bạn có thể light thay bằng Dark
  • 520 là chiều rộng khung comments bạn sửa lại sao cho hợp lý với blog của mình 
Bước 8 : Lưu lại template và vào thử một bài viết xem thành quả của mình nào :-d
9 Comments
Comments

9 comments

27/11/12
không làm được anh ơi. trong tem của em không có <b:includable id='comment-form' var='pos dòng này
27/11/12
Thay vì tìm thẻ <b:includable id='comment-form' var='pos bạn hãy tìm thẻ <b:include data='post' name='post'/> nhé. Nhưng nhớ phải Mở rộng mẫu Tiện Ích trước khi tìm code trên nhé
Mình vừa mới update :-d vì nếu chèn trước cái code cũ khi ẩn comments mặc định của blog đi sẽ ẩn luôn cả comments của Facebook.
27/11/12
Cái này có thể dùng song song 2 cái. face và google dc k anh
27/11/12
em thử lại rồi vẫn k dc anh ơi, bó tay :-?
28/11/12
Có thể mà, blog mình hiện tại vẫn sử dụng song song 2 loại comments này mà
28/11/12
Lưu template về máy tính xong send file qua email huycovip.volam@gmail.com cho mình xem thế nào rồi mình sẽ có hướng dẫn cụ thể đối với template của bạn nhé :) :)
28/11/12
Cách tải template về máy
Bước 1:Vào Blogger > Mẫu
Bước 2:Làm theo hình dưới :d
[im]https://lh6.googleusercontent.com/-Y_VmyrPZdmA/ULVuOn_S6qI/AAAAAAAAF4Y/8C0HKIYGo_U/w745-h382-p-k/luutemplate.png[/im]
Thu thuat hay lam
đang cần cái này cho blog của mình

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->