Adicione a caixa de comentários do Facebook no Blogger

Aprenda adicionar a CommentsBox facebook ou caixa de comentários do Facebook em seu blog

Um dos temas mais solicitados é como colocar caixa de comentários Facebook no blog, e 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 comentário.

Siga o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

box comentário Facebook

Veja O novo Editar HTML do Blogger

Eu vi esse método em Vagabundia, onde explica como adicionar o plugin de comentários Facebook de maneira que cada postagem tenha sua própria caixa de comentários e seja independente dos outros.

Tutorial

Passo 1:

Primeiro entre na seção Modelo > Editar HTML e marque Expandir modelos de widgets, então, busque pela etiqueta:
<body>
ou caso não encontre procure por:
<body expr:class='"loading" + data:blog.mobileClass'>

Abaixo de qualquer um deles adicione:
<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, encontre por:
</b:includable>
<b:includable id='status-message'>
E logo acima dele cole o seguinte:
<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>
Com isso, você já terá a caixa de comentários do Facebook em seus artigos (lembre-se de entrar em um post para visualizar).
A caixa estará acima do formulário de comentários do Blogger. Se você desejar que os comentários do Facebook fique abaixo do formulário de comentário do Blogger, então, coloque o código do plugin logo acima de:
</div>
<b:if cond='data:post.includeAd'>
Dentro do código que adicionamos, teremos estes parâmetros:
data-num-posts='5'
data-width='500'
data-colorscheme='light'
O primeiro é o número de comentários a ser exibidos; o segundo é a largura do formulário; e o terceiro é a cor do formulário, você pode alterar light por dark.

Até aqui já temos o CommentBox Facebook, se quiser personalizá-lo um pouco pode colocar antes de ]]></b:skin> alguns estilos, como por exemplo:
#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 */
}

Passo 2:

Se deseja que cada vez que alguém fizer um comentário você receba uma notificação do Facebook e poder moderar os comentários, será necessário criar um aplicativo. Mas para tal é necessário verificar a conta do Facebook.

Se assim for, vá para Facebook Developers e clique em Criar Novo Aplicativo.

criar app

Digite o nome do aplicativo, aceite os termos e clique em Continuar.

nome do app

Na próxima tela clique em Site com login utlizando Facebook, digite a URL do seu blog onde colocou caixa de comentários e copie também o número listado no App ID.

configuração do app

Agora entre novamente em Modelo | Editar HTML do seu blog e adicione antes de </head> isto:
<meta content='ID de USUARIO' property='fb:admins'/>
<meta content='ID do APLICATIVO' property='fb:app_id'/>
Em ID do aplicativo adicione a série de números que copiou. E em ID do usuario adicione o seu ID do Facebook, se você não sabe acesse este link:
http://graph.facebook.com/usuário
Altere onde se indica usuário pelo seu nome de usuário do Facebook e dê um clique, lá verá qual é o ID do seu perfil do Facebook.

Tendo feito isso entre em um artigo para ver sua caixa de comentários e clique em Configurações. Lá você verá várias opções para o plugin; onde diz Moderadores, adicione o seu nome e salve as alterações.

adicionar moderadores

Depois de ter feito tudo isso, poderá moderar os comentários e receber as notificações na sua conta do Facebook cada vez que alguém fizer um comentário. Se não fizer isso, você ainda terá caixa de comentários do Facebook, mas sem estas opções.

Qualquer dúvida sobre o assunto é deixar um comentário.

COMENTÁRIOS

