SOCIAL MEDIA

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:

Um comentário :

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

    ResponderExcluir