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
Loading...
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
http://4.bp.blogspot.com/-gBqzgMuTC74/UWItzsHhc1I/AAAAAAAAAz4/DRy68X_YIVo/s1600/commentsbox+facebook.png
http://4.bp.blogspot.com/-gBqzgMuTC74/UWItzsHhc1I/AAAAAAAAAz4/DRy68X_YIVo/s72-c/commentsbox+facebook.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2013/04/adicione-a-caixa-de-comentarios-do-facebook-no-blogger.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/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 PESQUISAR 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 O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear 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