This tutorial will tell you how to display your Twitter updates on your site, with valid coding, and how to customise it to how you like. You will obviously need to have a Twitter account.

Note: The widgets on Twitter no longer include the HTML widget so I have supplied the code in this tutorial for you.
Naturally you can get a more flashy widget at twitter.com/goodies/widgets.

The code

This is the code we are using:

<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/USERNAME" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&amp;count=5"></script>

In the parts where it says USERNAME, that should be your username. The number 5 can be changed to how many updates you want. You only have to edit this code if you want to increase or decrease the number.

It’s best to place the script (after </div>) at the end of the page before the </body> tag. This is because if Twitter is down and cannot load, at least the rest of your site will load.

Place the rest of the code where you want the Twitter updates to appear.

Modifying

You can change the <h2> section so that ‘Twitter updates’ (or whatever text you choose) is in a different header or style.

Instead of using ul (unordered list) for the div, switch it to use div:

This is the code for your actual updates:

<ul id="twitter_update_list"></ul>

And it should change to:

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

Another thing you need to modify:

This is the code for the div in which the updates are displayed:

<div id="twitter_div">

And it should change to:

<div class="twitter">

Customising the look

The next thing we need to do is customise how the updates will look wherever you put them.

The following needs to be placed in your CSS:

.twitter {
color: #000000;
margin-left: 10px;
list-style-image: url('IMAGEURL');
text-align: left;
font: normal 80% tahoma;
}

By default, the font colour is black. You can edit all the other options here. Increasing the margin will make more room for bullets, if you choose to have them.

You can add a URL to an image for a bullet if you like.

You can also change the font style and size, and add other necessary attributes.

If you don’t want a bulleted list, place the following in as well:

list-style: none;
list-style-type: none;

And that’s it! Valid coding for your little tweets!