Thursday, October 8, 2009

Create a Twitter widget yourself !!

You may have seen a lot of websites, which show their recent tweet.You may have also wanted to put a similar widget to your website also. But most of the time, you use widget provided by others, which are less custimizable and may have some sort of ad or link to other websites on it.

Have you ever wondered how to create yourown customizable widget?

Please follow a few simple ways and you can create a simple customizable tweet widget to put in your website or blog.

Step 1:

<div id="twitter_update_list">

</div>

Copy the above code in the area where you need to put your tweets.

Step 2 :

Copy the following code below the previous code.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">

</script>

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ipixsolutions.json?callback=twitterCallback2&count=1">

</script>

Here, in the above code, you can see text called ipixsolutions.json just replace the ipixsolutions with your own twitter username.And where it says count=1, put your desired number of tweets you need to show at a time.
Voila!! your custom twitter widget is ready.

Step 3:

Next, by the following optional step, we can tweak the appearance of our custom twitter widget. i.e. applying a css style to our twitter widget.

#twitter_update_list li {

list-style-type: none;

}

#twitter_update_list span a

{

display: inline;

color: #008080;

}

#twitter_update_list span a:hover

{

text-decoration: underline;

color: #66CCFF;

}

#twitter_update_list span

{

color: #333;

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

}


Append the above code to your css file. your can tweak it according to you need.