20/07/2017

Como instalar Comentários do Facebook no blog


Usar o plug-in dos comentários do Facebook permite que haja mais interação com os leitores, fazendo com que se sintam mais motivados a comentar, já que a ferramenta é bem simples e usa apenas o próprio perfil do Facebook. Se você quer fornecer essa opção além do sistema de comentários da sua plataforma, vamos ao tutorial:

1º passo: Acesse este site do Facebook, onde você pode gerenciar todos os aplicativos desenvolvidos pela sua conta do Face.

2º passo: Clique em Cadastrar-se agora. Irá aparecer uma janela de confirmação, confirme e clique em Crie um número de identificação do aplicativo.


3º passo: Identifique o aplicativo com o nome do seu blog e confirme seu endereço de e-mail:


4º passo: Confirmada a criação do número de identificação do aparelho, aparecerá um painel com o CÓDIGO ID DO APLICATIVO que precisamos. Localize-o e copie o código, pois vamos precisar dele.


5º passo: Acesse o Painel de visualização dos comentários. É aqui que você terá acesso a todos os comentários, saberá em quais posts foram feitos cada um, além de excluir e banir comentários indesejados. Para receber notificações no seu próprio Facebook pessoal de novos comentários, vá em Configurações > Moderadores e no campo que aparece digite seu nome de usuário/perfil pessoal e salve:


6º passo: Agora chegou a vez de inserir os comentários no HTML do seu blog. Vá no seu editor HTML e logo após a tag <head> insira os seguintes códigos:

<!-- [ Meta Tag Comentarios do Facebook ] -->
<meta content='seufacebook' property='fb:admins'/> 
<meta content='iddoaplicativo' property='fb:app_id'/>

Substitua seufacebook pelo seu user no Facebook. Para saber qual é o seu, acesse seu perfil pelo computador e copie o que aparece logo após de "https://www.facebook.com/", exemplo: "https://www.facebook.com/funaladetal015", seu user do Facebook é fulanadetal015.

Substitua iddoaplicativo pelo código que você copiou no 4º passo.

7º passo: Vamos inserir a "caixinha" dos comentários na divisória certa, que pode variar de acordo com seu template e seu layout. Esteja ciente de que sempre é logo acima ou logo abaixo dos comentários do próprio Blogger/Wordpress, então em caso de dúvidas sempre procure por essas divisórias no seu código.

Tecle CTRL + F e procure pela divisória <div class='post-footer-line post-footer-line-3'>.

Caso não encontre, vamos usar outra divisória, então procure por uma dessas seguintes:

<div class='post-footer-line post-footer-line-2'>

<b:includable id='comment_picker' var='post'>

8º passo: Encontrada a divisória, logo abaixo dela iremos inserir o seguinte código (créditos ao blog FalaDantas):

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                        <div style='float: left; margin: 0px auto 20px; padding: 10px; background: #fff;'>
                          <h4>
                            <fb:comments-count expr:href='data:post.url'/>
                            comentário(s) pelo facebook:
                          </h4>
                          <div id='fb-root'/>
                          <script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
                          <fb:comments expr:href='data:post.url' num_posts='5' publish_feed='true' width='680'/>
                        </div>
                  </b:if>

Salve as alterações e acesse um post do seu blog para ver se funcionou.

ATENÇÃO:

1. Apague o código em vermelho apenas se quiser que os comentários apareçam na página inicial do seu blog e não apenas quando se abre o link do post. Muitos blogueiros preferem manter esse código.

2. Mude o número 5 pelo número de comentários que serão exibidos antes do botão "Carregar mais comentários".

3. Mude o número 680 para mais ou para menos, ajustando, assim, a largura da caixa dos comentários para ser a mesma que a dos comentários do seu layout.

4. Se você usa um template responsivo gratuito do Themexpose ou semelhante, no seu Editor HTML tecle CTRL + F, busque <div class='post-comments' id='coments'> e insira o código do 8º passo logo após o  fechamento </div>, como mostra a imagem seguinte:


Então é isso, espero que aproveitem e que possam tirar qualquer dúvida por meio deste tutorial. :)

comentário(s) pelo facebook:

15 comentários :

  1. to querendo muito fazer isso, mas e o medo de fazer alguma coisa errada, rsrs

    ResponderExcluir
    Respostas
    1. Super entendo Klissia, mas é bom superar esse medo, hehe.
      Qualquer coisa, tenta primeiro em um blog de testes :)

      Excluir
  2. Nossa vou tentar se der errado eu só choro mesmo

    ResponderExcluir
  3. Obrigada, Juliana! Estava tentando colocar esses comentários a muito tempo, só com seu tutorial consegui! Super simples e completo! Obrigada!!! Bjus!!

    ResponderExcluir
  4. Juliana, deu certo, mas não puxou os comentários do face. Aparece como "0 comentário(s) pelo facebook". Será que não vai puxar os comentários anteriores à esta alteração só os posteriores? Ou fiz algo errado?

    ResponderExcluir
    Respostas
    1. Oi Rosangela, Você tinha outra caixa de comentários do Facebook antes com código ID diferente? Se não existir nenhum comentário do Facebook com o ID atual vai aparecer nenhum comentário,até que alguém comente.

      Excluir
  5. Oii Juh, quero te agradecer pelo excelente tutotial! Me ajudou bastante. Consegui depois de infindáveis tentativas, enfim, colocar a caixa de comentários do facebook graças ao seu tutorial. Beijos

    ResponderExcluir
  6. Boa noite e parabéns pela didática. Consegui adicionar a caixa de comentários pelo Facebook, mas somente quando entro no site via computador. Queria saber se há algum modo de adicionar na versão mobile para smartphone. Obrigado!

    ResponderExcluir