Thứ Tư, 12 tháng 10, 2011

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

Theo yêu cầu của bạn DINH VAN Tu mình sẽ hướng dẫn bạn cách thêm "comment facebook song song với comments blogger vào blog giống blog của mình.




Demo 

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
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>
Trong đó 500 là độ rộng của khung comments bằng facebook
 Chúc bạn thành công

Related Posts

Thêm comments facebook song song với comments blogger
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

12 nhận xét

Tulis nhận xét
avatar
lúc 07:50 8 tháng 2, 2013

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
cái này nằm ở đâu vậy sao mình tìm mãi mà ko thấy vậy bạn

Reply
avatar
lúc 05:30 16 tháng 2, 2013

Đã cập nhật lại(sơ xuất trong lúc viết bài). Bạn thực hiện lại nhé chúc thành công.

Reply
avatar
lúc 04:07 22 tháng 2, 2013

Thủ thuật này cũng đơn giản mà bạn.Chúc bạn áp dụng thành công!!

Reply
avatar
lúc 04:56 5 tháng 3, 2013

Thanks bạn đã tặng comment,chúc bạn áp dụng thành công

Reply
avatar
lúc 07:58 12 tháng 4, 2013

mình làm xong rồi, nhưng khi tag một người khác vào thì bên fb người đó không có thông báo là sao vậy bạn? ;((

Reply
avatar
lúc 08:20 12 tháng 4, 2013

Bạn có thể cài đặt trong phần Settings-->Public Comments-->Moderator View của tab facebook Cái này mình cũng ít nghịch tới :d

Reply
avatar
lúc 06:09 7 tháng 6, 2013

có thể thay cmt của blogger bằng cmt G+ ko bác Trực ơi!

Reply
avatar
lúc 07:41 24 tháng 2, 2014

sao mình viết số đt rồi mà thấy gửi text bạn chỉ giúp mình với

Reply
avatar
lúc 04:19 26 tháng 2, 2014

Để nhận đoạn mã xác nhận bạn cần nhập chính xác sđt của bạn(sdt mà bạn đăng ký fb) bỏ số 0 đầu đi nhé. Nếu làm một lần không được thì làm lại nhé . :D)

Reply
avatar
lúc 23:29 7 tháng 10, 2014

mình chèn vào được nhưng ở comment face nó vẫn hiện comment của bloger ở dưới

Reply