Adding a Twitter Feed to any Web Page

Author: Sabine Sharp – Glendale Designs

This is a short tutorial, showing you how to add a live twitter feed to a static site (or any site for that matter). There are some nicer plugins available for WordPress, for instance Twitter Feed ,  Wickett Twitter Widget or TweetSuite, that will give you more functionality.

But to add a basic html feed to a static page, do the following:

1. simply go to http://twitter.com/badges/
2. click on ‘Other’
3. click on ‘Continue’
4. select Flash or html – flash lets people interact with your tweets directly from your site

HTML Twitter Feed

1. select ‘HTML widget’
2. click ‘Continue’
3. select the number of tweets you want to display
4. give your feed a tile or not
5. copy and paste the code into your page, where you want your feed to display
6. If you want the feed to look different, you can style it with CSS to match your site look and feel better

Here is some sample html code set for 5 tweets – replace your-twitter-name-here with your actaul twitter name:

<div id=”twitter_div”>

<h2 class=”sidebar-title”>Twitter Updates</h2>

<ul id=”twitter_update_list”></ul>

<a href=”http://twitter.com/your-twitter-name-here” id=”twitter-link” style=”display:block;text-align:right;”>follow me on Twitter</a>

</div>

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

<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/your-twitter-name-here.json?callback=twitterCallback2&amp;count=5″></script>

Flash Twitter Feed

1. Select ‘Flash Widget’
2. Click ‘Continue’
3. Select ‘Interactive Widget’ or ‘Display-only Widget’
4. Click ‘Continue’
5. Select a style and widget size
6. copy and paste the code into your page, where you want your feed to display

That’s all there is to it – simple!