How to Embed a Twitter Timeline on Your Website

Twitter timeline widget screenshot

Today Twitter announced on their blog that they had launched a new tool which allows webmasters to embed timelines on their website. This article I thought I would write a little about this and explain how to go about it.

The ability to easily embed Twitter timelines is a great move by Twitter. Sure it has been possible to pull tweets from the API and create custom timelines for years, but the ability to embed timelines is something that makes displaying tweets on a webpage easy for those of us who aren’t web developers and allows users to engage with you on Twitter without leaving your website.

Tailored Suggestions

One of the big benefits for Twitter is that they are going to get more data to play with when it comes to browsing habits. The new Tailoring system allows for Twitter to suggest users commonly followed by others who visit the same websites as you.

If you would like to learn more about tailored suggestions here is a link to an article in the Twitter Help Centre about tailored suggestions.

What’s in it For You?

Sure Twitter are going to benefit from this, but what’s the advantage for you, the webmaster? Well it makes it real easy to integrate your website with twitter much more tightly. Integrating your website with Twitter in this way means you can get visitors to your website following you on Twitter, and they can even reply to or retweet your tweets from your website which isn’t half bad!

Whilst this was theoretically possible before, the embedded timeline eliminates the cost/time to have something developed and the need for people to give an application permission to access their account (eliminating a shedload of friction)! So how can we go about implementing this?

How to Embed Your Twitter Timeline

You can create a new widget to embed easily by going to https://twitter.com/settings/widgets/new. When you get there you will be presented with a range of options, for starters there is the type of stream. You can choose from user timelines, favourites, lists and a search. I’ll go through the fields for user timelines, but the rest are very similar:

  • Username: You can provide the username of any Twitter user and their tweets will be pulled into the timeline.
  • Height: The height of the widget. (Note: it might be difficult to determine the exact size, if the widget turns out not to fit don’t worry, you can easily edit it again by going to https://twitter.com/settings/widgets
  • Theme: As with many widgets, you can choose between a light and dark theme. I would recommend using the default (light) theme. Whilst Twitter have done a great job making the dark theme easy on the eyes by not making the text too bright, dark on light tends to do a lot better on most websites.
  • Link Colour: If you click on this field a color picker popup will appear. I recommend choosing the same link color as your website uses to keep things consistent.
  • Domains: Here you can enter a comma separated list of domains you intend to use the widget on.
  • Opt-out of Tailoring Twitter: We talked about tailoring Twitter earlier in the article. This check box is provided so that you can opt out if you do not wish to participate.

After you have finished customizing your widget simply hit the create widget button below the form and copy the widget code from below the preview. If you wanted to create an embed for favourites, lists or search don’t worry, the only real difference is that the user box will be swapped.

Good luck!

Categories: Tags: Social Media Timelines Tweets Twitter Widgets
Twitter icon
Facebook icon
Google icon
StumbleUpon icon
Del.icio.us icon
Digg icon
LinkedIn icon
MySpace icon
Newsvine icon
Pinterest icon
Reddit icon
Technorati icon
Yahoo! icon
e-mail icon

Marketing Director at Sensible Internet. Passionate About Internet Marketing, IT, Business, Web Development, Game Theory and the Internet in General. Views are my own.

Twitter icon
LinkedIn icon
Google+ icon
RSS icon

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.