Thứ Năm, 16 tháng 10, 2014


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 :
<html xmlns:fb='http://www.facebook.com/2008/fbml'
3. Tiếp tục dán code sau vào 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='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'/>
Trong đó :
  • 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).
4. Dán tiếp code này vào 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}
.fb_iframe_widget{background:#333;color:#fff}
Trong đó :


  • background:#333 là màu nền của phần comment facebook bạn có thể đổi lại thành màu khác (trong bài này mình để nền màu đen)
  • color:#fff là màu chữ của phần commnet facebook. Nếu bạn thay đổi màu nền thì hãy thay đổi cả phần này cho thích hợp với blog của bạn nha.
  • background-color:#000 là màu nền của các tab. Phần mà khi bạn bấm để chuyển qua lại giữa các tab .
  • 5. Tìm đoạn code sau :
    <b:includable id='threaded_comments' var='post'>
    <div class='comments' id='comments'>
    Và thêm vào sau nó đoạn code :
    <div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://1.bp.blogspot.com/-kWJNusoCMrY/UmFj2SvSviI/AAAAAAAAL3A/TYFuh_symU4/s1600/icon-blogger-namkna.png'/><data:post.numComments/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='googplus-comments' onclick='javascript:commentToggle(&quot;#googplus-comments&quot;);' title='Comments made with Google+'><img class='comments-tab-icon' src='http://3.bp.blogspot.com/-PNOKhttBWcI/UmFjlkpQ5kI/AAAAAAAAL24/GSt-90XQyE4/s1600/google+++namkna.png'/> G+ Comments</div><div class='comments-tab inactive-select-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://2.bp.blogspot.com/-6VCYhvZAYYQ/UmFjVg3hgpI/AAAAAAAAL2w/QZVHMtQ7CQw/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 == &quot;item&quot;'> <div id='google_comments'/><script src="http://apis.google.com/js/plusone.js"></script> <script> gapi.comments.render(&#39;google_comments&#39;, { href: window.location, width: &#39;680&#39;, first_party_property: &#39;BLOGGER&#39;, view_type: &#39;FILTERED_POSTMOD&#39; }); </script> </b:if></div><div class='comments-page' id='fb-comments-page'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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'> 
    Trong đó :
    • 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.
    6.Tìm thẻ đóng </b:includable> tương ứng nằm ngay bên dưới của thẻ mở mà mình nói đến ở bước 5 và thêm vào trước thẻ </b:includable> đó thẻ </div>
    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 !

    0 nhận xét:

    Đăng nhận xét