MENU It's me: Mário!

open-graph-no-wordpress

Integração com o Facebook: WORDPRESS

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

Boa tarde (dia/noite/madrugada) caro leitor. Senti-me com 60 anos agora…  Whatever… Tudo bom? O artigo de hoje é meio que uma continuação do artigo da semana passada sobre o API Open Graph do Facebook e discorre sobre as aplicações desse conhecimento em um blog site! construido com o CMS WordPress.

Apresentarei uma lógica e por fim na prática essa aplicação, finalizando com o link para um plugin desenvolvido por mim com essa finalidade (o artigo falando da criação de plugins WordPress virá no futuro!).

Lógica

Podemos dividir as páginas do WordPress em 3 tipos, para usarmos as tags:

Aplicação das propriedades da Open Graph API nos tipos de páginas do WordPress

HOME

Na página inicial do site é interessante usarmos as TAGs semelhantes as usadas para os motores de busca. Mais ou menos assim:

  • og:title – Titulo/Nome do site. Prestar atenção, pois será como os usuários do Facebook verão seu site quando alguém compartilhar ou postar o link dele.
  • og:description – Descrição do site. Use algo que chame a atenção, pois será o que vem abaixo do título do site no Facebook.
  • og:type – website
  • og:url – Qual a URL do site?
  • og:image – Essa é a imagem que vai representar o seu site! Geralmente tornamos essa imagem default (vai ser útil quando chegarmos nos artigos).
  • og:site_name – O nome do seu site. É como irá aparecer nas histórias do Feed do Facebook: “fulano curtiu SITE NAME”.
  • fb:admins – Seu ID do Facebook e de quem mais for moderar os comentários do Facebook no seu site. *

* Descubra seu ID em: https://graph.facebook.com/SEUNOMEDEUSUÁRIO?fields=id

Como as OG tags devem vir no e você não deve ter um header.php para cada tipo de página, o WordPress te dá a possibilidade de testar se é a HOME assim:

<?php if (is_home()) { /* TAGS DA HOME */ } ?>
Isso é legal porque a HOME não muda, então você pode deixar as OG Tags estáticas, o que não é aconselhável para os artigos e páginas internas.

PÁGINAS

Nas páginas internas do site é interessante usarmos as TAGs para destacar o título da página. Além disso podemos manter as demais TAGs (ou com um pouco mais de trabalho escolher a primeira imagem da página como og:image e as primeiras palavras do texto comoog:description, contudo não é o caso de nossos blogs).

ARTIGOS

Os artigos são legais porque o WordPress nos dá facilmente as ferramentas para alimentar as OG tags de acordo com o conteúdo do post, deixando o mais atraente possível e aumentando assim a “viralização”.

  • og:title – Titulo do artigo.
  • og:description – Resumo ou enxerto do artigo.
  • og:type – “article”
  • og:url – O permalink do artigo.
  • og:image – Em ordem de importância: Imagem Destacada >> Primeira Imagem do Artigo >> Imagem Default do Site
  • og:site_name – O nome do seu site. É como irá aparecer nas histórias do Feed do Facebook: “fulano curtiu SITE NAME”.
  • fb:admins – Seu ID do Facebook e de quem mais for moderar os comentários do Facebook no seu site. *
  • article:published_time – A data de publicação do artigo.
  • article:author – O nome do autor.
  • article:publisher – A página do Blog.
  • article:tag – As tags do blog.

CÓDIGO

Abaixo irei descrever um exemplo de código a ser usado no WordPress para otimizar/automatizar as OG tags.
O arquivo responsável pelono seu template é o

header.php

e será nele que iremos colocar o código. Outra forma (talvez melhor) de implementação seria usar o

functions.php .
Vale lembrar que há diversas maneiras de aplicação e usarei aqui valores de exemplo para o Blog Banca do Anime, citado anteriormente.

<?php
// Variáveis Default
$articlepublisher = '149209088519409';
$ogimagedefault = 'http://blog.opovo.com.br/bancadoanime/wp-content/uploads/sites/56/2013/12/imagem-padrao-facebook.png';
$ognomedoblog = get_bloginfo('name');

