Đã có rất nhiều bài viết hướng dẫn làm cách nào để thêm comment Facebook vào blogspot hoặc chạy song song cả hai hệ thống comment này. Và ở bài viết này mình sẽ hướng dẫn làm cách nào để sử dụng cả 3 hệ thống comment của blogger, G+ và Facebook trên blogspot
Tạo app trên facebook và lấy Application ID
Bước 1: Xem hướng dẫn cách tạo app trên facebook và lấy Application ID tại đâyBước 2: Tìm thẻ <html và thay bằng đoạn bên dưới
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Thêm đoạn code sau vào trước thẻ </head> trong template
<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='Logo.png' property='og:image'/>
<meta content='199611023443344' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<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>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
199611023443344 Là ID của app trên Facebook
Xóa đoạn code màu tím đi nếu trong template bạn đã có jquery
CSS
Dán đoạn CSS sau trước thẻ ]]></b:skin>#blogger-comments-page{padding:0 5px}
#comments h4{text-indent:-999em;height:1px;background:#0186CB;margin-top:27px}
#fb-comments-page, #googplus-comments-page{display:none}
#googplus-comments-page {border-top: 1px solid #0186CB;margin-top: 27px;}
.comments-page{width:98%}
.comments-tab{float:left;padding:5px;margin-left:5px;margin-right:3px;cursor:pointer;background-color:#048F14;color:#fff}
.comments-tab-icon{height:14px;width:auto;margin-right:3px}
.comments-tab:hover{background-color:#rgb(35,117,44)}
.inactive-select-tab{background-color:#000}Thêm các tab comment của G+ và Facebook vào blog
Bước 1: Tìm đoạn code bên dưới trong template (Bạn chỉ việc tìm đoạn code được bôi màu đỏ sẽ ra)
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
Bước 2: Dán ngay dưới nó đoạn code sau
<div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'><img class='comments-tab-icon' src='https://googledrive.com/host/0Bz_65BAr9KCZTnQwV04xMF84OWc'/><data:post.numComments/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='googplus-comments' onclick='javascript:commentToggle("#googplus-comments");' title='Comments made with Google+'><img class='comments-tab-icon' src='https://googledrive.com/host/0Bz_65BAr9KCZLTI4OG82QUtkc2s'/>
G+ Comments
</div>
<div class='comments-tab inactive-select-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'><img class='comments-tab-icon' src='https://googledrive.com/host/0Bz_65BAr9KCZb3VFYjlVVG9mMEk'/>
<fb:comments-count expr:href='data:post.url'/>Comments
</div>
<div class='comments-page' id='googplus-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='google_comments'/>
<script>
gapi.comments.render('google_comments', {
href: window.location,
width: '680',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
</script>
</b:if>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div class='fbcm'>
<div id='fb-root'/>
<fb:comments colorscheme='dark' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='680'/>
</div>
</b:if>
</div>
<div class='comments-page' id='blogger-comments-page'>
Hai đoạn code màu xanh là phần comment của Google+ và hai đoạn code màu hồng là phần comment của Facebook. Không thích hiển thị của loại comment nào bạn có thể xóa đi
Bước 3: Tìm thẻ đóng </b:includable> gần nhất ở bên dưới và thêm trước nó thẻ </div> và lưu lại template
Nếu gặp vướng mắc trong quá trình thực hiện hãy comment bên dưới mình sẽ giải đáp. Chúc bạn thành công!
39 comments
Cái trang của mình ko biết cách nào để show cái comments của Blogger ra nhỉ.
Cái này phải thêm code vào phải ko A.Huy, nhìn cái comments của TrollvL mà mê, muốn tẩu về chi site mình quá :D
Comment blog của mình có như nào mình cũng đã chia sẻ hết rồi mà :cuoi
Vì mình tìm chưa thấy có nên mình mới viết :D
Vì người ta có thể comment Google Plus nhiều nơi trên site của mình ? Thì làm sao mình biết để quản lý nó cho hiệu quả ?
Site mình đang nói là : http://www.c10mt.com
<div class='comments' id='comments'>
Mình muốn trao đổi liên kết với bạn dc ko? blog mình www.cleodesktop.com
Chúc Sức Khỏe.
check www.cleodesktop.com
url:khanhquocbui.blogspot.com
ĐÂY LÀ MAIL CỦA MÌNH: taonlongthuongxotchua@gmail.com
Với lại. mình không biết cách đăng bài vào phần chuyên mục bạn giúp mình luôn nhé. đây là trang của mihf: http://chuaden.blogspot.com/.
Rất mong nhận đc sự diups đỡ của bạn. cám ơn hihi.
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&Convert
'Convert
"Convert
<Convert
>