NOTE: As of Oct. 11, 2012, this line of Javascript that we were using for this widget no longer works:

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

If you built a Twitter feed following the instructions in this post and it no longer pulls in tweets as it should, please update the line above to now read:

<script src="https://api.twitter.com/1/statuses/user_timeline/YOURUSERNAMEHERE.json?callback=twitterCallback2&count=4" type="text/javascript"></script>

____________________________________________________________________

Creating your own custom Twitter widget for your website is a lot quicker and easier than you might think. Here are all the codes you need to do it.

Note: once you have the Twitter feed up and running, you can find several several different styles of custom Twitter widgets that are all ready to put on your website here.

To create your own Twitter feed from scratch, first you will want to insert the Javascript that makes the whole thing work. Copy and paste this line of code into your website, preferably just before the closing <body> tag:

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="https://api.twitter.com/1/statuses/user_timeline/YOURUSERNAMEHERE.json?callback=twitterCallback2&count=4" type="text/javascript"></script>

Replace the words YOURUSERNAMEHERE in the above example with your own Twitter username. Change the number 4 after “count” to the number of tweets that you want to display.

Next, copy and paste the following html into the web page where you want the Twitter widget to display:

<div id="twitter">
<div id="twitter_t"></div>
<div id="twitter_m">
 <div id="twitter_container">
 <ul id="twitter_update_list"></ul>
 </div>
</div>
<div id="twitter_b"></div>
</div>

And, finally, copy and paste the following CSS into your website’s stylesheet:

#twitter {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:430px;
border:1px solid #c9c9c9;
}
#twitter_t {
width:405px;
height: 44px;
background:#c68aeb url(yourimagehere);
color:#fff;
text-shadow:.5px .5px #333;
font-size:18px;
font-family:Candara;
padding-top:20px;
padding-left:25px;
}
#twitter_m {
width: 400px;
padding: 0 15px;
background:#f7effc;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:5px;
padding-top:5px;
}
#twitter_update_list {
width: 413px;
padding: 0;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #31353d;
line-height: 16px;
font-weight:bold;
margin-left:-13px;
}
#twitter_update_list li {
width: 400px;
list-style: none;
padding:15px;
border-bottom: dotted 1px #ccc;
}
#twitter_update_list li a {
color:#631891;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #31353d;
}
#twitter_b {
width: 430px;
height: 29px;
background:#c68aeb url(yourimagehere);
}

Of course, you will probably want to edit the CSS codes for your Twitter widget.

And that, my friends, is all it takes to create a custom Twitter widget for your website! :) Have fun, and let me know if you run into any issues.

If you want to remove the time stamp from the tweets in your custom Twitter feed, please check out my post on Icode4you.net – http://icode4you.net/creating-a-custom-twitter-feed-how-to-remove-the-time-stamp-from-tweets.

Make sure you also check out another post I wrote that has the styles for several different custom Twitter widgets that are all ready to incorporate into your website!

UPDATE: You can also find the codes and instructions on how to create a Twitter feed of the search results for a certain term at Icode4you.net.