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.

10 Coment谩rios em “Colocando mensagens do Twitter em um Site ou Blog”

  1. Helam diz:

    Mto bom esse post… eu estava procurando isso mesmo.. vlw..
    E o Site esta mto bom, tem 贸timos conteudos.!!

  2. angelo rogerio rubin diz:

    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.

  3. Christian diz:

    Poxa muito bom!
    simples e eficiente!!

  4. se eu quiser colocar um marcador entre um tweet e outro, tem como? muhrilo@msn.com

  5. manupink diz:

    NOSSA ADOREI A DICA FICOU MASSA!VALEU!BJOKAS.

  6. Jow diz:

    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.

  7. Ruan M茅r diz:

    @Jow tem o exemplo disso online para eu ver onde tem o erro?

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

  9. Ruan M茅r diz:

    @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

  10. Ruan, vc 茅 o cara! Parab茅ns! Simples e objetivo! abra莽ossss