Displaying Twitter stream on webpage? - twitter

Question

I want to display a twitter feed of a user on my website. What is the simplest way to do this? I guess Javascript. What I want specifically is for the last 5 tweets to load & then, when another tweet is made, for that to automatically appear at the top of the Tweets. It needs to cover pretty much the whole website, apart from the header & footer. Any suggestions/code to do that?
Cheers, help greatly appreciated!

Answer 1

Loading new data without refreshing will need to be AJAX. To get the data, ses the Twitter API http://apiwiki.twitter.com/. The API will allow you to get the data in the format of choice (xml, json, ect...) which you can then parse and return either the data or HTML to the page that submitted the AJAX call. That should give you a push in the right direction.

Answer 2

Simplest way would be adding the Twitter widget : http://twitter.com/goodies/widget_profile and it updates new tweets automatically (using AJAX I think). You ca set the dimensions too.

Answer 3

use any twitter wrapper calss for example this http://emmense.com/php-twitter/ to get the status and display it. than use javascript time function inside function make ajax call to php script and append latest tweet on top of your container.
you can use jquery for dom update
$('#dividhere').prepend('Bla bla bla');

Answer 4

use jQuery, sry for my programming language, but i like our czech lang
<script type="text/javascript">
jQuery(document).ready(function($){
$.getJSON('http://api.twitter.com/1/statuses/user_timeline/##USERNAME##.json?count=2&callback=?', function(zpravicky){
$("#twitter").html(formatujExtSocialniProfil(zpravicky));
});
});
</script>
in external javascript file code like this
function formatujExtSocialniProfil(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 ''+url+'';
}).replace(/\B#([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+''+reply.substring(1)+'';
});
statusHTML.push('<li><span>'+status+'</span> <br/><b>'+relative_time(twitters[i].created_at)+'</b></li>');
}
return statusHTML.join('');
}
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) {
return 'seconds ago';
} else if(delta < 120) {
return 'minute ago';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutes';
} else if(delta < (120*60)) {
return 'hours ago';
} else if(delta < (24*60*60)) {
return 'ago ' + (parseInt(delta / 3600)).toString() + ' hours';
} else if(delta < (48*60*60)) {
return 'yesterday';
} else {
return 'since ago' + (parseInt(delta / 86400)).toString() + ' days';
}
}