quarta-feira, 25 de maio de 2011

Atualizações do Twitter no blog com Efeito

É notório que o Twitter cresce a cada dia mais, e como todos sabem, a maioria dos usuários usam o Twitter para divulgar conteúdos de seus blogs.
Muitos blogueiros utilizam um widget do Twitter para postarem suas "Twitadas" no blog, onde as atualizações aparecem automaticamente na sidebar, e os leitores acompanham em tempo real as 'updates' do seu twitter.
O próprio Twitter disponibiliza um widget para isso. Eu achei isso interessante, mas, como uma boa "curiosa" que sou, resolvi dar uma analisada nos widgets disponibilizado pelo twitter.
Encontrei um onde as atualizações do twitter aparecem no seu blog com efeito rotativo. E foi o que achei mais interessante.




Neste Widget, aparece o seu avatar do Twitter no topo, e todas as mensagens que você recebeu ou enviou no dia.
Só que o código deles é todo em inglês, então eu fiz algumas alterações no código, traduzindo-o totalmente e implementando algumas "cositas mas", que no original não tinha.
O widget original foi criado por Dustin Diaz.
O código que vou postar aqui para vocês foi modificado por mim, com base no código original.

Se você quiser inclui-lo também em seu blog, vá até 'design' → 'Elementos de página' → Clique em 'Adicionar gadget'→ Escolha tipo 'HTML/Javascript'.

Copie e cole o código abaixo:


<script src="http://dl.dropbox.com/u/3173073/Widgets/tweet-update-rotativo.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 4000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#000000',
color: '#ccc4cc'
},
tweets: {
background: '#000000',
color: '#e0dce0',
links: '#787a78'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('NOME-DO-SEU-TWITTER').start();
</script>



Personalizando as cores do widget no código:


Você pode alterar as cores de fundo e cores do texto de acordo com o estilo do seu template.

Para personalizar as cores de fundo do widget basta alterar os valores referentes no trecho abaixo:
shell: {
background: '#000000'
-> cor do plano de fundo
color: '#ccc4cc' -> cor do texto


Para personalizar as cores onde aparecem o texto e os links das atualizações, basta alterar os valores referentes no trecho abaixo:

tweets: {
background: '#000000'
-> cor do plano de fundo
color: '#e0dce0'-> cor do texto
links: '#787a78'-> cor dos links

Em: rpp: 5
você pode alterar a quantidade de "Twitadas" que você quer que apareça no widget, basta alterar o número 5 para o número que quiser.

Não esqueça de incluir no código o nome do seu Twitter, no local indicado, caso contrário não funcionará.

A demo deste widget pode ser conferida aqui.

Este código foi modificado e traduzido a partir do código original disponibilizado pelo próprio Twitter, em inglês.


Se preferir, confira outro widget Twitter update na sidebar (sem o efeito rotativo), onde as 'updates' aparecem na sidebar de forma simples sem efeito algum.

0 comentários:

Postar um comentário