Colocar caixa de comentários Facebook no blog ou site

Esta técnica tanto pode ser usada para colocar os comentários num artigo, como para criar um livro de visitas de um site, entre outros. Passemos então à prática!

Se o blog for WordPress (num alojamento teu), talvez o ideal seja usar o plugin Facebook Comments for WordPress.

screenshot.32 Colocar caixa de comentários Facebook no blog ou site

Esta caixa não requer que as pessoas tenham conta Facebook nem que tenhas o Facebook Connect no teu site.

1º Passo

Vamos começar por instalar o Facebook SDK no teu site. Isto permite integrar uma série de plugins sociais.
Para tal, criar uma aplicação Facebook, dando-lhe o nome / URL do teu site:
screenshot.27 Colocar caixa de comentários Facebook no blog ou site

Neste passo, se ainda não for um programador autorizado receberá uma mensagem semelhante a: “Somente desenvolvedores autorizados podem ser adicionados a este aplicativo…”. Pode fazê-lo confirmando através de telemóvel (celular) ou cartão de crédito (se usar esta técnica, sempre é melhor usar um cartão virtual).

2º Passo

Na página que aparece, copiar a ‘Identificação da aplicação’ (API Key) (guardá-la no Notepad por ex.):
screenshot.29 300x58 Colocar caixa de comentários Facebook no blog ou site

3º Passo

Edita o código do teu site. Onde tens a tag ‘html’ (logo no início), deverás adicionar dois novos atributos:

<html xmlns:fb="http://www.facebook.com/2008/fbml"
      xmlns:og="http://opengraphprotocol.org/schema/">

Isto completa a instalação do SDK do Facebook Developers.

4º Passo

Vamos agora incorporar a caixa de comentários no lugar pretendido. Vamos substituir ID_DA_APLICAÇÃO pelo código guardado no 2º passo no seguinte excerto:

<div id="fb-root"></div>

<fb:comments xid="ID_DA_APLICAÇÃO" numposts="30" width="600" publish_feed="true"></fb:comments>

<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'ID_DA_APLICAÇÃO', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/pt_PT/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Onde temos pt_PT poderíamos ter pt_BR.

Se quiseres pôr uma caixa de comentários diferente em cada post, há uma diferença!
Caso estejas a usar o Blogger, deves substituir o código da 2ª linha acima por:

<fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' numposts='30' publish_feed='true' width='600'/>
Caso uses o Blogger, para colocares a caixa de comentários apenas nos artigos (posts) e não na paǵina inicial, coloca o teu código da seguinte forma:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <!-- cole o código da sua caixa aqui -->
</b:if>

5º Passo

Voltar à edição do site e colar o código do passo anterior no lugar onde pretendemos que a caixa de comentários apareça.

Por exemplo, caso estejas a usar o Blogger:

  1. No modo de edição de HTML, clica em “Expandir modelos de widget”
  2. De seguida, cola o código alterado após <data:post.body/>

Agora que tens este novo sistema de comentários podes querer desligar o clássico. No caso do Blogspot, isso é feito via “Definições > Comentários > Ocultar > Guardar Definições”.

6º Passo

Por fim, para seres avisado de cada vez que alguém coloca um comentário, deves:

  1. No código HTML do teu site (dentro do head) colocar o seguinte código (fazer backup antes):
    <meta property="fb:admins" content="TEU ID DO FACEBOOK" />
    <meta property="fb:app_id" content="ID APP (ver 2º Passo)" />
  2. Guardar as alterações
  3. Ir à ferramenta de moderação de comentários do Facebook
  4. Do lado esquerdo, escolher a aplicação criada no 1º Passo
  5. Do lado direito, clicar em “Opções”
  6. Na caixa de texto “Moderadores”, escrever o nome de quem queres que seja notificado
  7. Guardar as alterações
Se precisares de opções avançadas, vê a documentação do “fb:comments”.

E pronto! É só isto! Para veres e testares o resultado final olha um pouco para baixo.
O maistutoriais espera que te tenha sido útil! Para mais informações usa os comentários abaixo ou contacta-nos.

Para ajuda profissional (paga), contacte-nos.


Receber mais truques e dicas por email:

