Que o facebook é uma ótima maneira de divulgar nossos blogs, todo mundo já sabe. Sabemos que muitos preferem comentar em nossos posts direto pelo Facebook, e isso já ajuda a divulgar nossos blogs. Uma maravilha, né? Mas você sabia que há como moderar estes comentários e/ou coloca-los corretamente em seus posts?
Editado em 24 de janeiro de 2016:
Pessoal, o tutorial foi atualizado de acordo com o passo-a-passo da interface do facebook de janeiro de 2016. Além das mudanças dos prints do tutorial, ele foi enxugado para ensinar APENAS a inserir os comentários (e fazê-los ficarem responsivos), como o próprio nome do tutorial já diz. Exclui códigos que davam bugs (inclusive de soma de comentários, que era muito instável). Para aprender como inserir as metatags de compartilhamento, segue este novo tutorial, que conta mais detalhes sobre as metatags e SEO para Facebook.
Este tutorial surgiu através de uma dificuldade que senti em encontrar um passo-a-passo descente sobre o box de comentários. Todos que eu encontrava falavam uma coisa diferente. Dai pensei "Quer saber? Vou fazer do meu jeito e seja o que Deus quiser!" E foi assim, aos trancos e barrancos, estudando algo dali e um pouco daqui, que aprendi a colocar os comentários do facebook de uma forma mais aceitável, sem aquela descrição chata de URL inacessível daquele box amarelo horrendo, sem auxílio de plugins (quanto mais plugins, mais pesado fica o blog 😖 ), e gerenciar os comentários através do meu próprio facebook.
Página de moderação dos comentários
Exemplo de comentário em um post
O tutorial é bem grandinho, mas não é nada muito complexo pois ele é bem completinho. Vamos lá?
1) Criar um app
Esta parte do tutorial é fundamental. É aqui que criamos uma espécie de aplicativo que será destinado apenas para os comentários de seu blog. Criando este app conseguimos moderar os comentários e ver as estatísticas.
Acesse a página de desenvolvedores do Facebook e no topo da página, no item My Apps, clique em Add a New App.
Escolha a categoria Site para o seu app e dê um nome a ele na próxima janela que aparecerá. O nome do app pode ser o nome do seu blog ou um nome relacionado aos comentários.
Após nomear, clique em Create New Facebook App ID
Em Categoria selecione a opção
Página de script do app com ID. Não precisa copiar agora pois há mais configurações a serem feitas. Mais tarde ele será usado.
Pronto, agora que o APP está feito, vamos para o próximo passo: configurar.
Obs: O código do AP ID deste tutorial acima é apenas exemplo. Não copie-o! Não irá funcionar se vc usa-lo. Copie o código que for gerado apenas para você na sua conta.
2) Configurando o app
Agora que o seu ID foi feito, nesta mesma página, lá no menu, em My Apps (que fica com sua fotinha do lado), você vai selecionar o seu App. É o mesmo menu que você clicou para criar o app. E assim que você clica no seu app, abrirá uma página de painel de controle do mesmo. É nesta página que você irá deixa-lo público e vincula-lo a url de seu blog.
Assim que você entra no painel haverá uma coluna lateral com várias opções. Clique em Settings.
Você adicionará seu e-mail e no botão e colocará a url do seu blog.
Após colocar seus dados de email e url do blog, você clicará em Status & Review na coluna lateral e deixará seu app público e confirmar. Só funcionará se você tiver cadastrado seu e-mail no passo acima.
3) Inserindo scripts dos comentários
O script a seguir é o que fará aparecer o box de comentários no local no qual você colocará (no passo 4). Acrescente este código abaixo logo após a abertura da tag <body>, que geralmente fica em header.php do tema wordpress.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'SEUAPPID',
xfbml : true,
version : 'v2.5'
});
};
(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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>Em SEUAPPID substitua pelo código do ID que você guardou.
Dica: Esse script acima também pode ser gerado na página do painel de controle do app, na opção Get Started with the Facebook SDK, clicando no botão Choose a Plataform (veja o print), após a opção Site.
3.1) O script que o torna responsivo
Agora, o script abaixo fará com que desative a largura padrão imposta pelo facebook e dá a chance de torna-lo responsivo. Você pode coloca-lo acima de </head>.
<script type="text/javascript">
$(window).resize(function(){
$(".fb-comments").attr("data-width", $(".comments").width());
FB.XFBML.parse($(".comments")[0]);
});
</script>4) Inserindo o box de comentário no tema
Em seu arquivo comments.php de seu tema você colocará bem no comecinho do código, logo após a chamada do template de comentários.
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-width="100%" data-colorscheme="light"></div>
- data-href: chamanda para o link do post através da tag the_permalink do wordpress.
- data-numposts: número de comentários do facebook
- data-width: largura de 100% para deixa-lo responsivo e ajustado para qualquer largura de coluna
- data-colorscheme: cor do box em suas formas light ou dark
Para você ter uma ideia de como fica, em meu código fica desta forma no início (digo isso pois há diversas formas de iniciar o código de comentários). Normalmente o código vem depois de <?php return; }?>. Caso tenha alguma dúvida é só me falar ;D
5) Habilitando as notificações
Para habilitar as notificações em seu perfil, basta você acrescentar as seguintes meta tags acima do script de comentários (ou qualquer lugar desde que esteja dentro de <head>):
<meta property="fb:admins" content='SEU ADMIN ID' /> <meta property="fb:app_id" content="SEU APP ID" />
A meta tags fb:admins é o número do seu ID do Facebook (tem que ser o mesmo facebook que você utilizou como desenvolvedor do app). Você pode descobrir seu ID de perfil através do site Find Your Facebook ID. Já fb:app_id é o local onde chamada o ID de seu APP que você acabou de criar.
Esta parte de notificações nem sempre funciona pois este método de vinculação do facebook acho um pouco falho e não funciona para todos os perfis. Mas não custa nada tentarmos, né?
Dica valiosa: Conheça e saiba como inserir as principais meta tags de compartilhamento do facebook através deste tutorial.
6) Gerenciando os comentários
Através do Comment Moderation Tool você terá acesso a todos os comentários novos em seu blog! Lá você pode excluir e ter uma lista completa de todos eles. Você pode escolher modera-los caso não se sinta à vontade de deixa-los automaticamente públicos. Tudo isso pode ser feito através do link Settings, logo acima do box dos comentários.
Observação: Vale lembrar que o gerenciador não funciona na hora, viu? Ele demora um pouquinho para poder funcionar devido às metatags (saiba como inseri-las neste tutorial). Por isso, espere algumas horinhas até testar.
Sei que o tutorial foi bastante extenso, mas garanto que vale super a pena e te livra de mais um plugin chato que gera milhões de scripts que podem deixar seu blog lento, hehe. ;D
