Sử dụng song song nhận xét Blogger và Google Plus

Google đã tích hợp sẵn vào Blogger một tiện ích khá hay đó là khung nhật xét của Google Plus, nó giúp chúng ta có một khung nhận xét cả hai bên liên kết với nhau - từ bài đăng trên blog và bai đăng đó được tự động chia sẻ lên Google Plus - điều này khiến khách truy cập ở cả hai bên đều có thể nhận xét trên cùng một hệ thống nhận xét. Để kích hoạt tính năng này thì đơn giản bạn chỉ cần bật nó lên trong phần tùy chỉnh của Blogger, nhưng khoan vội làm việc đó.

Sau đi nảy ra ỷ tưởng sử dụng chung cả hai hệ thống nhận xét này, để làm gì vậy? Lý do để sử dụng tính năng hấp dẫn này mà khỏi vướng vào trường hợp khi thay đổi tiên miền đang sử dụng, những nhận xét ở Google Plus sẽ không hiện trên Blogger nữa, ngoài ra người dùng có thể thoải mái lựa chọn hệ thông nhận xét mà họ muốn.


Một thời gian tìm tòi trên mạng, mình đã tìm được một hướng dẫn của tác giả +David Kutcher về cách sử dụng song song hai nhận xét này Blogger và Google Plus trên blog của ông ấy Blogger xpertise, hôm nay xin được chia sẻ lại tai đây với mọi người muốn sử dụng.

Bạn có thể xem qua demo tại đây http://kslflatb.blogspot.com/2013/08/ornare-fusce-euismod-est-non-commodo.html một premium template sẽ bán trong thời gian sắp tới.

Sử dụng song song nhận xét của Blogger và Google Plus

Một lưu ý nhỏ trước khi bắt tay vào làm việc là không kích hoạt tính năng nhận xét của Google+ trên blog mà bạn muốn làm, nếu bạn đang bật thì nên tắt nó đi.

Ok, việc đầu tiên cần làm là backup lại template hiện tại

• Hướng dẫn sao lưu (backup) Blogger

phòng trường hợp bạn không muốn sử dụng nó nữa.

Bạn kiếm đến toàn đoạn mã có dạng sau - hơi dài nhé

<b:includable id='threaded_comments' var='post'>
...
</b:includable>

thay bằng đoạn mã sau đây

<b:includable id='threaded_comments' var='post'>
<div id='comment-header'>
  <img id='comments-norm' class='comment-on' src='https://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png' title='view Blogger comments' /><img src='http://lh4.googleusercontent.com/-TZUsaFaiAJM/UXVi6qJ1vjI/AAAAAAAAILk/GDdUhxz_51I/s50/bubbles.png' /><image id='comments-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='view Google+ comments' />
</div>
<div id='comment-zone'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
  <div id='gcontainer'><div id='gcomments'/></div>
<script src="http://apis.google.com/js/plusone.js"></script>
<script>
gapi.comments.render('gcomments', {
    href: window.location,
    width: '750',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
$('#comments-norm').click(function(){
 // switch to normal comments displaying
 $('#gcontainer').css('display','none');
 $('#comments').css('display','block');
 $('#comments-norm').addClass('comment-on');
 $('#comments-gplus').removeClass('comment-on');
 $('#comments-norm').attr('src','http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png');
 $('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png');
});
$('#comments-gplus').click(function(){
 // switch to google plus comments displaying
 $('#comments').css('display','none');
 $('#gcontainer').css('display','block');
 $('#comments-norm').removeClass('comment-on');
 $('#comments-gplus').addClass('comment-on');
 $('#comments-norm').attr('src','http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png');
 $('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');
});
$('#comments-norm').hover(
 // switch to normal comments displaying
 function(){
  if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png');}
 },  function(){
  if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png');}
 }
);
$('#comments-gplus').hover(
 // switch to gplus comments displaying
 function(){
  if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');}
 },  function(){
  if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png');}
 }
);
</script>
<style>
#comment-zone {
 position: relative;
}
#gcontainer {
 display: none;
}
#comments-norm, #comments-gplus {
 cursor:   pointer;
 padding:  0px 5px;
}
</style>
</div>
</b:includable>

Tiếp tục tìm kiếm đến đoạn mã dạng sau

<b:includable id='comment_picker' var='post'>
...
</b:includable>

và thay thế bằng đoạn này

<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
      <b:else/>
        <b:include data='post' name='threaded_comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

Nếu bạn chưa có bất kỳ mã nhúng jQuery nào trên blog, thì nó sẽ không hoạt động, nếu bạn nào không biết nó là gì thì chèn đoạn này lên trên thẻ </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Lưu lại template và kiểm tra lại.

Lời kết

Việc chúng ta đã làm ở trên là thay thế hàm INCLUDE mặc định của Blogger, dùng jQuery để sử dụng song song nhận xét của Blogger và Google+, tuy đoạn mã tương đối dài nhưng công việc để làm khá là đơn giản và từ nay khách truy cập trên blog của bạn có thể tùy ý lựa chọn hệ thống nhận xét mà họ muốn.

Nếu bạn cần một hệ thống nhận xét nhiều chức năng và an toàn hơn trong việc sử dụng, bạn có thể dùng thử qua Disqus

• Cách tích hợp Disqus vào Blogger

Bài viết của mình kết thúc tại đây thôi, nếu bạn nào có thắc mắc hoặc nhu cầu gì có thể thoải mái để lại nhận xét ở dưới.