Thêm comments facebook song song với comments blogger

Tác giả:Unknown on Thứ Bảy, 1 tháng 6, 2013 | 13:34

cách thêm comments facebook song song với comments blogger vào blog giống blog của mình.

Demo xem tại blog

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 các hình :

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.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://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>

FACEBOOK APP ID bạn thay bằng 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.

Bước 5: Tìm ]]></b:skin> và dán trước nó code bên dưới

.comments-page { background-color: #f2f2f2; width:500px;}

#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 đọan code sau bên dưới đọan code bạn đã tìm thấy đầu tiên ở bước 6.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>

<img class='comments-tab-icon' src='https://lh3.googleusercontent.com/-JKnnPrkXJv8/UR-IRJM77uI/AAAAAAAAAlU/1Yg5mP00PyM/h120/cmbg%5B1%5D.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://lh3.googleusercontent.com/-JKnnPrkXJv8/UR-IRJM77uI/AAAAAAAAAlU/1Yg5mP00PyM/h120/cmbg%5B1%5D.png'/> <data:post.numComments/> Comments

</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='500'/>

</b:if>

</div>