Open Graph. Como o Facebook exibe seu site.

10-11-11

Open Graph. Como o Facebook exibe seu site.

Open Graph Facebook

Sabe quando você compartilha um link no Facebook e, dependendo do site, aparece uma miniatura da imagem do post, o logo, ou às vezes não aparece imagem nenhuma? Saiba que quem controla isso é você. Aprenda como customizar a forma como seu site é compartilhado com o Protocolo Open Graph.

O que é isso?

Antes de tudo, vamos aprender o que o Facebook nos apresenta como Protocolo Open Graph:

O protocolo Open Graph permite a integração do seu site com os recursos gráficos do Facebook. Isto significa que quando um usuário clica no botão “Curtir”ou compartilha um link da sua página, o Open Graph define como ela será exibida na timeline dos seus amigos ou seguidores. Tais parâmetros de exibição são definidos nas <meta> tags do seu HTML.

Vamos entender isso de forma prática. Quando você compartilha um post do Cutedrop no Facebook, copiando e colando o link na sua timeline, o que aparece é o título do post, o resumo do mesmo e duas opções de miniaturas: a primeira imagem do post ou o logo do Cutedrop como segunda opção.

Open Graph Facebook

Já quando você compartilha a URL principal do blog, o que aparece é somente o logo.

Open Graph Facebook

Sem a configuração certa do Open Graph, o que aparecia antes eram mais de 19 opções de imagem da home como miniaturas, sendo que nenhuma delas era o logo. Parece que isso é um problema que acontece com blogs feitos em WordPress. A impressão que eu tenho é o que o Facebook não reconhece os elementos gráficos inseridos no header.php como opções de miniatura, somente o que está no index.php. Isso é um pitaco…

Se você se identificou com alguns destes fatores descritos acima, não precisa xingar Mark Zuckerberg. Aprenda como configurar as <meta> tags do seu site, principalmente no WordPress, de forma a dominar a ferramenta e não o contrário.

Og Properties

O prefixo og é o que explica para suas <meta> tags que você está configurando o site para exibição no Facebook. Veja o bloco de código que deve ser inserido entre o <head> e </head> de um site e logo abaixo vamos aprender sobre cada uma das propriedades. Ah, e como isso vai ser adaptado para o WordPress.

A página de desenvolvedores do Facebook mostra o seguinte exemplo:

Open Graph Facebook

[html]<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
…
</head>
…
</html>
[/html]

No código acima, as og properties querem dizer o seguinte:

og:title – O título que vai aparecer ao lado da sua miniatura, no caso do exemplo acima, “The Rock”.
og:type – É o tipo do objeto, no caso, “movie”. Se fosse o Cutedrop, seria “blog” ou “article”. Você pode ver aqui a lista de types suportados no Facebook.
og:image – A miniatura do seu site. A imagem deve ter no mínimo 50 x 50 px e deve ser um PNG, JPEG ou GIF.
og:url – A URL do seu objeto que será usada como identificação permanente no box gráfico.

Meta tags extras para uma maior customização no Facebook:

og:site_name – Um nome reconhecível para o seu site, no exemplo, “IMDb”.
og:description – Uma ou duas frases que descrevem seu site.

Até aqui você aprendeu o significado dos códigos Open Graph, mas como aplicar isso em um blog feito com WordPress?

Configurando o Open Graph no WordPress

Como o WordPress é uma plataforma dinâmica não basta preencher os campos com informações tão simples, afinal você precisa definir como vão aparecer os posts, a home, as páginas. Existem alguns exemplos de Open Graphs para WordPress em sites e blogs, mas me baseei neste padrão e adaptei, de forma que se adequasse melhor à finalidade do Cutedrop.

Repare nas nossas Meta tags:

[php]<!– Inicio Facebook WP – Cutedrop –>
<?php
$thumb = get_post_meta($post->ID,’_thumbnail_id’,false);
$thumb = wp_get_attachment_image_src($thumb[0], false);
$thumb = $thumb[0];
$default_img = ‘link para o seu favicon no ftp’;

<?php if(is_single() || is_page()) { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php single_post_title(”); ?>" />
<meta property="og:description" content="<?php
while(have_posts()):the_post();
$out_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt());
echo apply_filters(‘the_excerpt_rss’, $out_excerpt);
endwhile; ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php } else { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php bloginfo(‘name’); ?>" />
<meta property="og:url" content="<?php bloginfo(‘url’); ?>"/>
<meta property="og:description" content="<?php bloginfo(‘description’); ?>" />
<meta property="og:image" content="link para o seu favicon no ftp" />
<?php } ?>
<!– fim Facebook WP –>
[/php]

No caso, como o WP já possui seus parâmetros em PHP, eles foram aplicados em conjunto com as Meta tags, de forma a definir condições para diferentes formas de exibição. Lembrando que este bloco de código deve ser inserido no seu arquivo header.php, entre as tags de <head> e </head>.

É isso, agora você pode dominar a forma como seu blog é compartilhado na rede social que mais ameaça o Google e fuxicar para personalizar do seu jeitinho.

CuteDrop

10-11-11