Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

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.

Tweets Recentes

Demo

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.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

49 Comentários

  1. Nathalia disse:

    Boa Tarde,

    Coloquei esse Gadget no meu blog porem os twitts nao aparecem

    Pode me ajudar?

    • Vanessa disse:

      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.

  2. luiz barros disse:

    gostaria de saber como muda a cor da letra pois no meu blogf ta aparecendo letra branca e tem que ser preta..

  3. querida coloquei esse widget no meu blogger mais ele não aparece as ultimas postagens do twitter o que devo fazer

  4. ? Júlia Madureira disse:

    Seria melhor se atualiza se este post informando onde colocar a imagem que dipponibilizou

    deste jeito o tutorial fica incompleto

  5. .:: Clau ::. disse:

    Almas para o Reino
    vc pode substituir a imagem, desde que não retire os créditos do widget (que é o link do MB).

  6. Almas para o Reino disse:

    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

  7. .:: Clau ::. disse:

    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.

  8. Nany disse:

    Oi, Clau!

    Como faço pra escrever o nome do meu blog no lugar onde está aqui no seu widget "Mundo Blogger"?

  9. Elizabeth Passos disse:

    Gostaria de saber como diminuir para caber na minha coluna certinho? Isso pode? Bom deu certo apareceu, mas queria diminuir a caixinha!

  10. .:: Clau ::. disse:

    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.

  11. Ian Filipe disse:

    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!

  12. Ferreira disse:

    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…

  13. Portal H3 Habbo disse:

    eu queria um gadget desses pra marcar meus favoritos

  14. Sybylla disse:

    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!

  15. .:: Clau ::. disse:

    S.
    Sinceramente, eu não faço ideia do que pode ter acontecido.

  16. S. disse:

    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á (:

  17. Gontijø disse:

    Muito boa essa idéia!!!
    Adorei!!
    Parabéns! ;D

  18. Dê Lima disse:

    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! (:

  19. .:: Clau ::. disse:

    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.

  20. Guh Sama¹³ disse:

    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 !

  21. Isabella F. disse:

    Eu personalizei modifiquei a imagem. Foi fácil pessoas é só alinhar a bagaça toda uhauhaua

  22. Edu Gueds disse:

    Então Clau, mas não aparece nenhum Twit!

  23. .:: Clau ::. disse:

    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.

  24. Edu Gueds disse:

    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.

  25. Nerd Flanders disse:

    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!

  26. Lukas disse:

    Obrigado 🙂

  27. .:: Clau ::. disse:

    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.

  28. Lukas disse:

    Clau,o que coloca em twitter link? o meu endereço?

  29. .:: Clau ::. disse:

    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 😉

  30. drikeity disse:

    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!!!

  31. raficha disse:

    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…

  32. .:: Clau ::. disse:

    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 ^^

  33. comandoblogger disse:

    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!

  34. .:: Clau ::. disse:

    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.

  35. Dantas Neto disse:

    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.

  36. allanpoe4 disse:

    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).

  37. cafeblogueiro disse:

    @.:: Clau ::. quem sabe um dia meu blog tenha tanto sucesso , parabens pelo artigo

  38. Will disse:

    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!

  39. .:: Clau ::. disse:

    Jamis Henrique
    Aff…tá vendo o q é q dá fazer um monte de coisas ao mesmo tempo?rs
    Obrigada por me avisar…já corrigi…^^

  40. Jamis Henrique disse:

    Oi Clau, ótimo Widget!!

    Só uma correção, aonde esta faltando um < em div id="twit">

    Parabéns!

  41. .:: Clau ::. disse:

    Acabei de testar o código de novo num blog de testes…se quiserem conferir:
    http://teste-blog10.blogspot.com

  42. .:: Clau ::. disse:

    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…

  43. mundodadanca1 disse:

    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.

  44. .:: Clau ::. disse:

    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!

  45. .:: Clau ::. disse:

    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.

  46. Rickzinhocps disse:

    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 !

  47. Fabiano Roberto disse:

    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

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.