Redes Sociais Widget Vanessa S.
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.
Parabéns pela iniciativa! Por acaso vc poderia me dizer como fez para traduzir a parte do tempo que foi postado a mensagem?
parabés pelo post já ta colocado no meu bloguinho rsrsrs to em construção e ta totalmente desconfigurado mais obrigado clau
Parabéns, muito bom o TUTORIAL, eu usava o padrão do Twitter e achei que ficou pesado Estou estruturando um Blog e adorei a dica, ficou lindo! Vou voltar aqui mais vezes!
Olá Clau,
Antes de tudo gostaria de dizer que seu blog é muito bom e em relação a outros da net o seu é muito fera.
Mas Clau estou com um problema sobre este Widget do twitter, gostaria de editá-lo e remover a imagem do twitter abaixo dele, pois ja tenho outras imagens e acho que fica meio poluido.
Como faço para editar e remover?
Obrigado.
Att.
Eduardo.
Ola Clau, primeiro, gostaria de parabenizar vc pelo excelente trabalho que faz em seu blog.
Agora vamos a minha duvida, gostaria de saber se é possivel, adicionar mais de um twitter, por ex:
Meu blog é sobre futebol, gostaria que o twitter de jogadores,tecnicos,reporters,etc, ficassem de forma rotativa aparecendo, não sei se consegui ser claro na minha duvida, mas se vc conseguir entender, gostaria de saber se é possivel apartir do seu codigo.
Agradeço antecipadamente, parabéns novamente.
at, Rogério.
Shirley Yáñez
É que o js é do twitter e o link direciona para a pagina inicial do twitter mesmo.
Brasigrega
Se o seu perfil do twitter tiver cadeado, os seus tweets não aparecerão mesmo.
Eu copiei o código do "Atualizações do Twitter no blog com Efeito", coloquei o nome da minha conta.Mas só aparece o local colorido, não aparece meus twitt's ???
Meu link é http://marciagrega.blogspot.com
O follow me não está direcionando para a minha página no twitter, mesmo eu colocando o link certinho… o que posso estar fazendo errado? Beijos querida! Shirley
Olha, eu preciso dizer que estou completamente encantada com você. Eu estou me superando com seus tutoriais e indicando para várias amigas blogueiras iniciantes como eu. Achei essa barra de atualização muuuuito bacana, queria só saber se dá para ela rolar apenas quando o twitter for atualizado e não ficar rolando direto. Outra coisa, mexi no html e consegui inseri no seu passarinho lindo o meu end de twitter no follow me! Mas fiz questao de deixar o nome do seu blog, primeiro pq seria um crime tirar e segundo porque eu estou muito orgulhosa com o seu trabalho.
De verdade, se achar que não posso fazer isso, me avise, tá. Mas eu estou mto feliz por conhecer seu trabalho. Felicidades! Shirley
Eu nem acredito!!! Estou conseguindo instalar vários HTMLs com os seus tutoriais!!! Ainda não consegui acertar o do Posts recentes como slide, mas não vou desistir!
Deixa eu perguntar uma coisa, dá para mudar o passarinho que fica na caixinha? É que eu tenho um passarinho "personalizado.
Outra pergunta de leigo, dá para colocar nas atualizações o que é retwitado tb?
Ultima pergunta, vi que ele fica repetindo o que escrevi no twitter. Por acaso dá para ele rodar apenas quando tiver atualização?
Beijos e desculpa tantas perguntas, é que eu fiquei tão empolgada por conseguir, vc nem sabe!
Se quiser olhar o resultado dos seus tutoriais la no blog, ficará orgulhosa de mim. Não entendo nada de html!
Beijos,
Shirley
Marilene,
???????
Já atualizei a imagem. Obrigada pelo aviso.
Clau, o icone do Tinypic não está funcionando.
Parece que o site fechou para os extrangeiros . . .ou algo assim =/
gostei muito disso so que não aparece mais o gif da pra vc atualizar por favor ia ser muito bom poder usar- lo vc faz muito bem essse tipo de coisa vlw
Lucas
Mas eu faço background pro Twitter sob encomenda.
Cheguei até a pensar em criar alguns pra disponibilizar para uso gratuito, o problema é o tempo que anda escasso demais.
Nossa Clau,visitei seu twitter hoje e vì que você trocou o background,ficou PERFEITO!
Alèm de Templates & Ìcones,porquê você não disponibiliza backgrounds gòticos para twitter tambèm? Ia ser uma boa,aì você adiciona isso na sua lista de serviços,gostou da sugestão? rsrsrs =]
Olá Clau, bom dia!
Gostaria primeiramente de te parabenizar pelo excelente site, segundo queria dizer que estou, usando esse seu Widget, mas fiz algumas personalizações. Porém não removi os créditos em respeito ao seu trabalho!
Continue a fazer esse excelente trabalho!
Vládia Queiroz:
Vc pode tentar colocar a #hastag no lugar de "nome-do-usuario". Eu não sei se funciona e se dá certo, vc vai ter q testar.
Sobre exibir os seus RTs, vc pode usar o "twitter trackbacks" (tem o tutorial dele publicado no menu: tutoriais blogger)
Sobre esses outros recursos q vc citou, eu não conheço.
Obrigada pelo comentário, volte sempre.
Clau, você tem dicas e tutoriais ótimos! faz um trabalho muito bacana! parabéns e obrigada.
olha, eu tava procurando uma solução como essa, só que para uma hashtag específica. já tentei usar o que o twitter disponibiliza, mas não funciona por causa do idioma, creio. e eu queria um que não tivesse aquele nome twitter azul em cima. gostei da sua customização. será que tem como adaptar para ser hashtag, em vez das updates? podia ser também, em vez de exibir a hashtag, exibir os retwits que recebo. preciso disso para uma teleperformance. também tô procurando um código que me permita criar uma scroll horizontal com os meus seguidores, para eles ficarem rolando na página infinitamente. se souber de algo parecido me avisa. ok? se quiser colaborar com o projeto, trata-se de um projeto acadêmico, posso divulgar seu blog como colaborador.
Oi DAS,
Não tem amiga, pq o tamanho da fonte segue as mesma configurações de fonte da sidebar…
só dá pra alterar as cores mesmo…no meu blog de demo tá grande pq eu configurei a fonte maior pra sidebar…
depois eu posso ver se mexo mais nesse widget e vejo se há uma maneira de deixar o usuario livre pra alterar tamanho de fonte, se houver eu te aviso tá?
Dois comentários pro mesmo assunto… ¬¬ foi mal…
Clau, tem como aumentar a fonte?
Na sua demo, tá grande…
Beijo!
dani
Clau, que blz!
Adorei! o/
Valeu pela ótima dica!
Beijo e paz!