Dica: mostrando os últimos twitts

Com a febre das redes sociais, tivemos muita demanda para integrar as postagens no twitter de determinado cliente com seu site.

Esta tarefa pode ser bastante simples. Não é preciso programar nada no lado do servidor, o twitter já oferece um método para importar os posts facilmente, o REST API.

Nosso twitter é acessado por http://twitter.com/turbosysbrasil. Para impostar as últimas postagens, basta adicionar a linha abaixo logo antes da tag de fechamento </body>:

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/turbosysbrasil.json?callback=show_twitts&count=2"></script>

Esta linha irá conectar-se com o twitter e trazer os últimos 2 posts (através do argumento count) da conta turbosysbrasil e, após receber o conteúdo, chamar a função show_twitts (através do argumento callback) passando a lista de twitts como argumento desta função.

Troque o nome turbosysbrasil pelo nome da sua conta no twitter.

Agora basta definir a função show_twitts:

function show_twitts(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++) {
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
}).replace(/\B#([_a-z0-9]+)/ig, function(search) {
return search.charAt(0)+'<a href="http://twitter.com/#search?q='+search.substring(1)+'">'+search.substring(1)+'</a>';
});
statusHTML.push('<li class="twitt">'+status+'</li>');
}
document.getElementById('twitter_container').innerHTML = statusHTML.join('');
}

A função itera sobre os twitts recebidos, pega o status (mensagem) e faz algumas substituições para criar alguns links úteis. Por fim, junta tudo num UL cujo ID é twitter_container.

Caso, por algum motivo, você queira que as postagens do twitter sejam carregadas após o site ter sido carregado completamente, pode usar uma função javascript para o carregamento. Abaixo um exemplo disso, usando jquery:

$(document).ready(function() {
$('body').append('<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/turbosysbrasil.json?callback=show_twitts&count=2"></script>');
});

Esta foi uma visão superficial, na documentação da API do Twitter há muito mais detalhes que podem ser explorados, acesse o link abaixo:

http://apiwiki.twitter.com/Twitter-API-Documentation

Comentários

Nenhum comentário cadastrado, seja o primeiro a comentar!
Nome
Email
*Conteúdo
*Palavra-desafiocaptcha

Preencha com a palavra escrita na imagem