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:

1. URL do objeto a ser “debugado”
2. Avisos de correções que devem ser feitas.
3. 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…]