
Integração com o Facebook: Open Graph
Interessado em aprender um pouco sobre uma das APIs do Facebook? Quer fazer seu site ficar “bonito” para o Facebook e aumentar consideravelmente a “viralização” dos seus “curtis”? Então vamos lá!
Getting Started
Integrando seu site ou aplicativo com o Facebook torna-o mais social. De simples ferramentas como o “botão de Curtir” e outros “plugins sociais“, até poderosas integrações de feeds e atualizações com “Open Graph”, a plataforma do Facebook provê as ferramentas que você precisa para fazer as pessoas ficarem no seu site e voltar depois.
Documentação Oficial: https://developers.facebook.com/docs/web/
Open Graph
Open Graph é a API do Facebook responsável por permitir apps publicarem histórias no Facebook através de uma API estruturada e bem “tipada”.
Com a Open Graph, o site pode requisitar a permissão do usuário através de um aplicativo (passo-a-passo disso) e publicar no feed dele que está lendo tal notícia ou qualquer outra utilidade que o sistema ache necessário, principalmente para auto-divulgação. Contudo a parte que nos interessa agora é o que acontece quando esse processo não é automático e o usuário Curti ou publica nosso link na rede social por si só.
Não temos controle de como será essa publicação, mas a OG nos permite estilizar como cada página irá ser mostrada ao ser curtida ou ter seu link publicado.
Tipos de Objeto Open Graph
Nessa página, o Facebook expõe 27 tipos de objetos para a integração com a OG.
Vamos nos ater a dois deles: “website” e “article“.
Markup – Remarcação
Visitando a documentação de cada tipo de objeto vamos ver 5 opções: Create (criar), Read (ler), Update (atualizar), Delete (apagar) e Markup (remarcar). Esse manual propõe o uso dessa última, pois é com ela que controlamos como iremos “aparecer” no Facebook.
Como usar?
Assim como usamos as meta tags para dizer aos robôs do Google (e afins) como queremos ser indexados, a OG trabalha com tags dentro do … para indicarmos o conteúdo a ser mostrado dentro da rede social.
Website
Esse objeto representa um site. É um objeto relativamente simples que usa as tags (propriedades) mais comuns da OG. Para páginas internas de um site, o objeto do tipo “article” deve ser usado.
As tags devem ser inseridas dentro do HEAD do documento.
Propriedades:
- og:url [URL] – A URL canônica do objeto, usada como sua identificação na Open Graph (até a barra final influencia).
- og: type* [String] – O tipo do objeto, no nosso caso ‘website’.
- og:title* [String] – O título do objeto na Open Graph (muito importante para estilização da aparência do site no Facebook).
- og:locale [Local] – Local onde as tags do objeto foram remarcadas. No nosso caso, pt_BR (língua_TERRITÓRIO).
- og:image [Array] – Temos 6 parâmetros aqui, mas utilizaremos apenas a og:image:url, como o exemplo acima.
- og:video [Array
- og:audio [Array
- og:description [String] – Uma curta descrição do objeto para a OG.
- og:site_name [String] – O nome do site no qual o objeto reside.
- og:determiner [‘auto’,’a’,’an’,’the’] – É a palavra que aparecerá antes do título numa frase. O artigo. Default é vazio: “”.
- og:restrictions [Restrictions] – Podemos restringir esse objeto em relação ao país, idade e conteúdo.
- og:update_time [DateTime] – O tempo em que o objeto é atualizado (principalmente quando as tags são dinâmicas).
- og:see_also [Array] – Uma array de URLs com conteúdo relacionado.
- fb:admins [Array] – Uma array com o ID do Facebook dos administradores do objeto (serve principalmente para moderação).
- fb:app_id [Facebook ID] – ID do app do Facebook.
- fb:profile_id [Profile] – O ID de um perfil de um usuário a ser seguido.
* – Propriedades obrigatórias.
Dentre essas propriedades podemos destacar as principais e que devem aparecer, quando queremos estilizar nossa aparência no Facebook: og:type, og:url, og:title, og:image, og:description
Article
Além as propriedades acima, um objeto “article” suporta algumas outras propriedades e é o tipo mais indicado para artigos/páginas dinâmicas de um blog, por exemplo.
Propriedades
- article:published_time [DateTime] – Tempo representando quando o artigo foi publicado.
- article :modified_time* [DateTime] – Tempo representando quando o artigo foi modificado por último.
- article:expiration_time * [DateTime] – Tempo representando quando o objeto artigo expirou (ou vai expirar).
- article:author [Array] – Uma array com a URL ou ID do perfil do Facebook dos autores.
- article:publisher [Profile] – A URL ou ID de uma página do Facebook da entidade responsável pela publicação.
- article:section [String] – Categoria a qual o artigo pertence.
- article:tag [Array] – Uma array com as palavras-chave relevantes ao artigo.
Debug
O Facebook tem uma ferramenta muito boa para debugar essas tags, bem como para “atualizar” o código do site. Afinal, ele lê o código da página, afim de extrair essas propriedades, na primeira vez que o objeto é criado (ou seja, quando alguém Curte ou publica o link da página). Então pode demorar, após alguma modificação, para essa “leitura” ser refeita.
Podemos forçar isso usando a ferramenta de debug: https://developers.facebook.com/tools/debug
Exemplo
Em 23/12/2013 a página: http://blog.opovo.com.br/bancadoanime/banca-anime/ foi Curtida, gerando assim uma história (para quem tem acesso ao feed de quem curtiu) assim:
Se fizermos o debug da página encontraremos:
- URL do objeto a ser “debugado”
- Avisos de correções que devem ser feitas.
- Como a propriedade og:image não foi especificada o Facebook lê todas as imagens do site, escolhendo uma aleatoriamente, o que prejudica a “viralização” do conteúdo.
Importância
Uma página com essas tags bem estruturadas, gera uma história interessante a cada vez que é curtida/publicada.
É como se cada um que curtisse divulgasse tão bem quanto o próprio autor, que escolhe uma imagem chamativa, bem como uma descrição e título atraentes, mas de forma automática e inconsciente. Pois quem Curtiu não verá essa história, nem em sua linha do tempo principal (apenas no canto inferior esquerdo em Atividades). Já seus amigos e seguidores receberam essa história normalmente como uma publicação normal!
Usando isso no WordPress
Uma aplicação bem interessante é no CMS WordPress, pois com o simples acréscimo de algumas linhas de código no arquivo header.php (e functions.php, se quiser encapsular tudo em uma função) o CMS cria todo esse conteúdo dinamicamente e sem esforço.
Mas isso é assunto para outro artigo!
[TO BE CONTINUED…]