Como criar widgets personalizados do twitter

Nem preciso mencionar que o Twitter é uma ferramenta de comunicação bem sucedida e poderosa. O post de hoje é para ensiná-lo a criar uma área para exibir suas atualizações no seu blog com o design que você desejar.

Existem diversos widgets prontos para fazer, alguns são recomendados pelo próprio Twitter no endereço: http://twitter.com/downloads. O twitter oferece uma ferramenta bem prática para você personalizar um widget e obter o código fonte para inserir no seu site ou blog. Quem quiser conferir basta acessar o endereço http://twitter.com/goodies/widgets.

Infelizmente a personalização é limitada, entre cores de fundo, cores dos textos, links e tamanho do widget. Que tal criar seu próprio design para exibir seus tweets?

Pre-requisitos do Tutorial

Dominar algum programa gráfico (Photoshop, Fireworks, etc)
Noções de HTML e CSS

Índice

Criando o Layout
Escrevendo o HTML e CSS
Inserindo o Script
Publicando

Criando o Layout

Abra o programa gráfico que você tem mais domínio. Defina primeiramente a largura na qual seu widget irá ocupar. O exemplo a seguir utiliza o Photoshop e a largura do widget será de 300px.

Você deve pensar em 3 áreas distintas:

O topo do widget
A área cujo serão exibidos seus tweets
O rodapé do widget

Como sugestão é interessante deixar o topo com a sua marca ou sua foto e no rodapé um link para segui-lo. Veja o modelo a seguir:

Design de widget para exibir os updates do Twitter

Com o design pronto você deverá começar a trabalhar com o HTML e CSS. Recorte seu layout em 3 partes:

Áreas de recorte da imagem para HTML e CSS

Escrevendo o HTML e CSS

O HTML também terá 3 blocos, ou melhor dizendo divs. Escreva a seguinte estrutura:


<div id="widget-twitter">
<div class="topo">
</div>
<div class="conteudo">
</div>
<div class="rodape">
</div>
</div>

Em seguida insira o conteúdo do topo e rodapé (textos, links e imagens):


<div id="widget-twitter">
<div class="topo">
<a href="http://www.rgbmagazine.com.br/" title="RGB Magazine"><img src="widget-topo.jpg" width="300" height="80" alt="RGB Magazine" /></a>
</div>
<div class="conteudo">
</div>
<div class="rodape">
<a href="http://twitter.com/rgbmagazine" title="RGB Magazine no Twitter">siga-me no twitter</a>
</div>
</div>

Após concluir o HTML personalize o CSS com as imagens, planos de fundo e cores.


/* div principal: defina a largura do seu widget */
#widget-twitter {width:300px; color:#502A02;}
#widget-twitter img {border:0;}
#widget-twitter div {margin:0; padding:0;}
#widget-twitter a {color:#730; font-weight:bold;}

/* conteudo: insira o plano de fundo e formate a tag <li> que irá exibir seus posts */
#widget-twitter .conteudo {background:url(widget-conteudo.jpg) repeat-y;}
#widget-twitter .conteudo ul {margin:0; padding:5px 35px;}
#widget-twitter .conteudo ul li {list-style-type:none; padding:10px 0;}

/* rodape */
#widget-twitter .rodape {height:62px; background:url(widget-rodape.jpg) no-repeat; padding:75px 35px 0;}

Inserindo o Script

Faltou o código dos updates não é mesmo? Este widget utiliza o formato de lista não ordenada (tags <ul> e <li>) para exibir seus updates. Para executá-lo basta inserir o seguinte código dentro da div específico para o conteúdo:


<ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/rgbmagazine.json?callback=twitterCallback2&amp;count=5"></script>

Importante: Não esqueça de inserir qual perfil do Twitter e quantos updates deverão ser exibidos. Observe onde alterar:

Perfil a ser exibido: entre o trecho “user_timeline/” e “.json”
Número de updates: No fim do script, logo após o trecho “count=”

Após inserir o script teste no seu navegador e formate a tag <li> da maneira que considerar mais conveniente.

Observações: a nomenclatura das classes e id’s atribuidos dentro do HTML podem ser alterados com exceção do id “twitter_update_list”, pois a mesma referência está dentro do script. Caso queira também pode salvar o arquivo javascript no dentro do diretorio do seu site, fica a seu critério.

Publicando

Seu widget já está pronto, lembre-se de testá-lo em vários navegadores para analisar se houve alguma falha no CSS. Quem usa o Wordpress pode criar um widget de texto e colar os códigos do html.

Agora você já sabe integrar seus updates do Twitter no seu blog, aproveite a dica e aumente a integração das mídias digitais com a sua marca.

Faça o download do widget criado neste tutorial: baixar arquivo.