Como Mostrar Tweets Recentes no Blog - Sem Usar Plugins - Tutoriart
By Daniel Lemes 21/08/2012 3 Mins Read
As redes sociais são fundamentais no nosso trabalho com blogs e ainda que já tenha tido um momento mais forte, o Twitter continua sendo um importantíssimo espaço para divulgação.
Quase todo mundo tem uma conta no Twitter, seja ela pessoal ou vinculada ao seu projeto, e é comum exibir os tweets recentes no blog, alguns na sidebar, outros no footer ou posições diferenciadas. Alguns ainda usam plugins pra isso e como já cansamos de saber, eles são maus se usados em excesso, então vamos eliminar esses também e chamar tweets com poucas linhas de código e um pouco de prática.
Você vai precisar carregar dois scripts, faça isso no footer.php do blog (no arquivo footer.php, coloque antes da tag de fechamento da body).
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Blog_Aprendiz.json?callback=twitterCallback2&count=5"></script>
Com isso, vamos usar a API do Twitter (API = Application Programming Interface, em resumo uma forma de intereagir com sites e serviços, com pedidos de dados e respostas) para pegar as "tuitadas" recentes. A conta é definida na segunda chamada de script, antes do .json. No exemplo, seria o Twitter aqui do Blog Aprendiz (@Blog_Aprendiz), então é só mudar para o que você quer. O count=5 no final determina que serão exibidos 5 tweets. Você pode reduzir ou aumentar, se quiser.
Em síntese, a estrutura é essa (troque os valores em maiúsculas pelo que é indicado):
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/SEU-NOME-DE-USUARIO-NO-TWITTTER.json?callback=twitterCallback2&count=NUMERO-DE-TWEETS-DESEJADOS"></script>
Nenhuma dúvida até aqui, certo? Agora basta colocar isso onde você quer que os tweets sejam carregados:
Só isso. Pode ser dentro de um widget, no código da página (dentro do footer, single, etc). Basta saber o lugar em que quer colocar os tweets.
Isso vai render uma lista com seus tweets recentes, no formato:
<span>[Conteúdo do tweet] <a href="[link]">[link]</a>
</span> <a style="font-size:85%" href="[link de exibição do tweet]">about X hours ago</a>
Para estilizar sua lista, repare que ela tem um id (twitter_update_list) de CSS. Fica fácil usar; só inserir na sua folha de estilos (style.css):
list-style-type: none; /* remove os marcadores da lista */
color: #ff0000 /*muda a cor do texto dos tweets */
color: #ffcc00 /*muda a cor do texto com link dos tweets */
E assim por diante. Se você "tiver as manhas" do CSS, pode fazer coisas bem legais, como colocar o pássaro do Twitter ali por perto, alterar a cor da fonte, essas coisas. O caminho está aí, use como quiser.
Na página de desenvolvedores do Twitter, tem a documentação completa, com todos os parâmetros, se quiser se aventurar, boa sorte.