Thêm tab comment Facebook và Google Plus

Như các bạn cũng biết, Facebook là website với lượng truy cập lớn nhất thế giới với hàng tỉ hành viên, vì vậy Chúng ta cần có comment Facebook cho lượng khách này, tuy nhiên chúng ta cũng không thể bỏ rơi người dùng G+ và cả các Blogger được. Do đó tạo các tab comment là hợp lí nhất, vừa đẹp mắt, vừa tiết kiệm diện tích lại tranh thủ được được lượng người dùng Facebook và Google - Quá tiện lợi. Bây giờ chúng ta cùng tìm cách tạo nó.

Xem demo ngay trên blog này

#Tạo app trên Facebook

Hãy tham khảo bài Cập nhật cách tạo apps trên Facebook 2014 và nhớ lấy id của nó nhé!!!

#Thêm các tab comment

1.Tìm đoạn  code dưới

<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>

LƯU Ý: Nếu thực hiện với code trên mà không thấy tab comment hiển thị thì tìm đoạn này:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>

2.Chèn code dưới vào dưới code tìm được

<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'>

Đoạn màu đỏ là G+ comment, màu xanh là Facebook comment. Không thích loại comment nào thì xóa
3.Kéo chuột xuống và tìm thẻ đóng </b:includable> gần nhất(nó cũng bị đánh dấu đỏ) rồi thêm trước nó thẻ </div>

#Thêm css

Tìm thẻ ]]></b:skin> rồi chèn code dưới vào trên(trước) nó

#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 Scrip

<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'/>

Nhớ thay id app Facebook của bạn vào đoạn màu xanh, nếu blog của bạn đã có Jquery 1.7.1 hay phiên bản mới hơn thì hãy xóa đoạn scrip trên đi.
Trong quá trình thực hiện mà gặp bất cú khó khăn gì xin bình luận phía dưới, mình sẽ nhiệt tình giúp đỡ.

Nguồn Vnblogger