How to add Twitter to your website

Integrating Twitter into your website explained

How to add Twitter to your website

There are two kinds of people these days: those who understand Twitter, and those who don't.

If you're still a doubter, keep in mind that everyone's first foray into the medium is pretty disappointing. Start following the right people, though, and it suddenly clicks into place.

You're chatting with friends, listening to pithy words of wisdom from people you admire and chuckling at the inanities of celebrities. As for news, it always breaks on Twitter first – probably why the media's obsessed with it.

Think of Twitter as an up-to-the minute information feed, and a host of uses for it suddenly manifest, not least how valuable it can be when embedded in your website. It's an ideal complement to a blog or news site, and a positive boon to fan pages.

Getting the right tweets on your site may not even be as difficult as you might expect. If you want to integrate Twitter into your online life but don't know how to, we'll show you what to do.

Twitter via widgets

We first investigated several convoluted and code-heavy ways of embedding tweets into your own pages, but many of them are overkill, especially when Twitter itself provides such elegant and easy-to-use tools. Twitter widgets can be configured using a forms-based interface and may be embedded in any site.

The code returned is good old JavaScript, so it'll go anywhere in a static HTML page or CMS template. There's lots of scope for styling and tweaking, too.

Like many of Twitter's extended features, it's hidden pretty well on the main site. Log in to and scroll down to the bottom of the page. Once you're there, click 'Goodies', choose 'Widgets' and click 'Widgets for My Website'.

Step 1

You have a few choices right off the bat. Click on the 'Profile' link and you'll see that it's set up to show tweets from your Twitter account. However, you can replace the username with any Twitter username you know.

Give it a try: enter a new username and click 'Test Settings'. The widget preview will update to show the latest tweets from any account you choose – very handy for showing the feed from a corporate account or displaying incisive celebrity tweets on a fan site.

Configure the feed

Click 'Preferences' to configure the feed. Click 'Poll for New Results' if you want the widget to periodically refresh while the user is on your page – the default behaviour is to only pull results from Twitter when the page is loaded.

Step 2

You can change the number of tweets retrieved by the widget too. Alter the default of '4' to '6', for example, then hit 'Test Settings' to see the result. You'll notice that the height of the widget changes in response, unless you have 'Include Scrollbar' ticked.

Selecting 'Timed Interval' makes the widget clear the current list of tweets and replace it with a new set periodically. All of the associated settings are highly configurable. Now to dig out some specifics.

Pulling tweets directly from a single account is fine, but Twitter widgets get really powerful when you use them to focus on more specific sets of tweets. The Search and List widgets initially look identical to their Profile counterpart. However, the Search widget allows you to pull tweets from the entire feed using a single keyword.

Step 4

If that keyword happens to be a hashtag, even better. It enables you to instantly configure Twitter feeds for news and events that can help drive traffic to your blog. For example, let's say you're liveblogging the Eurovision song contest. A perfect sidebar would be a twitter feed of Eurovision tweets.

Making lists

Twitter lists enable you to create bespoke Twitter feeds from a group of users. To make a list, go to and look for the Lists column in the sidebar. Click 'New List' and a window will pop up prompting you for a name and a description. Fill it in, make sure the list is public and click 'Create List'.

You're taken to a page where you can now search for users and add them one at a time. Alternatively, you can add people to lists directly from your Following or Followers pages.

A tip: you don't have to be following someone to add them to your list. Now you have a list of people set up, you can create a widget that can easily be added to your website.


Uses for this? Let's say you have a list of news providers. Your widget would then be a live-updating news ticker that sits in the sidebar of your site. Or if you have a collaborative blog, you could add all the twitter feeds from contributors to the widget.

Thinking bigger, a search widget and list widget side by side could be used as a bespoke Twitter client aimed at your audience's interests.

Code wrangling

Whichever widget confi guration you finally choose, you'll have a comprehensive degree of control over the look of the widgets on your page. Click 'Dimensions' first. You're able to restrict the size of the widget to fit your page, or tick a box so that it automatically adjusts.

Click 'Appearance' and you can change the colour scheme for the Twitter widget to fit into your pages. Use it with the Chrome browser extension Colour Pick or the Firefox plugin ColourZilla to match the colours in your scheme and site. When you've finished tweaking, click 'Finish and Grab Code'.

Colour your widget

A form containing the configured code will appear. The code itself is pretty compact – that's because most of the hard work is done by an external JavaScript file, 'widget.js', referred to in the very first line.

Still, the variable and value pairs here are clear and self explanatory, so the widget script can be used to create further iterations without having to go back through all those menus. Width and height can be changed directly, and you can alter usernames or search terms.

Changing one widget type to another will require more coding, though, so if you want to do that, the best course of action is to return to the site and work back through the menus.

Article continues below