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
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 )
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 : '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>
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: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 == "item"'>
<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
9 comments
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.
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]
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» 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>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&
Convert
'
Convert
"
Convert
<
Convert
>