Canais iMasters

APIs Facebook + Desenvolvimento + Tecnologia

Open Graph Protocol e Facebook

O padrão Open Graph Protocol possibilita que páginas web (URLs) se transformem em objetos ricos e se integrem ao gráfico social. Através desse padrão, uma página web representará o perfil de objetos do mundo real como filmes, bandas, times de futebol, empresas e diversos outros.

O Facebook adota esse padrão, e uma página web que o implementa enriquece a experiência do usuário em suas ações de curtir e compartilhar informações, além de definir como a página web será representada na maior rede social do mundo.

Quando o usuário do Facebook curte uma URL com o Open Graph implementado, é feito um vínculo entre o usuário e essa URL. Através desse vínculo, será possível interagir com os usuários que a curtiram da mesma forma que ocorrem as interações com uma página do Facebook. Por exemplo: publicar atualizações ao usuário, direcionar anúncios e aparecer na seção “Atividades e Interesses” no perfil de quem a curtiu.

Como implementar

A implementação é simples e feita através de meta-tags que nesse contexto chamamos de propriedades. Algumas delas são requeridas, outras opcionais, recomendadas e específicas para vídeos, áudios e games. Veja um exemplo:

<meta property="og:title" content="Apiki WordPress Host"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://wphost.apiki.com/"/>
<meta property="og:image" content="http://wphost.apiki.com/.../image.png"/>
<meta property="og:site_name" content="Apiki"/>
<meta property="og:description" content="Apiki WordPress Host - Hospedagem de sites especializada em WordPress"/>
<meta property="fb:admins" content="00000,00000"/>
<meta property="fb:app_id" content="00000"/>
<meta property="fb:page_id" content="00000"/>

No exemplo acima, ilustro o uso das quatro propriedades requeridas: og:title, og:type, og:url e og:image. Duas opcionais: og:site_name e og:description. Além de outras três proprietárias do Facebook: fb:admins, fb:app_id e fb:page_id.

Como verificar a implementação

O Facebook disponibiliza uma ferramenta chamada Debuger para validação das propriedades do Open Graph Protocol numa URL em produção. Ela faz uma análise da marcação e exibe informações relevantes.

Como editar informações das páginas Web (URLs) no Facebook

Uma vez que o Facebook indexou as informações da sua página contidas nas propriedades do Open Graph, é possível alterá-las através da ferramenta de Debugger – a mesma utilizada para verificar a implementação.

A cada nova URL informada nessa ferramenta, o Facebook atualiza as informações já indexadas, mas seguindo uma política de atualização que diz que:

  • Após 50 Likes o título (propriedade og:title) se torna fixo;
  • Após 10.000 Likes o tipo (proprieade og:type) se torna fixo.

Portanto, atente-se para as informações dispostas nas propriedades do Open Graph e use-as sabiamente.

Sobre a Administração no Facebook

Através das meta-tags que estruturam sua página com o Open Graph, é possível definir o ID, ou usernames, de usuários que administrarão as páginas. Os usuários definidos deverão curtir a página (URL) para serem aprovados como administradores.

Se o site possui inúmeras páginas, a administração pode ser trabalhosa. Nesse cenário, a recomendação é vincular a página web (URL) a um aplicativo (APP) ou página do Facebook ao contrário de usuários.

Referências

Faça uso das referências abaixo para conhecer ainda mais sobre o assunto e assim explorar as diversas possibilidades de uso que o Open Graph Protocol lhe proporciona.

*

Artigo publicado também em http://leandrovieira.com/archive/open-graph-protocol


Comente também

2 Comentários

Lucas Heck
Lucas Heck

Show de bola estava procurando informações sobre isso!

Ricardo  dos Santos
Ricardo dos Santos

Leandro, tudo bem?

Por favor, preciso de uma ajuda.

Instalei o Open Graph no meu site. O botão de "Recomendar" pega todos os parâmetros corretamento, porém não selecionada imagens adequadas para o compartilhamento. Por exemplo. Ele pega Gifs do layout do site e não as imagens do corpo do texto de uma matéria. Existe alguma configuração para ele priorizar algumas imagens ou até abrir a possibilidade de escolha dessas imagens?

Muito Obrigado.
Abs,
Ricardo

Qual a sua opinião?

Comentários considerados ofensivos serão moderados.

Parceiros

IBM
PagSeguro
Internet Innovation
Dialhost
HostNet
Tecla
KingHost
DotStore
Dinamize