Freelance Web Developer

Say Hi

Jan 8, 2010

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.


<div id="twitter">
<div id="twitter_avatar"></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 = 
var profile_image_url = 
'<a href="'+username+'"><img src="'+
profile_image_url+'" style="border:none;"/></a><br /><b>@'+
document.getElementById('twitter_avatar').innerHTML = statusHTML.join('');
<script src=
callback=showAvatar&count=1" type="text/javascript">

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

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

Labels: ,

By :