Creating a custom twitter feed

13th June 2013
As of 11th June 2013, the updates to the Twitter API left a lot of javascript twitter feeds broken.

This is how you can create a custom(ish) feed using twitters own widget. (screen shot of the un-customised version above)

Step 1:
Login into twitter and go to settings->widgets (handy link) and press the create new button.
Select any options you need and hit save changes.

Step 2:
Copy the code it gives you and paste it into your site. It looks something like this:
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/walking_fishy" data-widget-id="345198689897287680">Tweets by @walking_fishy</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Step 3:
Customise it a bit by doing the following:

Remove the header, footer and borders.
Twitter requires you to link to twitter if you remove the header.
Just add noheader, no footer and noborders to the data-chrome attribute of the a element, like so:
<a class="twitter-timeline" data-chrome="noheader nofooter noborders" data-dnt="true" href="https://twitter.com/walking_fishy" data-widget-id="345198689897287680">Tweets by @walking_fishy</a>

Remove the background colour.
Just add transparent to the data-chrome attribute of the a element, like so:
<a class="twitter-timeline" data-chrome="transparent" data-dnt="true" href="https://twitter.com/walking_fishy" data-widget-id="345198689897287680">Tweets by @walking_fishy</a>

Change border colour.
Just add a hex colour to to the data-border-color attribute of the a element, like so:
<a class="twitter-timeline" data-border-color="#f5f5f5" data-dnt="true" href="https://twitter.com/walking_fishy" data-widget-id="345198689897287680">Tweets by @walking_fishy</a>

Change link colour.
Just add a hex colour to to the data-border-color attribute of the a element, like so:
<a class="twitter-timeline" data-link-color="#cccccc" data-dnt="true" href="https://twitter.com/walking_fishy" data-widget-id="345198689897287680">Tweets by @walking_fishy</a>

Providing you don't provide the widget a width or height it will be responsive, with a little bit of a limitation. It can't go smaller than 180px or wider than is 520px and the minimum height is 200px.
More information about the twitter widget.