Crie um Widget Personalizado do Twitter Sem um Plugin

Fui perguntado algumas vezes sobre qual plugin do WordPress eu uso para gerar a lista "Feed do Twitter" no rodapé do meu site. Na verdade, eu não uso nenhum plugin, é um trecho de Javascript do Twitter que exibe uma lista dos meus tweets recentes que eu estilizei com CSS. Neste tutorial, eu mostrarei a você:

• O código HTML e Javascript necessário para buscar os tweets mais recentes
• Uma visão geral do markup HTML e dos seletores CSS associados
• Dois exemplos de widgets personalizados do Twitter que eu mesmo usei

Continue lendo para ver o resto do tutorial...

O HTML e o Javascript

O Twitter costumava fornecer este código em seu site, mas por algum motivo o removeu em favor destes widgets muito menos flexíveis. Você precisará de dois trechos de código.

Primeiro, coloque o seguinte código onde você quer que a lista apareça:

<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>

Observação: O <li>Twitter feed loading</li> não faz parte do código original fornecido pelo Twitter, mas é necessário para que o HTML seja válido. Ele também pode fornecer uma mensagem útil enquanto o feed está carregando, pois pode levar alguns segundos em um dia lento.

Segundo, você precisará colocar as seguintes linhas de Javascript o mais perto possível da tag </body>.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>

Atualmente, eu o tenho logo acima do meu código do Google Analytics. Você deve manter essas linhas de Javascript o mais baixo possível na página, pois, caso o Twitter não carregue, tudo abaixo desse código ficará pendurado (o que não é um grande problema se já estiver no final).

Visão Geral do Markup HTML e Seletores CSS

Agora você não pode ver o markup HTML que o widget do Twitter gera sem usar algo como a Barra de Ferramentas do Desenvolvedor Web. Sorte sua, eu fiz isso por você. Aqui está uma lista de exemplo com apenas um tweet como exemplo.

<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>

• #twitter_update_list – Seleciona a lista inteira
• #twitter_update_list li – Seleciona itens individuais da lista
• #twitter_update_list li span – Seleciona a parte do “tweet” do item da lista, não o link de tempo atrás
• #twitter_update_list li span a – Seleciona o link dentro da parte do “tweet” do item da lista
• #twitter_update_list a[style="font-size: 85%;"] – Seleciona o link de “tempo atrás”, de uma forma um tanto improvisada (veja a nota abaixo).

Nota: Como há um estilo inline no link de tempo atrás que define o tamanho da fonte em 85%, torna-se um pouco difícil de substituir sem um código improvisado. Eu já usei isso antes para redefinir o tamanho da fonte para o mesmo do resto da lista:

#twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; }

Isso provavelmente não funciona em versões antigas do IE por causa da parte “!important”. Você também pode usar display: block; para mover esse link para a próxima linha.

Exemplo ao Vivo

Para um exemplo ao vivo, confira o rodapé do Theme Lab. Ou, se você estiver lendo isso em seu leitor de feed ou em um site de scraping não autorizado, confira a captura de tela abaixo.

Aqui está o código que uso para a lista:

#twitter_update_list {
	font-size: 13px;
	line-height: 21px;
	list-style: none;
	}
#twitter_update_list li {
	background: url('images/twitter-divider.gif') bottom left repeat-x;
	padding-bottom: 7px;
	margin-bottom: 9px;
	}
#twitter_update_list span, #twitter_update_list span a {
	color: #ababab;
	text-decoration: none;
	}
#twitter_update_list a {
	color: #6f7276;
	}

• A primeira linha seleciona a lista inteira. Ela define o tamanho da fonte, a altura da linha e garante que nenhum marcador apareça.
• A segunda linha faz uma pequena imagem de 2×1 repetir abaixo de cada item da lista como uma espécie de divisor. O preenchimento define o espaço entre o tweet e a borda superior do divisor. A margem define o espaço entre a borda inferior do divisor e o próximo tweet.
• A terceira linha define a cor do tweet, incluindo links, e garante que nenhuma linha apareça abaixo dos links.
• A última linha define a cor do link de “tempo atrás”.

E é isso! Se eu tivesse que mudar uma coisa, eu diferenciaria os links dentro do tweet de alguma forma, e talvez adicionaria efeitos de hover nos links também.

Isso Pode Ser Usado em Qualquer Site

Ao contrário de todos os outros posts de como fazer XYZ sem um plugin por aí, nenhum código real do WordPress é usado neste tutorial.

Como este não usa nenhum código do WordPress, ele não está arquivado na coleção Tutoriais do WordPress. Ele pode ser usado em praticamente qualquer tipo de site, assumindo que você possa editar o código-fonte HTML e CSS.

Se você quiser usá-lo dentro do WordPress, sugiro editar manualmente os arquivos do seu tema para inserir as duas linhas de Javascript no rodapé do seu site, ou até mesmo conectá-lo ao seu hook wp_footer().

Quanto ao widget em si, você pode colar o código dentro de um widget de texto ou codificá-lo manualmente na sua barra lateral (ou onde quer que seja).

Conclusão

Espero que todos tenham gostado do tutorial, adoraria ouvir suas opiniões nos comentários. Se você tiver algum pedido de dicas rápidas de WordPress ou CSS, sinta-se à vontade para me informar. Pode ser apresentado em um futuro post da Terça-feira de Tutoriais no Theme Lab!