Hôm nay mình sẽ hướng dẫn cho các bạn tạo comment facebook song song với blogger, giúp blogger của bạn trở nên pro hơn.
Các bạn hãy lần lượt làm theo các bước sau:
A: Tạo app trên facebook và lấy Application ID
Trước hết bạn hãy vào địa chỉ này và làm theo hướng dẫn của mình dưới đây.
nhập vào tên app Name muốn hiển thị.
Nhập vô mã captcha hiển thị rồi continue
Nhập Đầy đủ thông tin như hình vẽ rồi Next.
B: Chèn Comments Facebook Vào Blogger.
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='https://lh5.googleusercontent.com/-VhSoDeyE39s/AAAAAAAAAAI/AAAAAAAAAAA/WD8BnuTTPLc/s96-c/photo.jpg' property='og:image'/>
<meta content='750771148285429' 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>
Thay đổi Link ảnh Logo của blog màu đỏ thay bằng link ảnh của bạn có kích cỡ 30 x 30px
FACEBOOK APP ID 750771148285429 bằng địa chỉ ID đã tạo ở những bước trên
Bước 4: Tìm thẻ <html và thay bằng đoạn bên dưới
<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é
Bước 5: Tìm ]]></b:skin> và dán trước nó code bên dưới
.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
Đây là bài hướng dẫn cơ bản thôi, bạn hãy dựa theo bài viết của mình mà sáng tạo cho phù hợp với blog của mình.
Chúc các bạn thành công!
Không có nhận xét nào:
Đăng nhận xét