đã có rất nhiều blogger hướng dẫn tích hợp commnet facebook và google, hôm nay Blogger PhucNguyenIT 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. Bạn xem demo ở blog của mình tại đây để hiểu rõ hơn




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 đây

Bước 2: Tìm thẻ <html và thay bằng đoạn bên dưới
Thêm đoạn code sau vào trước thẻ </head> trong template










806544872708655 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
Tìm thẻ sau trong template
Code:
]]></b:skin>
Dán css bên dưới phía trên thẻ vừa tìm được
Code:
#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)
[QUOTE]<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>[/QUOTE]​

Bước 2: Dán ngay dưới nó đoạn code sau
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='https://googledrive.com/host/0Bz_65BAr9KCZTnQwV04xMF84OWc'/><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='https://googledrive.com/host/0Bz_65BAr9KCZLTI4OG82QUtkc2s'/>
                    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='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 == &quot;item&quot;'>
      <div id='google_comments'/>
          <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'>

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!

nguồn bài viết : http://www.phucnguyenit.name.vn/2014/08/huong-dan-tich-hop-3-commnet-song-song-cho-blogspot.html

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công