Compartilhando sua página no Facebook

Olá Pessoal,

Hoje vou falar de algo bem bacana: configurar a forma de como sua página é vista ao compartilhar no facebook, e o protocolo chamado OpenGraph.
Você já deve ter reparado que quando copia e cola algum link na atualização de status e o publica, ou quando compartilha algum conteúdo como por exemplo uma notícia, é carregado um “box” com título, imagem da notícia e uma pequena descrição. Isso ocorre porque o Facebook faz a leitura de algumas tags na nossa página. Neste post vou mostrar como inserir essas informações.
Abaixo estou compartilhando na minha timeline o link do Falando TI, note que são três tipos de informações passadas, conforme disse anteriormente, uma imagem (ou mais de uma), um título em negrito e uma descrição.

 

As informações buscadas na nossa página para cada item são:

1 – Aqui são carregadas todas as imagens contidas no site. Ou seja, são lidas todas suas tags img.
2 – O Título em negrito é proveniente da tag title do nosso documento HTML
3 – Já para exibirmos esta descrição, devemos incluir dentro do cabeçalho da nossa página(tags head) a seguinte metatag.

<meta name="description" content="O melhor conteúdo da web sobre Tecnologia e Informação. Dicas, Tutoriais, Video Aulas, Artigos e tudo sobre TI.">

Dentro de “content” colocamos a descrição que queremos.

E protocolo OpenGraph, pra que serve então ?
Este protocolo foi criado para o facebook obter informações mais precisas sobre o que está sendo compartilhado, além disto mostra para seus amigos o que você está vendo, assim associando ao seu perfil os assuntos mais compartilhados. Neste protocolo podemos também informar mais detalhes sobre nossa página.

Abaixo seguem as tags necessárias para que sua página siga os padrões do protocolo OpenGraph:

<meta property="og:title" content="Tutorial OpenGraph - Falando TI">
<meta property="og:type" content="blog">
<meta property="og:url" content="http://falandoti.com.br/compartilhando-sua-pagina-no-facebook/">
<meta property="og:image" content="http://falandoti.com.br/wp-content/uploads/2012/01/face.jpg">
<meta property="og:site_name" content="Falando TI">
<meta property="og:description" content="O protocolo OpenGraph é um conjunto de regras criadas pelo Facebook para que nossas páginas se tornem melhores integradas com a rede social. E assim, oferecendo informações mais precisas sobre o que é que estamos compartilhando">

Veja que temos muito mais informações passadas para o FB, além do mais, podemos setar a imagem exibida. Lembrando que essas metatags devem sempre estar no cabeçalho de nossa página (tag head ).

Vlw pessoal até a próxima.