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.
  • Maria Carolina

    Oi Ana, tudo bem?
    Fiz e funcionou!!!!!!! Eba!!!
    Só tive problemas pra achar o ID da minha conta, o link que você disponibilizou quando eu colava a URL do meu perfil dava erro. Então dei uma pesquisada e conseguir encontrar meu ID de outra maneira.
    Nesse link explica: http://tecnologia.umcomo.com.br/articulo/como-encontrar-o-meu-id-de-facebook-2213.html
    Fiz e funcionou!!! Muito obrigada por compartilhar conosco!!
    Beijos

  • Stephanie Ferreira

    Agora que mudei de layout finalmente, deixei para colocar os comentários do facebook por ultimo por achei que fosse dar muito muito trabalho mas DEU CERTO! E esta lindo!! Espero que continue assim hehehe
    Vlw pelo tutorial Aninha, um beijo

    • Aninha

      Aeee!! Que bom que deu tudo certo @Stephanie! É só seguir os passos tintim pot tintim que não tem erro <3

      Beijocas e sucesso!

  • Angélica

    Coisa liiiinda esse tutorial! <3
    Obrigada Aninha por indica-lo e me ajudar a resolver o meu problema com o compartilhamento de posts no FB. Você é um anjo! Não canso de agradecer!!!

    Super Beijooo!

  • Maike

    Ana, não exatamente o mesmo assunto do post, haha mas é parecido! No meu blog, os posts que estão indo pro facebook, e, quando a gente vai compartilhar, ele tava pegando a foto do gravatar, aí retirei o gravar do tema, e agr ele não pega nenhuma imagem :/, ai adicionei as meta tags, mas ele não pega mesmo assim, eu tô usando a imagem destacada, normal, mas no tamanho 690 x 310! Você sabe o que eu fiz de errado? Se é nas meta tags mesmo que eu mexo…Por que não vai mesmo!

    Obrigado por toda ajuda de sempre.

    • Aninha

      @Maike, vc fez o procedimento que recomendei no item 7 lá no passo 3? Lá está pedindo para inserir uma função na qual recupera a primeira imagem do post para servir de thumbnail. Se vc estiver usando e não estiver funcionando mesmo vc substitui a linha do og:image com a função get_the_post_thumbnail();. Veja a documentação e opções de uso desta tag no Codex do WP.

      Me avise se deu certo!
      Abraços 🙂

      • Maike

        @Aninha,
        Aninha, deu certinho sim, o share tá lindo, eu editei bem as tags, ficaram ótimas!
        Só o RSS Grafiti que não lê as imagens, haha mas isso já não da pra fazer mesmo, ele é bem cru! Mas o quê eu precisava ficou lindo, obrigado!

      • Maike

        @Aninha,
        AMEI você incluindo a parte do thumbnail aí hahaha, eu até ia passar o meu código editado pra você atualizar, mas você já sambou fazendo ? Você é sensacional!

        • Aninha

          Hahaha obrigada @Maike! eu tinha me esquecido dos thumbnails padrão do wp e de deixar mais descataca a função do TimThumb… agora acho que este tutorial está 100% 😉 se vc acha que ainda falta complementar algo, me fala!
          Abs!

  • Letícia

    Ana, você é uma linda, sabia? \o/

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