Showing live twitter stream in your blog using Jquery's Livetwitter plugin

Although Twitter now work as an instant messenger service, it was originally designed as a microblogging tool. The idea was to give short updates on what’s going on around you to a group of friends.

Twitter does still work well that way. Only now, your group of “friends” might be thousands of people, and what’s going on around you might be a natural disaster, an election or a concert. Twitter can be an excellent tool for “live Tweeting” these big events.

If you have a blog/website for an event ,you might want to add a live tweets streams on your site to keep track on what people are thinking .
And here is the solution for adding live tweets streaming into your site,a Jquery plugin named Jquery.Livetwitter



1,At first , click here to download Jquery.LiveTwitter plugin .
2,Upload file Jquery.Livetwitter.js to a host . I recommend Google code for an unlimited bandwidth and storage hosting .
3,Create a HTML/Javascript widget in your Blogger page elements .
4,Paste these lines into widget content :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" ></script>
<script src="your hosting / jquery.livetwitter.js" type="text/javascript"></script>

5,To add style to live tweets streams widget , paste this code into widget content :
<style type="text/css" media="screen">
        body {
            background: #E1EBFF;
            font-family: Verdana;
            font-size: 13px;
            color: #111;
            margin: 40px 120px;
            line-height: 1.4;
        }
        h2 {
            margin-top: 40px;
            font-family: Helvetica, Arial, sans-serif;
            font-size: 24px;
            font-weight: bold;
        }
        a, a:visited {
            color: #066999;
        }
        a:hover {
            color: #111;
        }
        .tweet {
            background: #fff;
            margin: 4px 0;
            width: 500px;
            padding: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
        }
        .tweet img {
            float: left;
            margin: 0 8px 4px 0;
        }
        .tweet .text {
            margin: 0;
        }
        .tweet .time {
            font-size: 80%;
            color: #888;
            white-space: nowrap;
        }

        #twitterSearch .tweet {
            min-height: 24px;
        }
        #twitterSearch .tweet .text {
            margin-left: 32px;
        }
    </style>

You can modify values in this code for what you want .
6, Now adding code to make this plugin work :
<div id="twitterSearch" class="tweets"></div>
    <script type="text/javascript">

        // Basic usage
        $('#twitterSearch').liveTwitter('keyword', {limit: 5, rate: 5000});
    
    </script>
in this code :
-the 'keyword' is the topic you want to show tweets ,for example ,you want to show live tweets on election ,the 'keyword' is 'election' .
-Limit :5 mean showing 5 latest tweets . You can increase this number to show more
-rate :5000 mean the time to refresh 5000 milliseconds .
7,Instead of showing tweets from others ,you can show your tweets only by using this script :


<div id="twitterUserTimeline" class="tweets"></div>

    <script type="text/javascript">

        $('#twitterUserTimeline').liveTwitter('username', {limit: 5, refresh: false, mode: 'user_timeline'});

    </script>
username : mean the name of twitter account you want to show its tweets .
Ok,you are done .
Save your widget and see the result .
I see there is a widget in Blogger for showing Twitter updates ,but I love this plugin because it's easy to use and has a lot of option . You can see its option at this page