Installing a Customized Twitter Feed

The original instructions for installing this Twitter code for Blogger blogs can be found here: http://www.bloggerbuster.com/2008/04/add-customized-twitter-widget-to-your.html. We're using that same idea, but on a website page instead. This gives us the opportunity to customize the size, colors, widths, and placement of the feed.

1. The correct feed name to install on your website for this purpose is Twitter account name (like 'Toolie'); you'll notice it in the script code. Just substitute yours for mine.
2. Select an area on your web page for the feed to reside. The optimal width the feed is between 200 and 300 pixels. You can store it in a DIV or in a table cell.
3. Add the following code in the location where you want the feed to appear.
   
   
<ul id="twitter_update_list">
</ul>


4. At the bottom of the web page just before the closing BODY tag, add the code below. These two lines of script automatically provide the feed within the UL tags above. You can change the count (currently set to 4 tweets) at the end of the SRC attribute in the second script to whatever number you want.
   
   <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/Toolie.json?callback=twitterCallback2&amp;count=4">
</script>
   
   
   NOTE: If you don't have access to the bottom of your web page because of your website template, just park the script code immediately underneath the closing UL tag, but within the DIV or TD tag enclosing the feed location.
5. Twitter provides a default appearance for the tweets in the feed. In your Cascading Style Sheet (CSS) file, you can customize the appearance of the list of tweets by adding this exact ID (#twitter_update_list) plus the LI tag as shown below. You can change the font size, the line height, the margin, and so on for those List Item (LI) tags.
   
   #twitter_update_list li { // only if you want to override the default Twitter settings for this tag
    font-size: 12px;
    margin-left: -.2in;
    line-height: 130%;
}

6. If you want to use an outer DIV tag to contain the feed, you can add it to your CSS file. You can name the DIV anything you want, and use any or all of the CSS properties listed below, substituting your font and color information:
   
   #twitter_outer_div {
   border: 4px #B6BD1B solid;
   color: #000000;
   font-weight: normal;
   font-size: 13px;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   background-color:#ffffff;
   width: 225px;
   padding:10px;
   margin:auto;
}
   
   If you want to format a table cell to contain the feed, you can create a class. You can use any or all of the CSS properties listed below:
   
   .twitterclass {
   color: #000000;
   font-weight: normal;
   font-size: 13px;
   font-family: Verdana, Helvetica, sans-serif;
   text-decoration: none;
   padding: 10px;
}
7. The Twitter feed will automatically pick up your website's hyperlink color scheme, which has been satisfactory in most uses.

And that's it!