Como usar os comentários do Blogger e Google+ ao mesmo tempo

Aprenda a usar os comentários do Google+ junto com os comentários do Blogger.
 

 

no artigo de hoje estarei ensinando a vocês um recurso muito bacana envolvendo a novidade lançada pela equipe do blogger, agora é possível usar o sistema de comentários do Google+ em seu blogger.

O recurso que estarei ensinando eu já estou usando aqui no Personalizar o Blogger, trata-se de usar os comentários do Blogger e do Google+ ao mesmo tempo no seu blog, dando a possibilidade de seu leitor escolher com qual sistema irá comentar, você pode vê-lo em funcionamento no final de qualquer artigo aqui do blog, o recurso é fácil de adicionar ao blog, mas preste bastante atenção, pois o tutorial contêm alguns detalhes, vamos lá.

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Vá em modelo → Fazer backup/Restaurar → Fazer download do modelo completo.

Em primeiro lugar acesse o painel do blogger, clique na guia Modelo, editar Html e procure pelo código <b:includable id='threaded_comments' var='post'> até a parte de fechamento </b:includable>, como no exemplo abaixo.
<b:includable id='threaded_comments' var='post'>
.
.
.
.
</b:includable>

Depois de encontrar o todo o código acima, substitua o completamente por todo o código abaixo. Cuidado para não excluir nada além do código indicado.

<b:includable id='threaded_comments' var='post'> <div id='com-header'> <h6>Comente com Blogger:</h6> <img class='com-on' id='com-norm' src='https://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png' title='Veja comentários blogger'/><h6>ou</h6> <image id='com-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='Veja comentários Google+'/><h6>Comente com Google+</h6> <div id='copyrigtsmbl'><a href='http://www.personalizaroblogger.com.br/2013/04/como-usar-os-comentarios-do-blogger-e-google-plus-ao-mesmo-tempo.html' id='mblrights'>Instale esse recurso</a></div> </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 type='text/javascript'> //<![CDATA[ gapi['comments']['render']('gcomments', { href: window['location'], width: '605', first_party_property: 'BLOGGER', view_type: 'FILTERED_POSTMOD' }); $('#com-norm')['click'](function () { $('#gcontainer')['css']('display', 'none'); $('#comments')['css']('display', 'block'); $('#com-norm')['addClass']('com-on'); $('#com-gplus')['removeClass']('com-on'); $('#com-norm')['attr']('src', 'http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png'); $('#com-gplus')['attr']('src', 'http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png'); }); $('#com-gplus')['click'](function () { $('#comments')['css']('display', 'none'); $('#gcontainer')['css']('display', 'block'); $('#com-norm')['removeClass']('com-on'); $('#com-gplus')['addClass']('com-on'); $('#com-norm')['attr']('src', 'http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png'); $('#com-gplus')['attr']('src', 'http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png'); }); $('#com-norm')['hover'](function () { if (!$('#com-norm')['hasClass']('com-on')) { $('#com-norm')['attr']('src', 'http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png'); }; }, function () { if (!$('#com-norm')['hasClass']('com-on')) { $('#com-norm')['attr']('src', 'http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png'); }; }); $('#com-gplus')['hover'](function () { if (!$('#com-gplus')['hasClass']('com-on')) { $('#com-gplus')['attr']('src', 'http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png'); }; }, function () { if (!$('#com-gplus')['hasClass']('com-on')) { $('#com-gplus')['attr']('src', 'http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png'); }; }); $('#mblrights')['html']('<a href="http://www.personalizaroblogger.com.br/2013/04/como-usar-os-comentarios-do-blogger-e-google-plus-ao-mesmo-tempo.html">Instale esse recurso</a>'); setInterval(function () { if (!$('#mblrights:visible')['length']) { window['location']['href'] = 'http://www.personalizaroblogger.com.br'; }; }, 3000); //]]> </script> <style> #gcontainer { display:none; } #com-norm,#com-gplus { cursor:pointer; padding:0 5px; float:left } #com-header { border: 1px solid #d2d2d2; padding: 10px; float: left; width: 610px; margin: 10px 10px; background: #f5f5f5; } #com-header h6{ font-size: 20px; text-transform: uppercase; font-weight: bold; float: left; padding-top: 15px; margin: 0px; margin-right: 7px; margin-left: 7px; } #copyrigtsmbl { float: right; margin-top: 20px; border-top: 1px solid #d2d2d2; margin-right: -10px; padding-right: 10px; padding-top: 5px; padding-left: 10px; border-left: 1px solid #d2d2d2; padding-bottom: 5px; margin-bottom: -10px; font-size:11px; background: #fff; } #copyrigtsmbl a { text-decoration:none; color:111!important; } </style> </div> </b:includable>

Ainda dentro do Html do seu blogger procure por <b:includable id='comment_picker' var='post'> até a parte do fechamento </b:includable>, como no exemplo abaixo.
<b:includable id='comment_picker' var='post'>
.
.
.
.
</b:includable>
Após encontrar o código acima, substitua todo ele pelo código abaixo.

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

Após seguir esses procedimentos, basta visualizar para ver se esta tudo ok e depois salve. Agora é só abrir algum de seus artigo para ver o sistema em funcionamento.


OBS: Para que os comentários do Blogger e do Google+  funcionem juntos, é necessário ter pelo menos um comentário pubicado, pode instalar sem problemas, mas o primeiro comentário obrigatoriamente será publicado pelo formulário do Blogger.