Como colocar o Twitter no seu blog (quase sem programar)

Essa semana tive que implementar em um box com os últimos tweets de determinada conta, em um blog para um cliente da MM Café.

A solução mais simples que encontrei foi consumir os dados da API do twitter através do javascript mesmo. Para isso busquei uma solução pronta e a melhor que encontrei foi o Twitterjs. Script extremamente simples de usar, você pode fazer o download da última versão no Google Code ou utilizar o hotlink direto, como no exemplo abaixo:

<script 
  src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"
  type="text/javascript">
</script>

Com o script linkado na sua página tudo o que você precisa é chamar a função que irá requisitar os tweets e passar as configurações desejadas.

Um exemplo simples, que será explicado após o código:

getTwitters("myTweets", { 
  id: "andafter", 
  count: 10, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: "<li> %text% <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a></li>"
});

No exemplo acima eu vou exibir no meu elemento html com id "myTweets" os últimos 10 tweets do @andafter em forma de lista. O html é simples:

<ul id="myTweets"> <li>Aguarde, carregando tweets...</li> </ul>

Pronto!

Agora vamos a algumas explicações, primeiro das configurações quando você chama a função:

Opções de configuração

Agora vou explicar as configuração quando você chama a função:

• id: seu user no twitter
   
• count: quantidade de tweets exibidos
   
• clearContents: se for true, limpa o elemento html que carregará os tweets
   
• enableLinks: true/false – deixa os links do tweet clicáveis
   
• ignoreReplies: true/false – exibir ou não os seus replys para outras pessoas

• template: o HTML que irá exibir o tweet, neste item que irão as variáveis do tweet , que são explicadas mais a frente neste post
   
• prefix: mensagem exibida antes de cada tweet (no caso de não usar template)
   
• timeout: Millisegundos antes de executar a ação do "onTimeout"
   
• onTimeout: função executada quando o tempo setado acima acaba
   
• newwindow: true/false – define se os links dos tweets irão ou não abrir em uma nova janela (ou aba)
   
• callback – Função chamada quando completa a requisição e exibição dos tweets. Esta função não é chamada em caso de timeout.

 

Variáveis do template

Abaixo a explicação das variáveis que você pode usar para exibir seus tweets (no item "template" da configuração):

• text – a mensagem do tweet
   
• id – id do tweet
   
• time – tempo "amigável" da postagem, ex: 2 hours ago
  
• created_at – tempo da criação
   
• user_name – Nome do usuário
   
• user_screen_name – Username
   
• user_id – ID do usuário
   
• user_profile_image_url – Avatar do user
   
• user_url – Url do user
   
• user_location – Localização do user
   
• user_description – Bio do user

 

 

 E o resultado, já apresentei lá em cima, segue um exempo um pouco diferente:

getTwitters("myTweets", { 
  id: "andafter", 
  count: 10, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: "<li> %text% <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a></li>",   timeout: 15,   onTimeout: function(){     alert("No momento o twitter não está respondendo.");       }
});