Para usar as últimas "tweetadas" como atualização, siga as instruções abaixo:
- Coloque o seguinte código no seu blog ou site e substitua "InfoWebit" pela sua ID do twitter:<div id="twitter_div"><ul id="twitter_update_list"></ul><a href="http://twitter.com/InfoWebit" class="twitter-link">Siga o Twitter</a></div><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/InfoWebit.json?callback=twitterCallback2&count=3"></script>Na última linha a instrução "count=3" define que serão mostrados 3 tweets. Podemos alterar para o número de tweets que desejarmos.Se não fizer mais nada os posts recentes do twitter já aparecem na sua página, mas desorganizados, sem formatação, sem uma aparência agradável.Temos então que configurar a div "twitter_div" e o elemento ul. Para isso usamos CSS que é o próximo passo.
- Coloque o seguinte código, CSS, entre as tags <head> e </head> do seu documento html. No blogger você pode optar por ir nos elementos da página, clicar em "designer de modelo do blogger"/"avançado"/"adicionar css", e adicionar o código no espaço em branco.
#twitter_div {width: 250px; /* largura */background: #fff; /* cor do fundo */
align: center;margin: 10px;padding: 5px;background-position: 22px 5px;background-repeat: no-repeat;font-family: Verdana, Arial, Helvetica;border: 1px solid #0CF; /* cor da borda */}#twitter_div ul li {color: #000;list-style: none;font-size: 11px;text-align: left;padding: 7px;border-bottom: 1px dotted #666;}#twitter_div ul li a {text-decoration: underline;color: #000; /* cor do link */}#twitter_div ul li a:hover {text-decoration: none;color: #000; /* cor do link ao passar o mouse */}.twitter-link {padding: 0px;display:block;text-align:right;font-size: 10px;font-color: #000;}
Só precisa seguir os comandos e fazer as atlerações e você terá as últimas "tweetadas" no seu site ou blog.
Update:
Veja também como adicionar uma caixa fan box do twitter, igual a do blog em:
Até mais
Nenhum comentário:
Postar um comentário