BLOGGER: 19
  1. nossa muito obrigada me ajudo muito! a única coisa que não consegui foi colocar a caixa de comentários do facebook abaixo da do blogger, não fico claro pra mim. como faço?
    Aguardando resposta.

    ResponderExcluir
  2. No meu não mudou nada e não existe mais a opção "Expandir modelo de widgets" veja ai amigo, por que será que não deu certo?

    ResponderExcluir
    Respostas
    1. O blogger mudou e quando vc aperta Ctrl+F e pesquisa alguma coisa ele já se abre todo sosinho

      Excluir
  3. Fera, é bom rever os códigos, porque o Google mudou o Layout do Blogger. Vai la na página de Editar HTML ver que está tudo mudada.

    ResponderExcluir
    Respostas
    1. Sim, eu já tentei em vários sites encontrar um jeito de adicionar plugins do face, mas ta difícil, ninguém atualizou os códigos.

      Excluir
    2. Uma alternativa é você ir lá em modelo, baixar o layout do seu blog e manualmente através de um editor, aplicar as mudanças. Depois vc vai e o seu layout para o blogger com as alterações feitas. Por questão de segurança, guarde um backup do modelo do seu blog de como era antes.
      Eles não exibem mais o modelo completo lá nas configurações do blogger, a única forma de ter acesso ao modelo completo é essa que falei.

      Excluir
  4. O blogger mudou todo o layout pode fazer um novo tutorial??

    ResponderExcluir
  5. Continua com o mesmo problema de sempre, a caixa de comentários aparece bonitinha mais eu quero ver moderar algum comentário, para mim a moderação e o principal. A dois anos atrás eu coloquei esta caixa, não tinha nenhuma experiencia com os apps do Facebook e não tive o menor problema em coloca-la no meu blog, passou uns dois meses e ela começou a apresentar problemas, não mostrava os comentários que eram publicados você tinha que ir página por página para encontrá-los e não era possível excluir comentários indesejados, Já fiz tantas buscas tentei vários códigos e não consegui nada com essa caixa, acredito que o Facebook tenha bloqueado o uso da moderação para os usuários da plataforma blogger, uma pena pois o sistema de comentários do blogger é arcaico e não funcional, sua estética é horrível e toda vez que o usuário entra em post antigo ele visualiza de cara aquele comentário mais antigo que a postagem tem.

    ResponderExcluir
  6. muito boa essa dica ja acrescentei no meu Blog

    http://capitaocurioso.blogspot.com.br/


    siga o capitão

    ResponderExcluir
  7. Nõ estou conseguindo colocar, aparece que não tem nenhuma parte da html com < body > ou < body expr:class='"loading" + data:blog.mobileClass'>

    ResponderExcluir
  8. Olá, tentei colocar os comentários do face pois estava com problemas para colocar os do blogger, porém não estou conseguindo deixar visível a textbox, se puderes me ajudar desde já grato. O link para o blog é: http://sonhealtovoealto1.blogspot.com.br/p/gestao.html.

    ResponderExcluir
  9. Todos os comentarios aparecem em todas as paginas... sempre os mesmo!

    ResponderExcluir
  10. Tenho uma dúvida, se eu instalar esse plugin e torcar de layout vou perder os meus comentários? Pois perdi o meu quando usei o disqus.

    ResponderExcluir
  11. A isso Já Mudou Cara!!!!
    EX: Alguns Códigos que você colocou Mudou ou não tem mais.

    ResponderExcluir

Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Adicione a caixa de comentários do Facebook no Blogger
Adicione a caixa de comentários do Facebook no Blogger
Aprenda adicionar a CommentsBox facebook ou caixa de comentários do Facebook em seu blog
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvq8hmcNR1zz2NN6WG7k192iZsKrtsD97CqShZnhG-uBBWZL-KcGPpCAw3HUz-k2NHuEBVcedf8s-LQ6sxnT1fuggUlF32t2taLeExcdrtDcfkRGqG5bRRWt2TspQqFg5EXnui0fM-N1ff/s1600/commentsbox+facebook.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvq8hmcNR1zz2NN6WG7k192iZsKrtsD97CqShZnhG-uBBWZL-KcGPpCAw3HUz-k2NHuEBVcedf8s-LQ6sxnT1fuggUlF32t2taLeExcdrtDcfkRGqG5bRRWt2TspQqFg5EXnui0fM-N1ff/s72-c/commentsbox+facebook.png
Bloggermin
https://bloggermit.blogspot.com/2013/04/adicione-a-caixa-de-comentarios-do-facebook-no-blogger.html
https://bloggermit.blogspot.com/
https://bloggermit.blogspot.com/
https://bloggermit.blogspot.com/2013/04/adicione-a-caixa-de-comentarios-do-facebook-no-blogger.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO SEARCH TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar Table of Content