Displaying latest Tweets on mywebsite .. User name not coming - twitter

Question

Hi i have integrated twitter api to display recent tweets on my website .
I can able to get the recent tweets but tweets does't contains user name(user who has tweeted on my wall)
below is the code i have used
<div id="twitter_update_list" style="height:300px;width:300px; overflow:auto; overflow-x:hidden">
javascipt
<script type="text/javascript" src="https://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="https://api.twitter.com/1/statuses/user_timeline.json?screen_name=ABMMyuniverse&include_rts=true&count=4&callback=twitterCallback2"></script>
output :
Aditya Birla Money MyUniverse is now a proud winner of Finnoviti-2012, an award for inspiring innovations in the financial services sector 122 days ago
Team MyUniverse wishes everyone a very # Happy Diwali, May the lights spread joy, peace and prosperity in your life! http://t.co/xbCUSRrT 133 days ago
only tweets text i'm getting .. there is no user details ..How can i get that ??
someone please help me .. thanks in advance !!!

Answer 1

Finally I have integrated . I hope this will help some one :)
<script language="javascript">
$(document).ready(function () {
var username = 'YourTwitterName';
$.getScript('http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + username + '&callback=twitterCallback2&count=4');
});
function twitterCallback2(twitters)
{
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var profileimage = twitters[i].user.profile_image_url;
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('<table style="border-top:1px dotted #000"><tr><td><a target="_blank" href="http://twitter.com/' + username + '">' + username + ':</a><br/>' + status + ' <br/><small style="color:#737373">' + relative_time(twitters[i].created_at) + '</small></td></tr></table>');
}
$('.loading').fadeOut(800, function() {
$('#userlatest_tweet').append($(statusHTML.join('')).hide().fadeIn(750));
});
}
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 'less than a minute ago';
}
else if (delta < 120) {
return 'about a minute ago';
}
else if (delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
}
else if(delta < (120*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
}
</script>
<div id="userlatest_tweet" style="height: 300px; overflow: auto; overflow-x: hidden">
<div class="loading">
</div>
</div>
you can add image also by modifying table inside statusHTML.push function ....!!!!
If it is working fine .. then make this as answer which will be helpful for others !!!