Show your twitter status on your page

There are a number of plugins  that allow you to display your latest tweets on your website or blog. Sometimes, all you want to simply display your latest Twitter updates, without wrestling with preset styling, or lengthy settings.

Let’s take a look at using Twitter’s good Javascript approach to pulling out your latest update, and displaying it with a mix of CSS styling.

The HTML 

<div id="twitter">
<h1><a href="http://twitter.com/motyar">@motyar</a></h1>
<ul id="twitter_update_list"></ul>

</div>
<script src="http://twitter.com/javascripts/blogger.js" 

type="text/javascript"></script>
<script 

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

callback=twitterCallback2&count=1"
type="text/javascript"></script> 

You have options to edit are the name of the profile to retrieve the posts from, and the number of tweets the script should display. So, you could display your very latest tweet, or a list of recent messages.

Next up the HTML can be written out. Everything is enclosed in a DIV with the id of Twitter, followed by a UL with an id of twitter_update_list. This is where each tweet will be listed.

Testing
If you are viewing the status with this HTML and Javascript code means everything is working correctly. you can inject some visual styling with a touch of CSS.

Demo
After adding some style the result look like this