How To Make A Custom Twitter Feed For Your Website

Problem:

Twitter has become very popular and has turned into a tool that a lot of websites have used to connect with their customers and promote themselves.  A great, and now popular, way to show those who visit your website that you have an active Twitter account is to add a Twitter feed to it.  In this post I will show you how to add a custom Twitter feed to your website, providing you with code and styling tips (don’t worry… it is actually very easy).

Solution:

1.- Styling The CSS

        #twitter_t      
                {
  width: 445px;
  height: 34px;
  background-image:url("your top image");
}
#twitter_m {
  width: 415px;
  padding: 0 15px;
  background:url("your middle image")  0 0 repeat-y;
}
  #twitter_container {
      min-height:45px;
      height:auto !important;
      height:40px;
      padding-bottom:10px;
  }

      #twitter_update_list {
          width: 415px;
          padding: 0;
          overflow: hidden;
          font-family: Georgia;
          font-size: 14px;
          font-style: italic;
          color: #31353d;
          line-height: 16px;
          font-weight:bold;
      }
      #twitter_update_list li {
          width: 415px;
          list-style: none;
      }
      #twitter_update_list li a {
          color: #5f6d76;
          border-bottom: dotted 1px;
          text-decoration: none;
      }
      #twitter_update_list li a:hover {
          color: #31353d;
          background: #d3f1f9;
      }
#twitter_b {
  width: 445px;
  height: 29px;
  background-image:url("your bottom image");
}
2.- Inserting JavaScript

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

In the code above, swap the word “REPLACE” with your account name. An example would be if your account name was “twitter.com/ChrisKirkman,” you would just place “ChrisKirkman” in there instead of the word “REPLACE.” If you do decide to display multiple tweets, instead of the one that I suggested, then all you will have to do is change where it says “count=1” to whatever number of tweets you would like to display.  Where it links to “blogger.js,” you can have your own file on your server that you link to that has the same information with some minor tweaks, if you like.

3.-  Insert the HTML on your website

<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">

4.- just done