I have been using Twitter, not necessarily as a branding tool, seeking a high follower number, but to dynamically update our school’s web site and my personal classroom web page. If you know how to use CSS, image editing software, and some creativity, you can really give your Recent Tweets some personality.

As you can see on our school web page I have a speech bubble coming from our falcon mascot. On my classroom web site I am using the code available below to post a simple text based feed. Twitter has widgets available, but I didn’t find them as customizeable and basic as I wanted. I found this tutorial (http://www.themelab.com/2010/05/18/custom-twitter-widget-tutorial/) on adding a Twitter feed and adjusted the code to make it as basic as possible.

Follow these steps to add recent tweets. If you are a big retweeter, the retweets do not show up, but I am sure if you Google this issue you can find a solution! Good luck!

Step 1
Now add this code to the location where you want the Tweets to show.
<div id="twitter-feed">
<p>Recent Tweets</p>
<ul id="twitter_update_list">
<li>Twitter feed loading</li>
</ul>
</div>

Step 2
Now add the following to your Style Sheet and read the notes to make your own changes.
#twitter-feed { /* This is the container div. */
}
#twitter_update_list a[style="font-size: 85%;"] {
font-size: 1em !important;
}
.twitter-list {
list-style:none; /* This removes the bullet in the list. */
margin:0 0 0 0; /* This moves the indent over in the list. */
padding: 0 0 0 0; /* This moves the indent over in the list. */
display: block; /* This moves the indent over in the list. */
}
.twitter-list li {
border-bottom: 2px dashed #009999; /* This is the color of the divider. */
padding: 7px 0 7px 0; /* This is the padding around the divider. */
margin-bottom: 9px; /* This gives space below the divider. */
}
.twitter_title{
font-family: "Comic Sans MS", Calibri, Arial;
font-size: 18px;
font-weight: bold;
color: #000000;
}

Step 3 – Last Step
Now add this code right before your </body> tag.
<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&count=3"></script>

Now change the USERNAME to your Twitter username, and the count=3, to a number of recent tweets that you desire. Check your page online to be sure it works.

I made changes to the code from the following source: http://www.themelab.com/2010/05/18/custom-twitter-widget-tutorial/.

This resource is also great! This shares additional Twitter badges, http://mashable.com/2009/03/30/twitter-badges/.