How to ... add a Twitter Feed to your Website

Yup, it's that time of the week again. Doesn't time fly?

This week I'll show you how to display your Tweets (or Twitter Feed) on your website or Blogger Blog using the Twitter Widget. This post does assume that you have a Twitter account and are using the 'new' version of Twitter, and have a website or blog to add it too!

1. First of all log in to your Twitter account, then click on your Twitter name in the top bar (highlighted by the pink arrow below) to access the menu & choose 'Settings'.

Screen shot from http://www.twitter.com/picseli on 14th January 2011

2. On the 'Settings' page click the 'Profile' tab and under where you can add a web address, you should see a message that says '(You can also add Twitter to your site here)', check out the pink arrow in the picture below, and click it - the link, not the pink arrow:

Screen shot from http://www.twitter.com/picseli on 14th January 2011

3. You'll then see a screen asking you to 'Select Your Widget'....

Screen shot from http://www.twitter.com/picseli on 14th January 2011

4. Choose 'My Website' and you'll get the following options:

Screen shot from http://www.twitter.com/picseli on 14th January 2011

Twitter explains pretty well what they do, so I won't go into that. To display your tweets click on the first option 'Profile Widget'.

5. On the next screen, on the right hand side, you'll see an example of how your feed will look. As you make chenges this will change so you can see exactly what you'll get. Check your username and if you are happy with what you've got, click the 'Finish & Grab Code' button and head to Step 9 below.

Screen shot from http://www.twitter.com/picseli on 14th January 2011

6. On the Preferences screen you can change how many tweets are displayed, how they are loaded etc. For every change you make, click the 'Test settings' button to view the changes. In the screen shot below I have:

• Ticked 'Poll for new results?'- This means that the feed will be updated in real time, so when you tweet, the latest tweet is displayed without having to reload the page.
  
• Ticked 'Include scrollbar?' - This means that if the space needed to display the twitter feed is longer than the box a scrollbar will be added.
  
• Upped number of Tweets to be displayed to 10.
• Ticked 'Show hashtags?' - if this is unticked it won't display any text that is preceeded with a #, so in the case of the #facebook tweet above, you wouldn't get the full meaning of the tweet.
• Ticked 'Show avatars?' - to display people's images by their tweets.
  

Screen shot from http://www.twitter.com/picseli on 14th January 2011

The settings I haven't mentioned are:

• Timed Interval - which will display tweets one at a time, rather than loading them all at the start.
• 'Show Timestamps?' - which displays the timings of the tweets.
  

When you are happy with your settings, click on the Appearance tab on the left hand side.

7. On this screen you can change the colours of the widget to match your website, so play around and find the colours that suit. Here we've updated it to better match Picseli's colours:

Screen shot from http://www.twitter.com/picseli on 14th January 2011

Click on the text box or coloured square you want to update and use the colour picker, or if you have a corporate brand and access to the Hex codes you need to use, you can simply enter these. You'll notice your demo widget updates as you change colours, no need to click the 'Test settings' button.

When you're done, click on the Dimensions tab.

8. Here you can resize the widget to fit the space you need. This can be a bit tricky and may require a bit of trial and error to get it spot on, however, the auto-width option can be very handy here! Tick this option to have your widget fill the space available. Unfortunately, as it says, you can't test your size settings here.

Screen shot from http://www.twitter.com/picseli on 14th January 2011

9. When you are happy with your widget, click on the 'Finish & Grab Code' button. Here you'll be taken to a page with your HTML code (or, if you want to add your feed to Blogger, a handy 'Add to Blogger' button.)

Screen shot from http://www.twitter.com/picseli on 14th January 2011

If you know what to do with HTML, copy the code and do with it what you will!

If you don't, copy the code and send it to your friendly web developer and ask them to install it for you.

If you want to add it to a blogger site click on the 'Add to Blogger' button.....

10. You will be directed to the Blogger website, where you will be asked to login (if you aren't already) and then asked to select a blog and enter a title for your widget.

Screen shot from http://www.blogger.com on 14th January 2011

(If you click the 'Edit Content' link, you'll see the HTML code thats been passed from Twitter to Blogger.)

Click 'Add Widget' and Twitter will be added to your blog.

If you look towards the bottom of this blog in the right hand bar, you'll see Picseli's Twitter Widget!

Good luck & have a great weekend!