// TAGs com conteúdo fixo para todo o site
echo '<meta property="og:site_name" content="'.$ognomedoblog.'">';
echo '<meta property="fb:admins" content="100001287580019">'; // Um para cada autor...
echo '<meta property="fb:admins" content="100000488789192">'; // Um para cada autor...
echo '<meta property="fb:admins" content="100001953353249">'; // Um para cada autor...

// TAGs para a HOME
if (is_home()) {
	echo '<meta property="og:title" content="Banca do Anime | Blogs O POVO">';
	echo '<meta property="og:description" content="Entretenimento do mundo anime e do não-anime também! Confira a vídeos, cosplays, os animes da temporada e muitas novidades: clique aqui!"> ';
	echo '<meta property="og:url" content="http://blog.opovo.com.br/bancadoanime">';
	echo '<meta property="og:type" content="website"> ';
	echo '<meta property="og:image" content="'.$ogimagedefault.'">';
}

if (is_single()) {
	$ogtitle = $ognomedoblog;
	$ogdescription = get_the_excerpt();
	$ogurl = get_permalink();
	
	if (has_post_thumbnail()) {
		$ogimage = get_post_thumbnail_id();
		$ogimage = wp_get_attachment_image_src($ogimage,'full',true);
		$ogimage = $ogimage[0];
	} else {
		$ogimage = $ogimagedefault;
	}

	$articleauthor = get_the_author();
	$articlesection = get_the_category();
	$articlesection = $articlesection[0]->cat_name;
	$tags = wp_get_post_tags(get_the_ID());
	
	foreach ( $tags as $tag ) {
		$articletag = $tag->name;
		echo '<meta property="article:tag" content="'.$articletag.'">'; // Uma para cada TAG...
	}

	echo '<meta property="og:title" content="'.$ogtitle.'">';
	echo '<meta property="og:description" content="'.$ogdescription.'">';
	echo '<meta property="og:url" content="'.$ogurl.'">';
	echo '<meta property="og:type" content="article">';
	echo '<meta property="og:image" content="'.$ogimage.'">';
	echo '<meta property="article:section" content="'.$articlesection.'">';
	echo '<meta property="article:publisher" content="'.$articlepublisher.'">';
}

/* Com um pouco mais de trabalho e código podemos criar uma aparencia melhor do nosso site no Facebook usando outras condicionais do WordPress como por exemplo:
	is_404() - Se for página de erro 404.
	is_archive() - Se for página de arquivo: categoria, tag, autor ou data.
	is_author() - Página do autor.
	is_category() - Página de categorias.
	is_tag() - Página de tags.
*/

?>

Claro que esse código é apenas um exemplo, afinal tem vários dados que devem ser personalizados ao seu site.

Por isso eu fiz umas alterações para poder criar um plugin para a galera que usa o WordPress, alvo desse artigo. O nome é extremamente original… preparem-se… OG Tags e pode ser encontrado no hotsite dele: http://projetos.jangal.com.br/ogtags/ em inglês (claro! se você mexe/quer mexer com informática tenho uma coisa pra te contar: inglês… basic english, at least…) e em portuga nesse outro link: http://projetos.jangal.com.br/ogtags/pt-br.html

#compartilhem!

Lá vocês encontram o link para o repositório do WordPress e poderão deixar suas dúvidas e reviews.

Gosta de mexer com código? Dá um FORK lá!

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.

  • Amigo, muito bom seu plugin! Estou tentando usa-lo em um site porém ele continua puxando os dados antigos… será que é meu cache? No código fonte ele funcionou direitinho, na homepage ele acrescentou as informações que insira e nas demais páginas e posts não mudou nada, está de parabéns.

    • Olá! O facebook possui uma espécie de “cache”: os dados não são alterados em tempo real a menos que você force essa alteração. Ou seja, se uma URL já foi compartilhada e por consequência já teve seus dados gravados no Facebook, mesmo que você mude o código, vai levar um tempo para mudar no Facebook.

      Mas é possível forçar uma nova leitura dos dados. Basta ir na ferramenta que o próprio Facebook disponibiliza, inserir a URL e clicar em “Debug”. Uma nova página será carregada com os dados daquela URL. Nessa nova página você deve clicar em “Fetch new scrape information”.

      Abraços!

      • Poxa, obrigado Mário, irei criar o arquivo e testa-lo. Uma dúvida, posso compartilhar seu artigo em meu site? Darei os merecidos créditos.