Arquivo da tag: open graph

Como funciona o Open Graph

botão de like do facebook

A Wired publicou um artigo sobre o Open Graph que detalha o funcionamento da tecnologia semântica do Facebook, que acabou de fazer 5 anos. A estrutura de objetos e relacionamentos entre eles é a base que permite ao EdgeRank exibir aquilo que é relevante para você na página. Recentemente, o Facebook abriu sua plataforma para os desenvolvedores incluirem seus próprios objetos e criar novas relações além do “curtir”, alimentando, dessa forma, a quantidade de informações estruturadas que a rede social possui sobre seus usuários.

Infelizmente, será quase impossível que o Google, por exemplo,  adote um padrão do rival, ainda mais dentro dessa guerrinha que as duas empresas se encontram atualmente. Mas de qualquer maneira, o incentivo à adoção do Open Graph é mais um passo em direção à adição de contexto aos nossos dados – mesmo que, por enquanto, o maior beneficiado disso seja o próprio Facebook.

 

Compartilhando nas redes sociais: com atrito ou sem atrito?

As mudanças recentes no Open Graph do Facebook, junto com a introdução anterior do ticker, trouxeram uma discussão bem interessante sobre o compartilhamento de atividades na rede social. Agora, a permissão dada a alguns aplicativos significa que tudo que lermos, ouvirmos ou assistirmos através dele será publicado. Essa facilidade seria uma benção ou uma maldição?

Exemplo do Spotify no ticker

 

Na física, atrito é o que acontece na interação de um corpo com outro em presença da gravidade. Como dizia um professor meu, nós só estamos aqui por causa do atrito, que permite a existência de carros, mas também provoca aquele barulho irritante de unha no quadro negro.

 Mas o que seria “atrito” em uma interação na web?

Para mim, tem a ver com a dificuldade de realizar uma ação em um site. Essa dificuldade pode existir intencionalmente, por segurança ou limitações técnicas, ou por acidente, como em projetos mal planejados e não testados.

Em alguns casos, o atrito trabalha a favor do usuário. É um passo de segurança importante confirmar sua identidade no Internet Banking, através de uma senha, por exemplo. Em outros, pode ser tão irritante que faz com que ele desista de realizar a tarefa.

Compartilhando sem atrito: curtir ou não curtir?

Para alguns, a diminuição do atrito foi positiva: o Spotify, um dos beta testers do novo Open Graph, ganhou mais um milhão de usuários após o anúncio da integração na f8, a conferência de desenvolvimento do Facebook, mesmo com as críticas à necessidade de ter uma conta na rede social para usar o serviço.

Já pesquisadores do Microsoft Research acreditam que a remoção do atrito pode banalizar o ato do compartilhamento, afinal, o usuário não escolhe mais intencionalmente o que compartilha. Isso traz também conseqüências importantes para a privacidade: sem a ação de compartilhar, podemos esquecer que tudo está sendo enviado para o stream e correr o risco de mostrar para o mundo que curtimos um tecnobrega no meio da tarde.

Em tempos de dieta de informação, “abrir a porteira”  das nossas atividades seria o equivalente a ir num rodízio de pizzas todos os dias? Ou mais oportunidades de criarmos conexões e encontrarmos semelhanças e diferenças entre os nossos contatos?

 

Nota: tive que procurar uma imagem do ticker porque o Facebook simplesmente não liberou pra mim. Fonte: Socialsafe.net

 

Conhecendo o Facebook Open Graph Protocol

Atenção: esse post é uma prova gigante do quanto eu sou maluca por metadados e classificação. Prossiga com cuidado.

Logo do Open Graph Protocol

Há mais ou menos um ano atrás, o Facebook lançou um esquema de metadados chamado Open Graph, a fim de facilitar a integração entre páginas da web e o próprio facebook. Nas palavras deles, usando o Open Graph, você pode fazer qualquer página se comportar como um objeto do facebook, com direito a analytics e tudo.

