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.");       }
});