Adicionando bloco de comentários do Facebook

Publicado em: 08/05/2010 - 16:27:07

Compartilhe:

[atualizado em: 13/01/2010]

Adicionar um módulo de comentários no site já foi tarefa difícil. Hoje em dia, grandes portais estão deixando de lado o desenvolvimento interno e partindo para as APIs abertas.

Um exemplo de API de comentários aberta é a do Facebook. Ela une a facilidade de uso — mais abaixo o código para inserir o bloco em seu site — com a capacidade de usar a base de dados com milhões de usuários cadastrados em todo o mundo.

As duas formas para utilizar os comentários do Facebook

O Facebook permite incluir o bloco de comentários de duas formas:

utilizando iframe;
utilizando FBML (uma espécie de markup do Facebook).

O resultado será igual, seja usando diretamente o iframe, seja usando o FBML, que na realidade irá montar um iframe igual à primeira opção.

A recomendação do Facebook é que seja utilizado o FBML na maioria dos casos. Além de ser mais rápido (por ser assíncrono), permite também melhor manipulação. Portanto é essa forma que descreverei abaixo.

Incluindo o bloco de comentários usando o FBML

Para que o FBML funcione, é preciso incluir um script do Facebook (http://connect.facebook.net/pt_BR/all.js). Isso pode ser feito da forma padrão:

<head>
    ...
    <script type="text/javascript" src="http://connect.facebook.net/pt_BR/all.js"></script>
    ...
</head>

Depois, basta adicionar a tag fb:comments. É através dos parâmetros dessa tag que o script adicionado anteriormente irá criar o bloco de comentários. Os parâmetros disponíveis podem ser encontrados na documentação do FBML.

Você pode copiar o código que o próprio Facebook gera na seguinte página:
http://developers.facebook.com/docs/reference/plugins/comments

Para deixar funcional basta usar o parâmetro xid, que deve conter um valor único, ou seja, de preferência a URL encodada.

No fim da página, ainda dentro da tag body, é preciso chamar a função init que irá montar o bloco de comentários dentro do markup fb:comments:

<div id="fb-root"></div>
<script type="text/javascript">
FB.init({appId: 'APP ID', status: true, cookie: true, xfbml: true});
</script>

O APP ID deve ser trocado pelo APP ID da sua aplicação. Para conseguir um, acesse: http://developers.facebook.com/setup/

Feito isso, o bloco de comentários já deve funcionar, como na imagem abaixo.

Personalizando o bloco

O Facebook permite mudanças no template através de CSS. Você pode adicionar um CSS externo passando a URL dele através do parâmetro css.

<fb:comments xid="http%3A%2F%2Fwww.seusite.com.br%2Ftitulo-da-materia.html"
          css="http://www.seusite.com.br/css-comentarios.css"></fb:comments>

Para melhorar o desempenho o Facebook cacheia todos os CSS. Ou seja, quando você realizar alguma mudança no arquivo, atualize a URL do parâmetro adicionando algum timestamp ou versão, por exemplo, http://www.seusite.com.br/css-comentarios.css?v3. Só assim o Facebook irá usar a versão mais recente.

Mais informações sobre o FBML, acesse a documentação oficial.