Show twitter avatar on your page

One of my friend asked me a question that How can the script be modify to return the Twitter profile avatar? while reading my previous post about twitter.

We can show avatar, and all other profile informations that the twitter api returns in json format. i have modified the callback function to show twitter profile image on your web page.

The HTML

<div id="twitter">
<div id="twitter_avatar"></div>
</div>

The twitter_avatar div is target div, where we have to show the avatar.


The Javascript

<script type="text/javascript">
function showAvatar(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var followers_count = 

twitters[i].user.followers_count;
var profile_image_url = 

twitters[i].user.profile_image_url;
statusHTML.push(

'<a href="http://twitter.com/'+username+'"><img src="'+

profile_image_url+'" style="border:none;"/></a><br /><b>@'+

username+'</b>');
}
document.getElementById('twitter_avatar').innerHTML = statusHTML.join('');
}
</script>
<script src=

"http://twitter.com/statuses/user_timeline/motyar.json?

callback=showAvatar&count=1" type="text/javascript">

</script>

The showAvatar is the callback function that parses the JSON Data and inject it to the target div.

Demo
You can see it in action here.
Related posts
Show your twitter status on your page.