Adicione a caixa de comentários do Facebook no Blogger

Tenha a caixa de comentários do Facebook em seu blog e facilite os comentários dos leitores.

Um dos temas mais solicitados na Blogosfera é como colocar caixa de comentários Facebook no blog. E um dos principais motivos é que às vezes se torna mais fácil comentar a partir do Facebook, pois a maioria está conectado a esta rede social o tempo todo, e além disso não precisamos entrar com nossos dados do Google para comentar em um blog que contém esse tipo de opção.

Se você também quer ter esse complemento e facilitar os comentários para os leitores de seu blog, veja a seguir como é fácil de implementar.

 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

>> Para começarmos, acesse seu Blogger, vá em "Modelo" e "Editar HTML".

>> Clique no código de seu template, pressione "CTRL+F" e pesquise por <body>

ou caso não encontre procure por:

<body expr:class='"loading" + data:blog.mobileClass'>

>> Abaixo do trecho encontrado cole o seguinte código:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
>> Em seguida, pesquise por:
</b:includable><b:includable id='status-message'>
>> Logo ACIMA do trecho encontrado cole o seguinte código:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>
</b:if>
* Veja na imagem o local certo de colocar o código:


* Com esse processo a caixa de comentários do Facebook aparecerá acima do formulário de comentário padrão do Blogger. Caso desejar colocar abaixo, ao invés do trecho anterior faça o seguinte:

>> Pesquise pelo trecho de código seguinte:
</div><b:if cond='data:post.includeAd'>
>> Como no processo anterior, cole o código seguinte ACIMA do trecho encontrado:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>
</b:if>
Dentro do código que adicionamos, teremos estes parâmetros. Altere para combinar com seu blog.

data-num-posts='5'  ( Número de comentários a serem exibidos )
data-width='500'      ( Largura do formulário )
data-colorscheme='light' ( Cor do formulário. Caso desejar outro, troque o light por dark )

Já temos o CommentBox Facebook pronto, mas se quiser personalizá-lo siga os passos:

>> Pesquise no código por ]]></b:skin>

>> ACIMA, da tag encontrada cole o código seguinte:
#comentariosFacebook {
background:#F2F2F2; /* Cor de fundo*/
width:520px; /* largura */
padding:10px;
margin-top:0px; /* Mude para -180px, se você colocou abaixo dos comentários do Blogger */
}
>> Altere de acordo com os comentários feitos no código:
>> Salve o Modelo.
>> Vá em seu blog e veja como ficou.

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