Como Usar os Comentários do Google + e Blogger Juntos

Coloque juntos comentários do Blogger e Google + para que seus visitantes escolham.

O Google disponibilizou recentemente a opção de colocar os comentários do Google + no Blogger e isso pôde ajudar e muito a integração entre a rede social e o seu blog. Mas infelizmente como nem tudo é perfeito caso optássemos por colocar essa opção, ficaríamos sem o tradicional sistema de comentários do Blogger que tem lá suas vantagens.

Mais esse problema é passado, pois, nesse momento apresentamos mais um ótima opção para Blogger. Você já pode instalar o sistema de comentários do Google + juntamente com o tradicional do Blogger sem conflitos e sem demora. O sistema é feito em Javascript e Css e não alterará em nada o carregamento de suas páginas e também você não perderá nenhum comentário feito em seu blog.

Esse método não modificará a posição do sistema de comentários que permanecerá no mesmo local, restando aos visitantes clicarem no ícone de um ou de outro para alternarem entre os dois sistemas como mostrado na imagem abaixo.

 Observação: O sistema só funcionará se seu blog já tiver comentários nas postagens.

Ficou curioso para vê-lo funcionando em seu blog? Veja a seguir no passo a passo como fazer:

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

TUTORIAL

1- Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

2- Clique no código de seu template, pressione "CTRL+F" e pesquise por:

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

3- Substitua todo o código como mostrado na imagem pelo seguinte código:

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

4- Pesquise agora por:

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

5- Como mostrado anteriormente, substitua todo o código pelo seguinte código:

 <b:includable id='threaded_comments' var='post'>
<div id='com-header'>
    <img class='com-on' id='com-norm' src='https://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png' title='Visualizar comentários do Blogger'/><h6>&#8592; Blogger OU Google+ &#8594;</h6> <image id='com-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='Visualizar comentários do Google +'/><div id='copyrigtsbgcomment'><a href='http://www.prodeveloper.com.br/2013/07/como-usar-os-comentarios-do-google-e.html' >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 src='http://bloggeryard.com/PersonalStuff/bgcomment.js'/>
<link href='http://bloggeryard.com/StyleSheet/bgcomment.css' rel='stylesheet' type='text/css' />
</div>
</b:includable>

6- Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

7- Vá em alguma de suas postagens e veja o resultado.

Gostou? Comente. O seu comentário é a motivação para nosso trabalho.