Como usar os Comentários do Facebook e Blogger juntos

Dê mais opções a seus visitantes com mais um sistema de comentários além do nativo do blogger.

Dois sistemas de comentários que tem determinadas particularidades podem ajudar a você expandir as necessidades de cada usuário em poder comentar em seu blog. Optar por um ou outro é o que muitas vezes acontece, mas nesse tutorial mostrarei como utilizar os comentários do Facebook e Blogger juntamente em seu blog.

* OBS: Recomendamos que em suas configurações de postagens e comentários opte por moderação de comentários e desabilite verificação de palavras.
* OBS: Nesse método mostrado aqui não é possível a moderação de comentários pelo Facebook.

Abaixo você pode conferir como ficará em seu blog.


Então ficou curioso para colocar em seu blog? Veja então no tutorial na sequência como proceder para instalá-lo e configurá-lo corretamente.

 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º Passo: Acesse seu Blogger, no menu lateral clique em "Modelo" e depois "Editar HTML".

2º Passo: Clique no código de seu template, pressione "CTRL+F" e pesquise pela tag <div class='comments' id='comments'>

* Você poderá encontrar dois trechos desse mesmo código, caso encontre dois repita o processo em ambos.

3º Passo: Logo ABAIXO da tag encontrada cole o código abaixo:
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678128-social-facebook-128.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='https://cdn1.iconfinder.com/data/icons/all_google_icons_symbols_by_carlosjj-du/128/blogger.png'/> <data:post.numComments/> Comentários
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
* Onde você vê destacado em VERMELHO, representa a largura, ajuste de acordo com seu blog.

4º Passo: Agora pesquise por <head>

5º Passo: Logo ABAIXO cole o seguinte código:
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<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>
6º Passo: Clique agora em "Salvar Modelo".

7º Passo: Pressione novamente "CTRL+F" e pesquise por ]]></b:skin>

8º Passo: Logo ACIMA cole o seguinte código:
.comments-page {  background-color: #f2f2f2;}
#blogger-comments-page {  padding: 0px 5px;  display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
9º Passo: Clique em "Salvar Modelo".

Pronto! Seu novo sistema de comentários já estará funcionando em seu blog.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.

Comentários

 
Copyright ©2015 Canal Do MatheusBR Todos os Direitos reservados | Designed by Sinistro de BTN