Como criar um Botão de Tweet customizado em Wordpress

Neste artigo, vamos ensiná-lo a criar um Botão de Tweet customizado para WordPress, usando as APIs do bit.ly e Twitter. O HTML e CSS são totalmente customizáveis e não existe necessidade de usar JavaScript. O PHP é usado para encurtar automaticamente o URL e colocá-lo em cache, contar o número de tweets, e popular os parâmetros da sequência de query no link para o Twitter. Este tutorial foi inspirado no colega Nicolas Gallagher e está disponível no Github sob uma licença MIT. O código PHP foi altamente influenciado pelo plugin BackType Tweetcount.

COMO USAR

Você irá necessitar da sua própria conta no bit.ly e ao mesmo tempo sentir conforto em editar o seu ficheiro functions.php, style.css, e ficheiros de template. Tenha sempre a certeza de que efectua backups antes de começar a trabalhar.

Passo 1: Faça o download dos ficheiros Custom Tweet Button para WordPress a partir do Github.

Passo 2: Inclua o ficheiro custom-tweet-button.php no seu ficheiro functions.php.

Passo 3: Altere o username do bit.ly, a chave de API do bit.ly, e o username do Twitter na função tweet_button que você já tem. As suas credenciais do bit.ly podem ser encontradas na página “settings” da sua conta.

Passo 4: Adicione o CSS do seu Tweet Button ao seu ficheiro style.css do seu template. Adicione a imagem tweet.png na pasta de imagens do seu template. Tenha a certeza de que chama corretamente a imagem no seu ficheiro de CSS.

Passo 5: Chame a função tweet_button nos seus ficheiros de template (ex. single.php) na posição HTML onde deseja que o botão apareça:

if (function_exists('tweet_button'))
   tweet_button(get_permalink());

PORQUÊ CRIAR O SEU PRÓPRIO BOTÃO DE TWEET?

Criando o seu próprio botão de Tweet para WordPress você pode beneficiar de várias vantagens usando os serviços do Twitter, nomeadamente:

Controlo absoluto sobre o HTML e CSS.Tendo controlo completo sobre o HTML e CSS significa que você decide como mostrar seu botão de Tweet. Qualquer ideia ou estilo é possível de recriar.
Todos os cliques, tráfego, e dados de referência ficam alojados na sua conta do bit.ly.O endereço URL de qualquer postagem é automaticamente encurtado usando o serviço do bit.ly. O URL curto é depois passado para o Twitter de forma a que você possa controlar o número de cliques e tráfego através da sua conta no bit.ly. O link permanente é passado para o Twitter através do parâmetro counturl.
Não necessita de JavaScript ou iframes para embeber.O botão de Tweet trabalha sem JavaScript. Você terá controlo absoluto sobre qualquer JavaScript que deseje incluir. Se você pretender que ao clicar no botão seja aberta uma nova janela, então você poderá programar isso com Javascript. A decisão é sua.
Carregamento de página mais rápido.Não existe JavaScript externo ou ficheiros de imagem externos a carregar; tanto o URL curto como o contador de tweets são carregados a partir de cache.
Use o URL curto e o contador de tweets para outros propósitos.Os URLs curtos e contadores de tweets são guardados como meta-data das postagens. Isto faz com que seja extremamente fácil utilizá-los em qualquer local do seu post.
Fácil de implementar uma campanha de Google Analytics ou tracking de eventos.O botão de tweet é HTML simples e você tem controlo total sobre toda a informação que é enviada para o Twitter. Posto isto, é possível integrá-lo com o Google Analytics para responder a questões simples como: seus usuários estão partilhando os conteúdos pela homepage ou pelas postagens diretamente? Se o botão de tweets é mostrado no início e no fundo de suas postagens, qual recebe mais cliques? Quanto demoram os usuários a clicar no botão de Tweet?

COMO FUNCIONA O BOTÃO DE TWEET

Quando um artigo é publicado, o seu denreço URL é encurtado usando a API do bit.ly.

function shorten_bitly($url, $bitly_key, $bitly_login) {
   if ($bitly_key && $bitly_login && function_exists('json_decode')) {
      $bitly_params = '?login=' . $bitly_login . '&apiKey=' .$bitly_key . '&longUrl=' . urlencode($url);
      $bitly_response = urlopen('http://api.j.mp/v3/shorten' . $bitly_params);
      if ($bitly_response) {
         $bitly_data = json_decode($bitly_response, true);
         if (isset($bitly_data['data']['url'])) {
            $bitly_url = $bitly_data['data']['url'];
         }
      }
   }
   return $bitly_url;
}

O endereço URL que é retornado é carregado permanentemente na cache bitly_short_url através de um Custom Field. O endereço URL curto é agora parte da meta-data geral do post e pode ser usado em contextos além do botão de Tweet.

A API do Twitter é usada para saber o número de tweets para o link permanente URL do post. Este número, juntamente com a hora a que foi requesitado, é guardado em cache no Custom Field retweet_cache. Quando o intervalo de cache passar, é feita uma chamada à API que volta a retornar o número de tweets e verifica o valor com a query retweet_cache de forma a confirmar se existe atualização do número ou não. Se o número for maior, o valor do campo retweet_cache é atualizado automaticamente.

O conteúdo do tweet é criado automaticamente usando algumas propriedades do URL http://twitter.com/share. O título da postagem inícia o conteúdo; o endereço URL curto é passado para o Twitter como o endereço a ser mostrado nos tweets; o endereço permanente URL é passado para o Twitter como o URL a ser contado; e o username é declarado.

$twitter_params =
'?text=' . urlencode($title) .
'&url=' . urlencode($short_url) .
'&counturl=' .urlencode($url).
'&via=' . $twitter_via .
//'&related=' . $twitter_related .
''
;

A saída original do HTML é muito simples e pode ser totalmente customizada. Para mostrar a contagem de tweets verticalmente, adicione a classe vcount.

<div>
   <a
      rel="external nofollow"
      title="Partilhar artigo no Twitter"
      href="http://twitter.com/?query-string-params"
      target="_blank">Tweet este artigo</a>
   <span>259</span>
</div>

OUTRAS FUNCIONALIDADES

Se você desejar que a contagem de Tweets linke para os resultados de pesquisa do Twitter para o endereço URL da sua postagem, você terá de adaptar o código de forma a que o span seja substituido por um link que aponte para uma pesquisa do Twitter pelo seu URL. É uma troca relativamente simples de efectuar.

Se tiver alguma modificação ou dificuldade de implementação, não deixe de ir ao repositório.