Diversos

Como Mostrar Tweets Recentes no Blog – Sem Usar Plugins

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

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/javascripts/blogger.js"></script> 
<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:

<div id="twitter_update_list"></div>

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:

<ul id="twitter_update_list">
<li>
<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>
</li>
</ul>

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):

#twitter_update_list li {
list-style-type: none; /* remove os marcadores da lista */
}
#twitter_update_list li span {
color: #ff0000 /*muda a cor do texto dos tweets */
}
#twitter_update_list li span a {
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.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin