How to display latest tweet in your website using Javascript and twitter API

Introduction

Sometimes you may be want to show your latest twitter tweets in your website or blog, most of the cases you are doing this by using widgets with limited customization facilities and showing ads or links to other websites, here is an easier way to achieve this using twitter API and javascript.

Step 1:

<div id="twitter_update_list">
</div>

First, decide where about on your page you want your last tweet to display. Then paste following html code there.

Step 2:

Next you need to put these 2 lines of JavaScript below the code in step 1. On the 2nd line of code where it says prajeeshkk.json, you need to replace prajeeshkk with your twitter username.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/prajeeshkk.json?callback=twitterCallback2&count=1">
</script>

Step 3:(Optional)

You can apply css and make the div displaying the tweet stylish.

#twitter_update_list li {
list-style-type: none;
}
#twitter_update_list span a
{
display: inline;
color: #008080;
}
#twitter_update_list span a:hover
{
text-decoration: underline;
color: #66CCFF;
}
#twitter_update_list span
{
color: #000000;
background: white;
}

See how my tweet design looks :

enjoy the twitter client withi your application.