Comentar


  1. Fulano diz:

    Uma bela de uma BOSTA!

  2. Cliclano diz:

    vlw intereçante gostei

  3. Leo Filmes diz:

    to ficando pirado, todo mundo acerta,e eu nada!

  4. Wesley diz:

    Gostei ajudou muito!

  5. Valeu! Muito obrigado mesmo. Eu tentava fazer com outros sites, e sempre dava pau no meu blog. Esse deu certinho. Obrigado mesmo. :)

  6. Jesarela de Carvalho diz:

    O meu deu isso ~> O plugin de comentários requer um parâmetro href.

    oq faço???

    • aconteceu a mesma coisa comigo, esse tal de parâmetro Href, colocar no wordpress ou blogger é sossegado, o problema é transpor pra um site, aí esse tutorial não serve de nada…

  7. Jesarela de Carvalho diz:

    o meu está repetindo os mesmos comentários em todas as postagens oq faço?

  8. Mauricio Mendes diz:

    Gostei deste post.

  9. Caroline diz:

    Mais quando eu criei a pág. no face, não apareceu nada de identificação da pág… Por favor me ajude!!!!!!!!!!

  10. Flávio Ferreira diz:

    preciso de auxilio. Estamos colocando a box de comentários em nossa loja virtual. A box ficará em todas as páginas dos produtos, para quando um cliente tiver uma dúvida ou desejar fazer um comentário, seja feito por lá (da mesma forma que os sites de reportagens fazem. Em todas as matérias tem uma box pras pessoas comentarem). Mas a dificuldade que estamos tendo é a seguinte: Quando um usuário comenta em determinado produto, este comentário ao invés de ser exibido somente nesta página, o comentário está aparecendo em todas as box das páginas do site. Por isso, quero saber qual é procedimento para configurarmos este erro apresentado. fico no aguardo. Abraços

  11. Amo a liberdade, por isso deixo as coisas que
    amo livres. Se elas voltarem é porque as
    conquistei. Se não voltarem é porque nunca as
    possuí.

  12. Hoje todo mundo ta integrando os seus sites com o facebook, colocam os comentários através do facebook, assim, quando o usuário comentar no site, automaticamente já aparecerá na timeline do usuário o comentário dele, o site e uma imagem do site…

    criei uma página para testar os comentários no site é essa => http://www.siqueiranet.com/testes/facebook.php

    ao comentar realmente aparece o post na timeline do usuário no facebook como mostra a imagem => http://upload.crazzy.com.br/pictures/87ac9aa05a2b260ce1a979265464bd3a.jpg

    porém, vejam que a é essa imagem que preciso mudar para a logomarca do site…

    pelo visto, ele ta pegando essa imagem da página inicial http://www.siqueiranet.com, pois é somente nela que essa imagem está sendo usada, porém nessa mesma página tenho diversas outras imagens incluindo a logomarca… então gostaria de saber se existe algum parametro para alterar essa imagem, ou se alguém sabe como o facebook escolhe essa imagem…

    Desde já agradeço…
    1 segundo atrás – 4 dias resta

  13. netmaniace diz:

    minha duvida e simples, onde vejo quandos os novos comentarios chegarem???

  14. perda de tempo diz:

    foi uma perda de tempo, não funcionou.

  15. perda de tempo diz:

    quero me retificar, pegou sim, me disculpem ae, e muito obrigado

  16. nic diz:

    Erro ao analisar XML, linha 1867, coluna 8: XML document structures must start and end within the same entity.

    alguem sabe pq esse deu erro?

  17. Co meu blog se você comentar num post aparece em todos os posts. Como faço pra aparecer apenas no post em que é comentado?

  18. ajm diz:

    queria saber como coloca uma caixa de comentarios no meu site. uma caixa dde comentarios normal assim.

  19. henrique diz:

    nao to conseguindo fazer isso sempre aparece esse nome

    App creation failed
    Sua conta deve ser verificada antes que você possa fazer isto. Por favor, verifique sua conta adicionando seu celular ou cartão de crédito.

  20. SAM diz:

    Simpatia poderosa para emagrecer – Chico Xavier. simpatia para emagrecer logo. Simpatia para ser feita em apenas três dias, podendo ser repetida, caso a pessoa desejar chegar a seu peso ideal.

    Como fazer:

    Numa quarta feira pela manhã coloque meio copo de água e dentro dele o número de grãos de arroz correspondentes aos quilos que você deseja perder. Não coloque grãos a mais do que você deseja, porque os quilos perdidos não serão recuperados depois.

    À noite, beba a água, deixando os grãos de arroz. Complete novamente o copo com água.
    *Na quinta feira pela manhã, em jejum, beba a água, deixando os grãos de arroz, completando novamente com meio copo de água.
    *Na sexta-feira pela manhã, em jejum, beba a água com todos os grãos de arroz.

    Importante:

    1: Conserve o mesmo copo durante o processo.
    2: Não faça regime pois a simpatia é infalível.
    3: Tire o número de cópias correspondente aos quilos que deseja perder. Por exemplo: se você quiser perder 7 quilos (kilos), faça 7 cópias.
    4: Comece a simpatia numa quarta feira, após distribuir as cópias (pode ser publicações em sites).
    5: Publique na mesma semana.

  21. Obrigado pelo tutorial. Muito bem explicado, Parabéns!

  22. Leonardo diz:

    Po, não adiantou de nada, a maioria das coisas que estou tentando fazer aqui não to conseguindo, abraço, se puder me ajudar entra em contato? Obrigado.