28.08.2009

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.

18 respostas a "Colocando mensagens do Twitter em um Site ou Blog"

  1. Helam disse:

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

  2. angelo rogerio rubin disse:

    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 disse:

    Poxa muito bom!
    simples e eficiente!!

  4. Murilo Botega disse:

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

  5. manupink disse:

    NOSSA ADOREI A DICA FICOU MASSA!VALEU!BJOKAS.

  6. Jow disse:

    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 disse:

    @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 disse:

    @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. Caw Martins disse:

    Ruan, vc é o cara! Parabéns! Simples e objetivo! abraçossss

  11. Ruan, tudo bem?
    Este script não funciona com o internet explorer 9. Vc tem algum que funcione nele?
    Abraços e parebens!

  12. Érika disse:

    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.

  13. Bia disse:

    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

  14. Acho legal colocar os nossos tweets no nosso site mas eu acho mais interessante é colocar tweets dos meus seguidores… fazer com as pessoas leem o que está acontecendo na minha rede de contatos, entendeu?

    tem jeito de fazer assim?

  15. Bruno Bezerra disse:

    Cara, muito obrigado!
    Abraços!.

  16. Geovan disse:

    olá amigo coloquei certinho conforme o tutorial mas não aparece, você poderia me ajudar?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *