There are many ways to add your Twitter feed to your blog. Here is one method that can be done in three easy steps.

The following instructions assume that you are using a sidebar on your blog site. I am a WordPress user, so I am using WordPress terminology. WordPress uses “Widgets” for extra things that you can add to your site, like a tag cloud, blogroll, and in this case, a text-widget that you can copy and paste code into.

Step 1: Copy and paste the following code:

<center><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 220,
  height: 300,
  theme: {
    shell: {
      background: '#ffffff',
      color: '#793d19'
    },
    tweets: {
      background: '#ffffff',
      color: '#793d19',
      links: '#ea7f1e'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('yourtwitterhandle').start();
</script></center>

Step 2: Past this code into a text-widget  that you have added to your blog sidebar.

Step 3: Modify the code to your liking.

If Step 3 gives you a headache, don’t worry. There is really only one part of this code that absolutely MUST BE changed. Take a look at the second to last row of the code:

}).render().setUser('yourtwitterhandle').start();

I have made the words, “yourtwitterhandle” in between the single quotes bold. You must change the words in bold (i.e., yourtwitterhandle) to your Twitter username. Do not use the “@” symbol and be sure to JUST change the words. Do not accidentally delete the single quotes when you do this.

Publish or save your text-widget and then preview your site. Your Twitter feed should now show up in your sidebar.

If you like the way your Twitter feed looks – stop here and happy blogging. If you would like to adjust the width, height, font and background colors of our feed, here is what you need to change.

Width and Height

Width and height is measure in pixels. So the the Twitter feed that you just added to your sidebar is currently 220 pixels wide by 300 pixels tall. The code looks like this:

width: 220,

height: 300,

Adjust the width and height to best fit the area that you have set aside for your sidebar by changing these numbers. It usually takes me 3 or 4 tries before I get it just right.

Background and Font Colors

The background colors are controlled underneath the “shell: {” part of your code. Colors on the internet are created using a “#” symbol followed by a series of letters and numbers. This is called a “hexidecimal color code” or “hex code” if you don’t want to sound too geeky. Here is a link to a handy-dandy hex color code chart so that you can pick out some new colors for your Twitter feed.

This is the code that you will adjust once you have picked some new hex codes. The characters that you will change are bold. Make sure that you always include the “#” symbol followed by the letters and numbers that make up your color. Be careful not to accidentally delete the single quote around the hex code:

shell: {
      background: '#ffffff',
      color: '#793d19'

The background immediately around your actual Tweets and the color of your fonts are controlled underneath the “tweets: {” part of your code. Same concept as above, using your handy-dandy hex color code chart, pick out some colors and modify just the code that I have made bold in the sample below.

tweets: {
      background: '#ffffff',
      color: '#793d19',
      links: '#ea7f1e'

Hopefully your Twitter feed is now beautiful and customized to fit the design of your blog. I hope you found this information useful. I would love to see successful uses of this little “how to” – so leave me a comment with a link to your blog so I can check it out!