Como Mostrar Tweets Recentes no Blog – Sem Usar Plugins

0
684

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.

- Publicidade -

Receba atualizações do Tutoriart

É grátis, e você pode escolher entre receber só sugestões sobre arte, design gráfico, Photoshop, etc, ou só sobre WordPress, blogging, design web, snippets, etc. Ou tudo, se preferir!

Quero assinar...
Ao assinar, você concorda com os Termos de Privacidade.

DEIXE UMA RESPOSTA

Por favor, digite seu comentário!
Por favor, digite seu nome aqui