A ideia dos desenvolvedores, no início, era usar tags de esquemas já existentes, como o Dublin Core e o foaf, além de meta tags do próprio html, mas no caminho eles perceberam que isso ficaria muito complicado, sem contar uma sopa de letrinhas. Assim, usando as especificações da W3C pro RDFa, o Open Graph reúne todos os atributos que eles julgaram úteis – os obrigatórios são:

  • Categoria: baseada nas páginas mais frequentes do Facebook, identifica a natureza daquele objeto. Pode ser uma atividade, um negócio ou um produto. Cada uma dessas categorias tem subcategorias que podem ser usadas pra refinar ainda mais essa classificação.
  • Um título “limpo”: sabe quando você manda uma página pra wall do Facebook e ela vai com o title superpoluído? Dessa forma você pode normalizar para um título mais agradável, sem as exigências de SEO.
  • Uma imagem: Ah, isso é bem interessante. Usando a tag de imagem do Open Graph, é possível associar uma imagem fixa ao objeto. Sem essa de mandar uma página pro Facebook e torcer pra cair uma imagem descritiva.
  • Uma URL canônica: eles pensaram em usar o rel-canonical, mas depois de consultarem usuários potenciais, perceberam que havia o medo disso impactar nos rankings de busca. Então incluíram essa tag.

Além dessas meta tags, que, no caso de uma página da web, ficam no <head>, existem também outras não obrigatórias porém recomendadas, como descrição e nome do site (para reunir páginas que pertencem ao mesmo site).

Usando o Open Graph com tags html

Exemplo de uso do Open Graph

Existem ainda tags que são usadas no conteúdo para identificar informações de contato, eventos, informações de vídeo, audio, etc.

Será que cola?

Apesar do principal objetivo deles com o Open Graph seja identificar esses elementos para incorpora-los aos dados do facebook em si, confesso que estudar sobre o esquema mudou um pouco minha opinião sobre a rede social. Através desse protocolo e da Open Graph API, que permite consultar praticamente tudo que está no facebook (se forem informações sobre os usuários, com a permissão dele, óbvio), é possível combinar o que está lá “dentro”, fechado, e o que está aqui “fora”, pra trazer mais contexto às informações apresentadas.

Por exemplo: não sou muito fã do conceito de busca social (e isso dá um post em si), mas pra certos nichos de consulta, é interessante contar com uma pequena ajuda dos amigos. O Yelp, site de reviews de restaurantes e negócios, e o Rotten Tomatoes, site de  reviews de filmes, já entenderam isso e levaram a integração além com o “Facebook Instant Personalization”, que dá grande destaque às opiniões e preferências das pessoas da sua rede de amigos.

Não sei qual é  o nível de adoção ativa (sem ser através do botão de like) disso – e nem sei se é usado por motivos “extra-facebook”, mas qualquer forma de organizar dados de maneira estruturada ganha um voto de confiança da minha parte. Considerando que uma das tags obrigatórias é exatamente de categoria, imagino as possibilidades de usar isso para desambiguação e oferecimento de informações exatas relacionadas a um tema. Afinal, o Facebook é a rede social mais popular do mundo, cada vez mais presente no Brasil e torna muito fácil para seus usuários manifestarem seus interesses – basta apertar “curtir”.

Além disso, ele é mesmo mais simples que os outros esquemas, porque não tem muito compromisso com abrangência, então não precisa prever “n” casos de uso, como acontece com os já citados Dublin Core e foaf, além de ter tags pensadas diretamente para objetos nativos da Web, como sites e blogs.

Obviamente, nem tudo são flores. o verdadeiro sentido do “Open” no nome do protocolo pode ser debatido: as informações são abertas, mas a forma como o usuário interage com elas é proprietária.

Ok, quero usar o Open Graph!

Bom, se você tem algum plugin oficial do botão de like no seu site, você provavelmente já utiliza. Mas se quiser um controle maior sobre a forma como as informações estão sendo passadas, no site oficial do protocolo você encontra o básico pra começar, como as tags e exemplos de aplicação. Lá também tem recursos para saber como usar o Open Graph com Java, PHP e Ruby.

O próprio Facebook oferece um gerador de botão de like e tags do Open Graph, prontinhas pra serem coladas no <head> da sua página.