Tích hợp comment facebook và google vào blogspot
Hướng dẫn tích hợp coment facebook và google vào blogspot, cách chỉnh sửa và quản lý comment cho blogspot.
1. Đầu tiên các bạn phải tạo một app facebook và lấy app ID.2. Vào mẫu template => chỉnh sửa html, tìm thẻ <html, thẻ này thông thường là nằm hàng thứ ba từ trên xướng. Và thêm đoạn code này vào sau nó. Thì ta đc cả hai như code sau :
3. Tiếp tục dán code sau vào sau thẻ <head><html xmlns:fb='http://www.facebook.com/2008/fbml'
<meta expr:content='data:blog.pageTitle' property='og:title'/>Trong đó :
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Logo.png' property='og:image'/><meta content='App ID' 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'/>
- Thay Logo.png thành link ảnh của bạn. Tốt nhất hãy sử dụng ảnh có kích thước 30 x 30px. Nếu bạn không muốn có một biểu tượng hiển thị trên tường mỗi khi có một ai đó đăng nhận xét trong blog của bạn thì hãy xóa đoạn code màu xanh đi.
- Thay App ID thành App ID đã tạo ở bước 1.
- Nếu blog của bạn đã có file jquery-min.js rồi thì xóa phần màu vàng (Để biết blog có file đó hay chưa hãy bấm CTrl + F và đánh tên file vào).
#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}
.fb_iframe_widget{background:#333;color:#fff}<b:includable id='threaded_comments' var='post'>Và thêm vào sau nó đoạn code :
<div class='comments' id='comments'>
<div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'><img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNK_C42ffGrzhbuUFywrNiWG0wOksLNocV1Wn22x4f6ijQOR2Dywc3uQqOZNJbmNY27xvYqDNKBUtDeM3aCKL-eLLZQOGavTYB_En7ydXyPNUxYvnSMEta-xZon0tvgoQ2J7SozUHX8dS_/s1600/icon-blogger-namkna.png'/><data:post.numComments/> CommentsTrong đó :
</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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXZO0rfBSS9KpKnnH9-3JrDL6R2Vu3OoyJsyXcRl8tcyCo8pzfCDUlhl-mkqk1ewdLEUwBaDHZXxW7E0YW1XGsHPx1dLmsLnwP9AwPZN1TgMIwmk7jP8V70n4bhELyB6YAUkUkJ3hXvks/s1600/google+++namkna.png'/> 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyjJT6jOZg_Ei784l2I0nRRJQ5mi-rRlCl0Qj_FYhzlpdE9nvqZn9V1db4aK9783I0nxVrknb_gCcxJw1dWGBCIpkUqW4A_hyphenhyphentefopJ93nF0-IoJcKX69Z9-4EGNdG6delgDJkLeprejs/s1600/facebook-namkna123.png'/> <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 src="http://apis.google.com/js/plusone.js"></script> <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'>
- Phần màu vàng là phần comment của google + nếu không thích thì bạn có thể xóa nó đi.
- Phần màu xanh là phần comment của facebook nếu không thích thì bạn có thể xóa nó đi.
7.Lưu mẫu của bạn lại và kiểm tra kết quả đã làm nha. Chúc các bạn thành công !
Comments
Post a Comment