What’s a twitter feed?

A twitter feed is simply a list of recent tweets published to twitter. You can narrow them down to show only tweets about a particular topic, or you can set the feed so that it shows  only your own tweets.

Why might you want one on your site?

Twitter is a good way of sharing relevant links and information, and hence a way of providing visitors with useful information and news.

Publishing tweets on your site allows you to highlight your recent tweets and encourage people to subscribe to your feed.

Outbound links may attract the attention of other site owners and encourage them to link back to your site. This may improve your page rank.

Of course, just publishing a feed won’t do anything for your page rank. It’s more sensible to focus on ensuring that your tweets are relevant, interesting or useful for visitors, as Matt Cutts of Google explains in this brief video.

How?

One of the easiest ways to publish a feed to your site is to use Twitter widgets. But they don’t seem to work in every browser, and they’re a little inflexible when it comes to adjusting colours and other aspects of the feed.

Instead, there are hundreds of free scripts available, and you can simply paste them into your existing pages. One of the best is available at http://www.taranfx.com/live-twitter-ajax-script.

This script is particularly useful because it includes nearly all the javascript and styling you need in one place. That makes it simple to change colours and font styles and you just need to upload one file to your server.

We’ve put up an example of the script in action here. It searches Twitter for the term ‘Danube’, displays the most recent tweets, and refreshes the display every 10 seconds.

You can adjust the appearance in many ways by changing the parameters in the code. For example you can change the colours used, the fonts, the refresh frequency, and the number of tweets used.

Things to watch out for

The hiccup you’re most likely to come across with this script concerns CSS styling. The script includes common styles such as lists, which may conflict with your existing style sheet. So to start with, the feed may not have the appearance you want.

One solution to this is to put your feed in a div with a distinctive name, and change the appearance of lists only when they appear in that div.

To do that, you preface the <ul> or <li> in your CSS with a hashtag and the div name. For example:

#twitterfeed li
{
display:none;
list-style:none;
background:#ffcc33;
margin:0 15px;
overflow:auto;
padding:10px;
color:#cc0033;
font-family:Arial, Verdana, Sans-Serif;
line-height:20px;
}

To create the div, you would then place the opening and closing tags around the code for the feed:

<div id=”twitterfeed”>

All the code for your twitter feed goes here

</div>

In this way, any lists you already have on your site will continue to display correctly, and the list style you apply to your twitter feed will not interfere.