1 - Criando um "app" (aplicativo) no Facebook
![]() |
Adicionando um novo App |
![]() |
Selecione www |
![]() |
Clique em Skip and Create App ID |
Contact Email (Email de contato): Coloque o seu e-mail de contato;
Is this a test version... (Esta é uma versão de teste de outro aplicativo?): Não
![]() |
Criando o aplicativo |
![]() |
Coloque o endereço do seu blog sem o "https" |
![]() |
Adicionando endereço completo do blog |
![]() |
Tornando o App público |
2 - Colocando os códigos no template do blogger
* Antes de qualquer alteração no seu template, faça o backup do mesmo.
* Recomendamos que você crie um blog de teste e faça os passos lá. Se tudo ocorrer bem, você poderá aplicá-lo ao seu blog principal.
*Não nos responsabilizamos por quaisquer danos causados pelo seguimento deste tutorial.
![]() |
Não esqueça de fazer o backup antes de qualquer alteração |
2.2 - Agora, clique em qualquer área dentro do editor de códigos e aperte Ctrl+F para abrir uma caixa de busca dentro do próprio template.
ATENÇÃO: Você deve clicar em qualquer área do editor de texto (1), e não fora dela. Após deixar o cursor piscando nela, você aperta Ctrl+F para abrir a caixa de busca dentro dele (2), e não fora. Veja na imagem abaixo:
![]() |
Como procurar partes do código no Blogger |
2.3 - Nessa caixa de pesquisa, procure por </head>, cole antesdele o seguinte código e clique em “Salvar modelo”:
Atualização (13 de abril de 2016): Este código foi atualizado. Caso você tenha acessado este tutorial anteriormente, localize essa parte e faça a substituição do anterior. Obs.: o código anterior ainda está em funcionamento.
window.fbAsyncInit = function() {
FB.init({
appId : 'SEU_APP_ID',
xfbml : true,
version : 'v2.8'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<meta content='SEU_APP_ID' property='fb:app_id'/>
<script type='text/javascript'>
function commentToggle(comentario) {
if (comentario == '#fb-comments'){
window.document.getElementById("fb-comments-page").style.display='block';
window.document.getElementById("blogger-comments-page").style.display='none';
window.document.getElementById("fb-comments").style.background='#ffffff';
window.document.getElementById("blogger-comments").style.background='#d1d1d1';
} else if (comentario == '#blogger-comments') {
window.document.getElementById("blogger-comments-page").style.display='block';
window.document.getElementById("fb-comments-page").style.display='none';
window.document.getElementById("blogger-comments").style.background='#ffffff';
window.document.getElementById("fb-comments").style.background='#d1d1d1';
}}
window.onload = function(){
commentToggle('#fb-comments');
}</script>
Atualização (15 de novembro de 2016): A documentação do Facebook diz que você deve configurar o ID do Aplicativo ou de sua conta, não ambos. Então, não precisa mais descobrir qual é o ID da sua conta.
#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;}
.comments-page .fb_iframe_widget,
.comments-page .fb_iframe_widget span,
.comments-page .fb_iframe_widget span iframe[style] {
min-width: 100% !important;
width: 100% !important;
}
<img class='comments-tab-icon' src='https://sites.google.com/site/docjoanir/img/btface.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentário(s)
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='https://sites.google.com/site/docjoanir/img/btblogger.png'/> <data:post.numComments/> Comentário(s)
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType != "index"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='100%' data-colorscheme='light' />
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Note que destacamos o "light". Ele é o valor padrão para a sua box do Face. Caso seu template seja escuro, troque o "light" pelo "dark" e veja o que acontece.
Quer a Box do Blogger antes da do Face?
A box do Facebook não está aparecendo. E agora?
3 - Moderando os comentários do Facebook
3.1 - Então, acesse: https://developers.facebook.com/tools/comments e você verá seu Painel de Controle de comentários. Adicione esse endereço aos seus favoritos, pois é bom que você faça visitas periódicas a ele.
Atualização (13 de abril de 2016): Esta janela foi atualizada e agora está dividida por abas. Faça as observações necessárias para aplicar as configurações abaixo.
Se você tem uma página do Facebook dedicada ao seu blog, ative o Espelhamento de comentários. Assim, os comentários feitos nos seus posts também aparecerão na sua página.
![]() |
Ajustando as notificações |