Krystyn Heide

I thought it'd be fun to add Twitter updates to my site, but rather than use one of Twitter's premade Flash badges, I wanted them on a page all of their own and styled to match the rest of my site. Here's what I did, if you'd like to do the same.(Of course, feel free to adjust it to match your site!)

First, log in to your Twitter account and go here: http://twitter.com/badges/which_badge. Select the HTML/JavaScript option in the third column.

Choose your customization options and copy the code provided. (I selected 20 updates, since this is also the number of updates on your first Twitter page.) Paste the code into the page of your website where you'd like your Twitter updates to appear.

Next, update your CSS.

#twitter_update_list { padding: 0; margin: 0; }
#twitter_update_list li { list-style-type: none; padding: 0 0 10px 0; 
margin: 0 0 15px 0; border-bottom: 1px solid #D5D5D5; }

Finally, to add your Twitter icon and make your first tweet stand out, replace this code:

<div id="twitter_div">

With this:

<div id="twitter_div">
<img src="yourimage.jpg" border=0 />

And add the following to your CSS:

#twitter_update_list li:first-child { font-size: 16px; padding-top: 10px; 
height: 75px; }
#twitter_div img { float: left; padding: 5px; background-color: #FFF; 
margin-right: 20px; }

Viola! Your visitors can get Twitter update goodness without ever leaving your website. :)