Como Inserir os Botões do Pinterest em Seu Blog

Foi noticiado na última semana que o Pinterest, rede social de compartilhamento de conteúdos através de murais, tornou-se a terceira mais acessada nos Estados Unidos, atrás só das poderosas Facebook e Twitter. Embora não seja ainda tão popular no Brasil, muitos já começaram a "pinar", incluindo também perfis empresariais.

Tal como nas outras redes, você pode criar botões de compartilhamento para exibição em seu blog, facilitando a marcação da página por quem usa o Pinterest. Ao clicar no botão, o usuário divulga o link da página e a primeira imagem do post (se você usa imagens, caso contrário, pode definir uma imagem padrão, como seu logotipo). Dá pra adicionar também um botão Follow, para conseguir mais seguidores. É bem fácil, veja como.

Primeiro, acesse a página de Goodies do Pinterest. Lá você encontra muita coisa, e dois tipos de botão serão nossos alvos aqui: o Follow e o Pin It.

Botão Follow

Para usar o Follow, escolha um deles, clicando no campo do modelo que melhor cabe em seu tema. Assim que clicar aparece o código do botão na caixa ao lado; basta copiá-lo e aplicar em seu blog, no lugar em que o botão vai aparecer, como um widget da sidebar ou até dentro do template, se for preciso.

Se o tamanho do botão for muito grande, dá pra diminuir pelo próprio código: note que ele é feito por uma simples imagem com link. É só diminuir os valores de width e height. Mas cuidado para não deixar o botão desproporcional.

Botão Pin It

O código fornecido na página de Goodies só serve para páginas estáticas, então é preciso fazer algumas modificações em PHP para pegar uma imagem, o título e a descrição, que no caso será o título do post.

O botão adicionado com este código será o vertical com um balão de contagem de compartilhamento. Comece colocando o código do Pinterest no seu blog, antes da tag </body>.

<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Vamos precisar de uma função que vai pegar a primeira imagem do post e usar para ilustrar a postagem no Pinterest. Se não tiver nenhuma imagem, você poderá fornecer o caminho de uma imagem padrão.

Adicione o código na functions.php:

function pinterest_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ // Imagem padrao, caso seu post nao tenha imagens
    $first_img = "/images/padrao.jpg";
  }
  return $first_img;
}

Agora é só incluir o código que gera o botão onde quer que ele apareça.

<a target="_blank" href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo pinterest_image() ?>&description=<?php the_title(); ?> em <?php bloginfo('url'); ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="horizontal" always-show-count="1"><img style="cursor:pointer;" border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a> 

É isso. Esse código foi modificado a partir de original publicado aqui, confira se tiver alguma dúvida.