Redes Sociais Widget Vanessa S.
Widget Tweets Recentes personalizado
Algumas pessoas me perguntaram sobre o widget que eu uso aqui no Mundo Blogger, onde aparece os meus tweets mais recentes dentro de um box com um ícone do Twitter, que está localizado na coluna esquerda do footer.
Bom, esse widget foi totalmente customizado por mim, mas vou ensinar como instalá-lo no seu blog.
O funcionamento deste widget é feito através do script Twitter Update, disponibilizado no Blogger.
O que eu fiz foi personalizar completamente ele, criando uma imagem em forma de um box e fazendo que meus tweets apareçam somente dentro deste box.
Quer instalar esse widget no seu blog também?
Então vamos lá!
A instalação é bem fácil.
Vá até o menu “layout” ? Clique em “Adicionar um gadget”? Escolha tipo “HTML/Javascript”.
Copie e cole este código abaixo:
<div id="twit">
<div id="twitter_div">
<h2 style="display:none;" class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:center;font-family:Arial;color:#333;width:200px;font-size:8px;text-decoration:none;padding-top:30px;" href="https://www.mundoblogger.com.br/" target="_blank">.</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USERNAMETWITTER&include_rts=1&exclude_replies=true&callback=twitterCallback2&count=2" type="text/javascript"></script>
<a id="twitter-link" style="display:block;text-align:left;font-size:8px;font-family:Arial;padding-left:9px;text-decoration:none;" href="https://www.mundoblogger.com.br/2010/09/widget-tweets-recentes-personalizado.html">Instale este widget</a>
</div>
<style type="text/css">
#twit{background: transparent url(http://4.bp.blogspot.com/_3eh_nW6DoIE/TIl2-ZZHkXI/AAAAAAAABFs/xlNqMjTcJNs/s1600/twitter-update-image-by-clau.png) no-repeat;width:200px; height:278px;}
#twitter_div{width:50px; height:145px;padding:15px;}
#twitter_update_list{width:150px; height:80px; margin:2px 5px 0 5px; padding:2px 10px 10px 5px; overflow: auto;text-align:left;font-size:11px;}
</style>
No código acima inclua o seu username do twitter no local indicado (destacado em vermelho).
Em count=2 você pode alterar a quantidade de "Tweets" que você quer que apareça no widget, basta alterar o número 2 para o número que quiser.
No meu caso, eu preferi que aparecessem apenas os 2 últimos tweets, mas você pode alterar essa quantidade.
Só altere os campos que estão destacados em vermelho.
Por favor, não retirem os créditos deste widget!
Afinal de contas, me deu trabalho personalizá-lo completamente de modo que as mensagens se encaixassem direitinho dentro do box que eu criei!
[ATUALIZAÇÃO]
Algumas pessoas relataram que ao instalar este widget a imagem que eu criei não está aparecendo. Pode ser que seja problema de hospedagem, ou problema no meu álbum do picasaweb, então para facilitar, vou disponibilizar abaixo, a imagem que eu criei para que vocês possam salvá-la no pc e hospedaá-la no seu site preferido:
P.s: salvem a imagem na resolução PNG.
Artigo atualizado em dezembro/2012.
Boa Tarde,
Coloquei esse Gadget no meu blog porem os twitts nao aparecem
Pode me ajudar?
Como vc pode verificar no blog de testes que eu usei para aplicar este recurso, ele está funcionando perfeitamente(veja blog Demo). Vc deve ter feito algo errado. Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.
gostaria de saber como muda a cor da letra pois no meu blogf ta aparecendo letra branca e tem que ser preta..
No trecho
#twitter_update_list{inclua
color:#000000;querida coloquei esse widget no meu blogger mais ele não aparece as ultimas postagens do twitter o que devo fazer
Seria melhor se atualiza se este post informando onde colocar a imagem que dipponibilizou
deste jeito o tutorial fica incompleto
Almas para o Reino
vc pode substituir a imagem, desde que não retire os créditos do widget (que é o link do MB).
Parabéns, muito legal, gostei mesmo.
Só um detalhe, posso adicionar, mais mudar a imagem? Tenho um blog evangélico e gostaria de por uma imagem que combinasse mais com meu blog, posso?
Desde já obrigado
Nany
Não é para retirar o nome do Mundo Blogger, pois este trecho são os créditos do widget e eles devem ser mantidos em seu formato original.
Oi, Clau!
Como faço pra escrever o nome do meu blog no lugar onde está aqui no seu widget "Mundo Blogger"?
Gostaria de saber como diminuir para caber na minha coluna certinho? Isso pode? Bom deu certo apareceu, mas queria diminuir a caixinha!
Ian Filipe
Vc pode editar a imagem sem problema nenhum, a única coisa que peço é que não retire o link para este post.
Clau eu posso editar essa imagem que você disponibizou? Dá uma olhada no footer do meu blog (em desenvolvimento) e vê se você aprova eu preservei o "Instale esse widget" com o link para essa postagem!
eu to meio perdido…tipo eu não to conseguindo…não ta aparecendo a imagem…e como sou iniciante com HTML eu não sei onde colocar o link da imagem que vc disponibilizou…é uma pena pois é um ótimo widget…me amarrei no seu blog…
eu queria um gadget desses pra marcar meus favoritos
Adorei a dica, mas os tweets ficam muito juntos e difícil de ler… Dá para diferenciar com um ícone pequeno? Ou isso tem que ser enviado com o tweet?
Parabéns, o site é show!
S.
Sinceramente, eu não faço ideia do que pode ter acontecido.
Olá olá, então. eu tinha feito uma "maracutaia" dessas juntando o código do twitter updates com um código de tabela, pra pôr uma imagem que eu queria, um balãozinho. achei esse seu post a pouco, aliás, achei seu blog a pouco e tem me ajudado muito com alguns problemas meus! (:
tive que pôr cadeado no meu twitter e esqueci da existência do widget na hora, me arrependi, mas quando desbloqueei o twitter em seguida, não aparecem mais as atualizações no blog mesmo assim ): você sabe me dizer se tem como acertar isso? já estou procurando resolver a um tempão e não consigo! obrigada desde já (:
Muito boa essa idéia!!!
Adorei!!
Parabéns! ;D
Oii!
eu estava procurando uma maneira de fazer os RT automáticos aparecerem e cheguei no seu blog, nossa, ficou muito legal a sua customização parabéns! (:
Guh Sama¹³
Se vc observar, eu utilizo este recurso e aqui aparece tudo normalmente, porém, tais recursos podem variar de template para template. Sendo assim, não tenho como te ajudar.
Uma observação: se o seu perfil no twitter possui cadeado, os seus tweets não aparecerão.
Olá… então eu coloquei no meu blog, e a imagem sai tudo certinho.. Só q os tweets naum aparecem, e eu nem do mto RT !!
O q eu faço?
Ah, parabens pelo blog e os programas !
Eu personalizei modifiquei a imagem. Foi fácil pessoas é só alinhar a bagaça toda uhauhaua
Então Clau, mas não aparece nenhum Twit!
Edu Gueds
O seu endereço vc deve colocar em: USERNAMETWITTER, sem arrouba.
Se vc costuma dar muitos Rts, as vezes ocorre de alguns Rts não aparecerem, depende muito da mensagem original que vc deu RT.
OI Clau,
Consegui colocar a imagem mas quando coloco,não aparecem os Twits, eu tentei com o "arroba(@)" e sem o "arroba(@)",mas não deu certo,se quiser verifique no meu blog.
Eu adorei o gadget, mas o problema é que o seu anuncio não é em Blank nem e pop-up! mas de qualquer maneira muito obrigado!
Obrigado 🙂
Lukas
Não é para alterar nada ai, só altere os campos que estão destacados em vermelho.
O seu endereço vc deve colocar em: USERNAMETWITTER.
Clau,o que coloca em twitter link? o meu endereço?
raficha
Disponibilizei a imagem original para download no post, baixe-a e hospede no seu álbum favorito.
drikeity
Obrigada pelo comentário e seja bem vindo. Volte sempre aqui qdo precisar 😉
Nossa valeu mesmo pela dica ,eu sou iniciante ,não sei quase nada ,tô aprendendo bastante aqui no seu blog ,obrigado por dividir com a gente suas idéias .E se eu fiz alguma coisa errada me ajude ,não entendo muito ,mas acho que coloquei td direitinho dando seus créditos ,alias muito merecidos e justos .valeu!!!
Oi Clau, adorei esse widget… so que qd colco no meu blog, so aparece o q twittei a imagem n aparece….
estou errando alguma coisa so n sei o q…
comandoblogger
É que eu personalizei este widget apenas para ser usado com a imagem q eu criei. Se vc for alterar a imagem vai ter q quebrar a cabeça ai pra tentar editar tudo, tentando alinhar a imagem. Eu falei q esse widget deu trabalho pra ser personalizado..rs
Qdo eu criei o fiz para usar aqui no meu blog, mas o pessoal gostou tanto q eu resolvi disponibiliza-lo para todos usarem tb, mas deu trabalho pra personalizar e deixar tudo alinhado.
Boa sorte ai ^^
Clau, fiz um background – http://bitw.in/bRs – para este Widget mais não estou conseguindo acertar o alinhamento das letras com a imagem se você puder me ajudar ficaria grato ?!?
Até mais!
Will
Realmente, deu trabalho pra alinhar tudo, mas ainda bem que deu certo =P
cafeblogueiro
Obrigada pelo comentário!
allanpoe4
Realmente seria um bom widget, vou dar uma fuçada e ver o que descubro, e qualquer coisa eu posto aqui.
Dantas Neto
Pode usar sim querido. Que bom que gostou.
Oi, tudo bom? olha eu aqui de novo rsrs, eu gostei muito desse Widget, vou colocar ele em meu blog, e não se preocupe, os créditos serão mantidos ;)sei que deve dar trabalho para você fazer isso, e seria injusto alguem levar os créditos no seu lugar.
Parabéns pelo novo site e continue sempre assim 😉 até mais.
Clau… eu tenho curiosidade de saber qual o código do widget com as atualizações dos twitts especificos com o jogo da velha (#exemplo).
@.:: Clau ::. quem sabe um dia meu blog tenha tanto sucesso , parabens pelo artigo
Nossa Clau, ficou muito bonito mesmo!
Deve ter dado um trabalhão para criar aquela caixinha dentro do balãozinho, alinhadinha, MEU DEUS! rs
#recomendo
Abraços!
Jamis Henrique
Aff…tá vendo o q é q dá fazer um monte de coisas ao mesmo tempo?rs
Obrigada por me avisar…já corrigi…^^
Oi Clau, ótimo Widget!!
Só uma correção, aonde esta faltando um < em div id="twit">
Parabéns!
Acabei de testar o código de novo num blog de testes…se quiserem conferir:
http://teste-blog10.blogspot.com
mundodadanca1
já descobri o q era…eu hospedei a imagem no album do picasa…e sumiu…não sei pq, mas a imagem sumiu do album..eu hospedei de novo…e corrigi o código completo…
copia o código todo e tenta instalar ai no seu blog novamente…qualquer coisa, me avisa aqui…
Clau, desculpe mas não entendi. Coloquei este widget no meu blog, mas ele não apareceu nenhuma imagem. É assim mesmo, ou estou fazendo errado. Gostaria que ficasse igual o seu com esse passarinho.
Rickzinhocps
Vc por acaso não está tentando retirar os créditos desse widget para colocar o link dos seu blog e publicar como se tivesse sido vc quem o criou não né?
Pq pelo q vi nessa imagem q vc enviou aqui nos comentários, vc pegou a imagem q EU criei, editou colocando "widget by: (nome do seu blog)".
Eu espero q não seja na intenção de retirar os créditos de algo criado por mim!
Fabiano Roberto:
Pois é, o IEca sempre é um problema,né? Já percebeu q em alguns casos, mesmo utilizando filtros para fazer alguns efeitos funcionarem nele, ainda assim o efeito não fica igual aos demais navegadores? Por isso q eu odeio o IEca..rs
Obrigada por atualizar o link =P
Rickzinhocps
Era o link da imagem que estava com erro..já arrumei..tenta novamente.
lá clau, eu gostaria de saber como faço para personalizar o widget com esta imagem: http://img641.imageshack.us/i/imagem1gv.png/
Mas quando eu coloco o código dela no espaço "background" não funciona, aliás, nem o seu estilo funcionou …
Euja recortei a imagem e a redimencionei certinho,só falta adiciona-la ao widget !
Poderia me ajudar ?
Obrigado !
já atualizei o nome o link do seu blog em nossos top parceiros….
achei muito legal esse widget personalizado, eu estava lendo o outro post sobre degrade em CSS, é lamentavel para fazer a mesma coisa cada navegador usar um código diferente… até parece que gostam de dar trabalho para quem mexe com os códigos