Freelance Web Developer

Dec 30, 2009

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.


<div id="twitter">
<h1><a href="">@motyar</a></h1>
<ul id="twitter_update_list"></ul>

<script src="" 

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.

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.

After adding some style the result look like this


By :