Colocando mensagens do Twitter em um Site ou Blog
Uma maneira bem fácil e rápida de colocar mensagens (tweets) do Twitter em um site ou blog é usando a própria API do twitter. Da seguinte forma:
Insira no site/blog o seguinte código:
<ul id="twitter_update_list"></ul>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/o usuário.json?callback=twitterCallback2&count=número de mensagens" text="text/javascript"></script>
Bem simples, não!?
Um exemplo:
Meu twitter é: http://twitter.com/ruanmer
A quantidade de tweets que eu quero exibir é: 10
O código ficaria:
<ul id="twitter_update_list"></ul>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ruanmer.json?callback=twitterCallback2&count=10" text="text/javascript"></script>
* Dica: Se puder colocar os “scripts” no final do HTML (antes do </body>) melhora o carregamento do site.
Como estilizar:
Para estilizar o CSS é bem simples. A API trabalha com as tags <ul> e <li>, basta então você aplicar o seu CSS . Por exemplo:
#twitter_update_list {
width:200px; height:150px;
background-color:#CCC;
}
#twitter_update_list li {
font-size:9px;
margin:10px;
}
#twitter_update_list li a {
color:#0000CC;
}
Como botar no Site ou Blog:
No Site, basta adicionar o código no HTML no local desejado.
Já no Blog, você terá de criar um widget/gadget para inclusão de HTML no administrativo do Blog.
No Blogger, no painel de controle, vá em:
Layout > Elementos da página > Adicionar um gadget > Noções básicas > HTML/JavaScript
No WordPress, no administrativo, vá em:
Apresentação > Widgets > e escolha a opção Texto (Texto arbitrário ou HTML)
PRONTO!! Agora toda mensagem postada no Twitter escolhido será atualizada no seu site/blog.
* Obs: o novo sistema de retweet automático do Twitter não funciona com esse script. Ou seja, caso você dê um retweet automático, ele não vai aparece na sua lista de últimos tweets.
Ruan Mér
Trabalho na área de desenvolvimento web a mais de 3 anos, especificamente com diagramação de interface web (front-end), usando as tecnologias xHTML, CSS, javascript com a biblioteca jQuery e a criação de sites com WordPress. Ver portfólio >>
Mto bom esse post… eu estava procurando isso mesmo.. vlw..
E o Site esta mto bom, tem ótimos conteudos.!!
Bom dia, primeiramente parabéns pelo blog, muito (clean), com conteúdo de qualidade, gostei também muito da forma como você explica as matérias: simples, esclarecedor e objetivo.
Continue sempre assim !
Abraços.
Poxa muito bom!
simples e eficiente!!
se eu quiser colocar um marcador entre um tweet e outro, tem como? muhrilo@msn.com
NOSSA ADOREI A DICA FICOU MASSA!VALEU!BJOKAS.
Ola brother, qndo insiro no meu site, e ao abrir a página aparece a janela de loggin do tiwtter, onde estou errando, so fiz copiar e colar numa tabela do site e por a quantidade e mensagens e meu edn no twitter
???
Obrigado.
@Jow tem o exemplo disso online para eu ver onde tem o erro?
Bom dia!
Eu coloque o código e funcionou perfeitamente no Firefox, mas no Explorer 8 não está exbindo as mensagens do twitter. O que tenho que fazer para também funcionar no Explorer??
Abs!
@Wallace Campos
Nunca tive problema com o código no IE 8 ou inferiores. Deve ter algum erro de HTML ou CSS no site. Sabe como é o IE neh…. rs
te enviei um email pedindo o endereço do site online para eu dar uma olhada.. abs
Ruan, vc é o cara! Parabéns! Simples e objetivo! abraçossss
Ruan, tudo bem?
Este script não funciona com o internet explorer 9. Vc tem algum que funcione nele?
Abraços e parebens!
Luciana o twitter tem um serviço proprio agora para criar esse tipo de coisa
veja: http://twitter.com/about/resources/widgets
abs
Ruan,
Eu tb estou com o mesmo problema, não aparece nada no Internet Explorer, mas quando testo a página no Firefox funciona tudo perfeitamente. Cheguei a criar uma página vazia só com o código que esse novo serviço de integração que o Twitter disponibiliza. Pois na verdade usei o código deles desde o inicio, agora acabei de usar o seu exemplo de código e aconteceu a mesma coisa.
Muito bom adorei!
olá, adorei as dicas, mas tb não consigo colocar o codigo gerado no widget do twitter no meu site. Tenho o internet explorer e trabalho pelo uol host. Será que devo tentar no Firefox? Obrigada