Colocar caixa de comentários Facebook no blog ou site

comentarios-facebook-no-blog

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.

 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:
 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.):
 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.

Sou eng. informático. Faço aplicações/sites web. Gosto de ensinar.

Comente pelo Facebook:

128 Responses to Colocar caixa de comentários Facebook no blog ou site

  1. Tutorial muito interessante e estou a testar a sua utilidade.

  2. Vinicius diz:

    não cheguei nem no começo quando aperto no link de desenvolvedores aparece

    Sua conta precisa ser verificada antes de você fazer esta ação. Por favor verifique sua conta adicionando seu celular ou cartão de crédito.

    o que eu faço

  3. gu diz:

    nao deu certo + vlw ai

  4. davi diz:

    nao dei certo

  5. canaleao diz:

    boa dica :)

  6. Fiz, mas os comentários se mantém em todas as postagens. Como faço para serem direcionados a cada uma delas?

  7. RIPS diz:

    Não deu certo. Pedi a confirmação do telefone, mas sou de Cabo Verde e isso não funciona aqui, provavelmente.

  8. cleber diz:

    tem algum plugin para fazer isso no joomla?

  9. camillo diz:

    Legal vou usar em nosso site para os comentários de perfis

  10. Matheus diz:

    Amigo, como faço para moderar os comentários ?

  11. Cara, tenho uma duvida que talvez seja idiota, mas nao consegui descobrir sozinha. Como a pagina de comentarios aparece no facebook? No perfil do seu blog? Ou no seu perfil pessoal?

  12. Daniel diz:

    Olá Luis, é necessário repetir o passo 3 em todas as páginas que irei colocar o código de comentários? obrigado pelo tutorial.

  13. opa! diz:

    Gostei mesmo!!

  14. Robson diz:

    Não consegui o teste pode ser off ou tem q ser na pagina do site

  15. Emerson diz:

    Cara, salvou a patria!!muito bom isso!!
    Porem eu fiquei com uma pequena duvida/problema, fiz dois comentarios de teste, o que eu fiz logado no face, demorou um pouco mas foi, ja o que fiz anonimo aparece essa msg “Sorry, a temporary error has occurred. Please try again”
    E alem disso ta demorando muito pra aparecer os comentarios…achei que era minha conexão mas comentei aqui e foi rapidinho…tem alguma ideia do que seja?

    E mais uma vez obrigado!

    • Confesso que também não consegui fazer isso funcionar para users offline…. tenho o mesmo erro. Quanto ao tempo de espera.. isso nunca me aconteceu. Tente procurar no Google se outros utilizadores estão com o mesmo problema.

  16. Christiano Augusto diz:

    Parabéns, consegui fazer fácil, fácil.Antes não estava conseguindo confirmar o código do meu celular, mas depois de muito insistir e fuçar, achei uma outra opção que me permitiu enviar uma mensagem direto para o Facebook, e eles me retornaram uma senha para confirmar meu perfio.

  17. Rafael diz:

    Não entendi o 5° passo, onde tenho que fazer?

  18. Diego diz:

    Oppa. Eu nao entendi o passo tres. Fiz td certo sem ele (etapa 3) e deu certo mas deu apenas um erro e acho q precisa desse passso. O dono desse tutorial por favor entrar em contato? Ja sigo no twitter @D1eg0Tricolor

  19. Bruno diz:

    Fiz aki no blogger, deu tudo certo, porem ñ consigo comentar, aparece msg “Desculpe, um erro temporário ocorreu. Por favor, tente novamente” so que isso jah temum bom tempo. sabe oque pode ser?

    • Pode ser algum problema no código. Por outro lado, se tentar cometnar de forma anónima, ele vai dar um erro semelhante. É um problema do Facebook; tem de se autenticar 1º.

  20. Junior diz:

    Ola Luis,

    O resultado dos processos acima no meu site foi a inclusao da caixa de comentario em cada post que aparece na minha HOME (aquela previa de cada post). Ao clicar no post, so tenho a caixa de comentario do proprio blogger. Nao ha a do facebook.

    Gostaria que fosse o contrario. Na Home com a previa de cada post, nao aparecer comentario algum. Ja na pagina de cada post, aparecer os comentarios respectivos do facebook apenas.

    Pode me ajudar? Caso necessite de printscreen, so me informar.

    Obrigado desde ja,
    Junior

    • Olá Junior.

      Coloque o seu código entre isto:

      <b:if cond=’data:blog.pageType == &quot;item&quot;’>
      <!– o seu código aqui –>
      </b:if>

    • Junior diz:

      Opa, hehehe eu consegui ja. Depois de ter tentado todos os campos possiveis (fui descendo de linha 1 por 1) ate que o sistema foi parar no local exato.

      Obrigado pela resposta.
      Continue fazendo o otimo trabalho que tem feito, ajudando a muitos blogeiros e empreendedores.

      Obrigado mais uma vez,
      e sucesso pra ti!

  21. Junior diz:

    Oi Luiz,

    So dando um feedback. O sistema está no local correto, como voce havia dado a dica de onde colar o codigo. Fiz um teste e apareceu um erro que pode ser temporario: “Database Down
    Sorry, a temporary error has occurred. Please try again.”

    Se tiver acontecendo contigo tambem, me da um feedback, por gentileza.

    Abraco

    • isso nunca me aconteceu… poderá ser um problema temporário deles ou quem sabe colocou o código no cocal errado. mas é mais provável ser a 1ª hipótese. se continuara suceder, tente colocar como estava e/ou pesquisar no google pelo erro.
      de qualquer forma, sempre que mexer no código HTML do seu blog, faça um backup prévio.
      obrigado pelo elogio; continue seguindo-nos e fazendo publicidade ;)

  22. luiz diz:

    consigo instalar o plugin do botao like no wordpress mas nao consigo a caixa de comentarios… :S

  23. victor diz:

    sera que funciona?

  24. wallan diz:

    ? sera?

  25. Jega banguela diz:

    essa porra da errado karaio ningupém faz isso não site funguézão

  26. Edy diz:

    Não consigo passar do passo 1, quando aperto em criar aplicação, volta a página inicial do meu facebook

  27. Edy diz:

    Alguma dica??

  28. Meus queridos professores deste maravilhoso blog, estou desesperadamente numa busca louca para saber como faço para fazer com que apareça o resumo das postagens em baixo do título no Facebook, porque quando posto um link do meu Blog só aparece o título da postagem e embaixo o endereço do Blog, como faço para aparecer o resumo da postagem?

    já vi vários tutoriais a respeito de interação de Facebook, mas aqui e o único lugar que tudo funciona pra mim! Por isso resolvi recorrer mais uma vez á vcs. Aguardo resposta. Abraços!

  29. Poxa, achei meio complicado, tô tentando ainda fazer o procedimento… acho que vai ser mais fácil você simplificar isso numa boa postagem, hahah. Esse é um tema que muita gente iria adorar! Beijos…

  30. Tá, menino lindos… enquanto isso eu vou empiricamente tentando aqui, se eu conseguir, eu posso até colaborar na construção do post. E obrigada pela sua preciosa atenção! :D

  31. Estava funcionando perfeitamente, mas agora a caixa de comentários não carrega e surge uma mensagem “The comments plugin requires an href parameter.”

    Sabe do que se trata?

    Obrigado pela atenção!

  32. Opa, já descobri o problema e repasso a informação:

    essa caixa de comentários parece não ser compatível com a caixa de fãs (http://maistutoriais.com/web/como-instalar-uma-caixa-facebook-like-no-site-blog/) em versão ‘html5′.

    Assim, para colocar a caixa de comentários, a caixa de fãs deve ser no formato ‘iframe’.

    Percebi isso no Blogger, não sei em outras plataformas…

    No mais, obrigado pelo site. Tem sido muito útil!

  33. Henrique diz:

    Boa tarde!
    Fiz todos os procedimentos, porém, como serei notificado sobre novos comentários?email?face? e como configuro isso?
    Obrigado

  34. felipe cedrim diz:

    poxa, fiz tudo direitinho, mas tá dando um erro aqui. quando tento adicionar alogum comentário, aparece:

    Database Down
    Sorry, a temporary error has occurred. Please try again.

    e no passo 1 quando coloco pra criar uma aplicação, não vai pra a página da aplicação criada não, aparece uma outra página, dai eu cliquei em create new app.

    Me ajude ai, cara. Tou rpecisando disso urgente.

  35. felipe cedrim diz:

    COnsegui resolver ;D

  36. MALU PINA diz:

    Quando procuro pela tag ‘html’ a primeira que aparece é essa ai a seguir, eu coloco o código do passo 3 logo em seguida?

  37. MALU PINA diz:

    Quando procuro pela tag ‘html’ a primeira que aparece é essa ai a seguir, eu coloco o código do passo 3 logo em seguida?

    <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml

  38. jeferson diz:

    Eu tento confirmar o meu numero de telefone
    so que espero,espero….
    e nao chega a mensagem
    nao tem outro jeito?

  39. Rogerio diz:

    O plugin de comentários requer um parâmetro href. pq está aparecendo isso pra mim

  40. Rogerio diz:

    O plugin de comentários requer um parâmetro href. pq está aparecendo isso pra mim, não sei o que está acontecendo me ajude please

  41. rui diz:

    belo tutorial. nao ajudo em nada. rsrs

  42. ricardo diz:

    ola. foi so para experimentar :D

  43. Venicio diz:

    ~Pede para eu enviar o meu numero de celular, sendo que eu nunca recebo a mensagem, eu coloca centinho o numero ddd sem o 0 + o numero do telefone, tem alguma dica para poder passar para mim eu agradeço.

  44. maria heloisa diz:

    e para quem não tem cartão de credito tem que usa o celular coisa que fica dificil né alguma outra sugestão ?? ajuda !

  45. marcos jm diz:

    Realmente, não está funcionando por celular.
    Não sei se é por causa que minha operadora é Vivo e na lista de opções pra inserir um celular não tem Vivo.
    Alguem sabe outra forma que não seja por cartão de crédito?

  46. Valeu mano, parábens pelo post, ajudou muito… O Único que consegui fazer… seu blog é muito bom… parábens!

  47. Geison Knuth diz:

    Eu já fiz tudo e inserir a caixa dos comentários, porém ela me exibe uma mensagem e eu não consigo ver os post a mensagem é essa: Aviso: este plugin de comentários está operando no modo de compatibilidade, mas não tem publicações ainda. Considere especificar um ‘href’ explícito como sugerido na documentação do plugin de comentários para aproveitar todos os recursos do aplicativo.

    Tem como me ajudar?

  48. XAndy diz:

    muito bom!!

  49. Anderson diz:

    Olá, adicionei o comentarios ao site, funciona, mas não consigo gerenciar… Quando vou na ferramenta de moderação não aparece nenhum comentario… Sabe o que posso fazer? Abraços

  50. Thiago diz:

    Então, não consegui adicionar, o blogger aponta erros de formatação no site, tipo aqueles erros de xml, e eu tô colocando no lugar certo.

  51. Fulano diz:

    Uma bela de uma BOSTA!

  52. Cliclano diz:

    vlw intereçante gostei

  53. Leo Filmes diz:

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

  54. Wesley diz:

    Gostei ajudou muito!

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

  56. 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…

  57. Jesarela de Carvalho diz:

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

  58. Mauricio Mendes diz:

    Gostei deste post.

  59. 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!!!!!!!!!!

  60. 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

  61. 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í.

  62. Flávio Souza diz:

    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

  63. netmaniace diz:

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

  64. perda de tempo diz:

    foi uma perda de tempo, não funcionou.

  65. perda de tempo diz:

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

  66. 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?

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

  68. ajm diz:

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

  69. 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.

  70. 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.

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

  72. 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.

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Pode usar estas etiquetas HTML e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Assine o Mais Tutoriais e receba nosso presente GRATIS!!!
  • 10 segredos para escrever Aventuras Epicas!
  • 10 segredos para escrever Romances de Sucesso!
  • + Bonus Incrivel:
  • A Arte de Escrever Artigos Que Encantam!! - Parte 1
  • A Arte de Escrever Artigos Que Encantam!! - Parte 2
Se você sempre sonhou em escrever aventuras épicas ou romances
de sucesso, chegou sua grande oportunidade! Aproveite!!
Fique tranquilo, seus dados nunca serão compartilhados.