Quantcast
Channel: Desenvolvedor Front-end - Ruan Mér » Twitter
Viewing all articles
Browse latest Browse all 2

Colocando mensagens do Twitter em um Site ou Blog

$
0
0

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.


Viewing all articles
Browse latest Browse all 2