Thêm comments facebook song song với comments blogger
11/29/12
Theo yêu cầu của bạn Nguyễn Hải tại đây mình sẽ hướng dẫn bạn cách thêm comments facebook vào blog giống như Troll VL 
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. Chèn comments Facebook vào blogger
Trước khi tiến hành thủ thuật bạn phải lựa chọn chế độ nhúng cho comments mặc định của blogger
- Vào blogger > Cài đặt > Bài đăng và nhận xét
- Vị trí nhận xét bạn chọn Được Nhúng
Bây giờ chúng ta sẽ tiến hành thực hiện trong template
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chọn mở rộng mẫu Tiện Ích
Bước 3: 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 ảnh Logo của blog' property='og:image'/>
<meta content='FACEBOOK 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 ảnh Logo của blog bạn thay bằng link ảnh có kích cỡ 30 x 30px
- FACEBOOK APP ID bạn thay bằng ID đã tạo ở những bước trên
<html xmlns:fb='http://www.facebook.com/2008/fbml'
- Nếu tìm trong template có xmlns:fb='http://www.facebook.com/2008/fbml' rồi thì bỏ qua bước này nhé
.comments-page { background-color: #f2f2f2; width:450px;}
#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;}
- Thay đổi những phần tô đậm sao cho phù hợp với blog của bạn lần lượt là màu nền và độ rộng khung comments
Bước 6: Tìm code bên dưới
<div class='comments' id='comments'>
- Chèn code bên dưới sau tất cả những code bạn đã tìm được bên trê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://huyco-troll.googlecode.com/svn/trunk/icon/cmfb.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://huyco-troll.googlecode.com/svn/trunk/icon/cmbg.png'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<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='450'/>
</b:if>
</div>
- 450 là độ rộng của khung comments bằng facebook
- Khi bạn lưu lại template mà báo lỗi thì xóa đoạn code được bôi màu đỏ đi
Bước 7: Lưu lại template
Tin liên quan
XEM TRÊN MOBILE
No comments:
Post a Comment