THÊM COMMENTS FACEBOOK VÀO BLOGSPOT

Share
Thứ Bảy, 19 tháng 1, 2013
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
Tags: ,

Ý kiến bạn đọc [ 0 ]


Ý kiến của bạn