MENU It's me: Mário!

integracao-com-o-facebook-open-graph

Integração com o Facebook: Open Graph

API 26 de dezembro de 2013 4 comentários
API
  • 26 - 12 - 13
  •        
  • 4

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:

História no Facebook

Se fizermos o debug da página encontraremos:

Ferramenta de Debug do Facebook

  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…]

Por favor, considere desativar o AdBlock

Não perca nenhuma novidade, assinando nossa newsletter!



Não se preoculpe, não enviaremos muitos e-mails, nem mostraremos seu e-mail para ninguém. Dúvidas?


Deixe seu comentário! Dúvida sobre como comentar
ou vai postar código? Leia antes.

  • Samuel Rubens

    Cara, estava eu aqui procurando algo interessante sobre desenvolvimento android e tal… cai aqui em seu site.
    Antes que me passe pela memoria, quero parabeniza-lo pela iniciativa de mostrar aos outros tudo que aprendeu e o que esta aprendendo e transmitindo esse conhecimento, sensacional cara! meus parabens!!
    Dica: essa lance todo de apps e tal ta uma febre!! invista nas aulas de desenvolvimento dessa plataforma e sucesso para você meu caro.

    • Muito obrigado pelo comentário, Samuel!
      Abração e boa leitura!

  • Marco Antônio Louro

    Olá! Não sou desenvolvedor, mas preciso resolver esse problema da imagem que não carrega corretamente quando insiro o link do meu site no Facebook. Fiz o debug e o resultado é que a propriedade necessária ‘og:title’ do tipo ‘string’ não foi fornecida. Mas não sei como fazer isso. Você pode me ajudar?