Friday, 14 January 2011

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!

16 comments:

web hosting uk said...

Thank you very much, I've been wanting to integrate twitter on my web site.

seo reseller said...

This will be great for my site, integrating social networking will make my site more visible. Thanks.

experiential marketing said...

Social networking such as Twitter can make your website visible out in the market and people would be able to get news and updates from you. Thanks.

Theodore Smith said...

I'm currently in the process of rehabilitating my website and by adding Twitter can surely help me reach more people. Thanks.
long island seo

Perth web design said...

Integrating the use of social media for your website is something that most business do nowadays. Thanks.

George Smith said...

Integrating Twiter in your website is a great idea in engaging to your followers. You can reach to a wider audience and helps you in spreading information faster.

web design norwich

jessie bobsy said...

Thanks for sharing these steps. I think integrating your Twitter to your website is a good way to increase your followers and reach your existing followers.

seo company

event marketing said...

Integrating other social media tools in your site can really improve the traffic of your site's business.

daniellaprice30 said...

Thanks for these tips! I'm going to use these for my job in seo in Perth. I will also share these to my colleagues.

عرب سينا said...

Thank you very much
موقع عرب سينا arabcena
http://www.arabcena.com/

SEO Company The Seo Portal said...

Is integrating twitter with our website help in any way in search engine optimization of our website ?

Website Redesign said...

You can know all about the twitter feed to your website from the post. Useful information

SEO said...

is integrating this tweet also help in ranking of website ? as i think this integration help us in improving crawl rate of website

Website Outsourcing India said...

Nice information on adding twitter feeds to websites is given in the post. I like the quality and the way in which the post is written

cara membuat email said...

please follow back i have been following you.. thanks for the articles...

Amela Jones said...

Is there any further reading you would recommend on this?

Amela
Avon Seo company