Wordpress

WP: Comentários pelo Facebook (responsivo)

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 Aplicativos para Páginas e deixa a opção de "versão de teste" desativada. Em seguida, clique em Crie um ID do Aplicativo

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>
  1. data-href: chamanda para o link do post através da tag the_permalink do wordpress.
  2. data-numposts: número de comentários do facebook
  3. data-width: largura de 100% para deixa-lo responsivo e ajustado para qualquer largura de coluna
  4. 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


Comentários

Atenção: Não é possível realizar novos comentários nesta página pois ela será descontinuada em breve, assim como todos os outros tutoriais da sessão Extras.
  • leticia

    Aninha, obrigada pelo tutorial !!!!
    Quando poder faz também um tutorial de como colocar o botão de compartilhamento do google plus , estou tentando colocar o link com um ícone que resgate a first_image, titulo e descrição mas está complicado rs, li o google developers mas mesmo assim continuo na mesma.
    ( Tentei recomendar seu post no google+ mas parece que está com problema, não está aparecendo as informações é assim mesmo?? )

    Beijos!!!

    • Aninha

      @leticia, obrigada pela dica! e realmente o meu botão de recomendar está com problema no link e arrumarei em breve <3 Muito obrigada!

  • Natália

    Aninha me salva 🙁
    Fui até a parte 6 e ai nada abre mais. Meu blog não abre no link dele, nem o WpAdmin. E agora?
    Olha o que o pessoal da hospedagem disse que apareceu: [03-Jun-2015 16:52:44 UTC] PHP Parse error: syntax error, unexpected 'function' (T_FUNCTION) in /home/oblogdan/public_html/wp-content/themes/temabase_mLuv1.1/functions.php on line 29

    O que eu faço?

    • Aninha

      @Natália, você precisa retirar a função de contagem de comentários. Realmente ela dá problemas em algumas hospedagens devido a versão php da mesma. Você precisa voltar ao que estava antes deste código. Você pode fazer isso acessando o seu CPanel e retirando o seu código de contagem ou então fazer o upload do arquivo sem esse código através de FTP.

  • Luciano

    Como eu faço para customizar os meus comentários, para ficar bonito como o seu?

  • Aline

    Thanks Aninha! 🙂 Vc como sempre salvando a "atmosfera blogueira"! 😀 Me salvou mais uma vez! Gracias!
    Beijos….

  • Gaabi

    Oii, eu fiz o passo a passo… muito legal, parabéns e obrigada por esse luz *-*
    Mas aí eu terminei o tutorial e comecei a me questionar kk
    De onde é esse lugar que as pessoas comentam no facebook ? É da nossa fã page ? Não sei se é porque eu não dormi direito ontem mas não tô pensando direito kkkk
    Você associou o app com a fã page ?? Digamos, esses comentários de pessoas que comentaram do facebook nessa sua postagem desse tutorial, como elas chegaram aqui ?Não sei se me fiz entender….

    beeijão, obrigadinha <3

    • Aninha

      Calma @Gaabi, hehe. Você está confundindo as coisas hehe. Talvez seja por causa das metatags que adicionei no tutorial. Estas tags definem o padrão do comentário do usuário que comentou via facebook, E TAMBÉM do compartilhamento, sacou? 😉

      Esse lugar que a pessoa comenta é realizado pelo APP, não tem ligação direta com fanpage nenhuma. O APP vincula o LINK da pagina/post com o box de comentário que é inserido pelo código (vide tutorial, passo 5) e por isso guarda os comentários registrados neste link. Os comentários são guardados todos no Comment Moderation Tool.

Veja mais comentários:
1 2 3 4
ir ao topo