Adding a Twitter Feed to Your Website

Posted on by

Share Button

You have started using Twitter; and you now regularly update your account with useful and relevant tweets. Great! Now you want to let all of your website visitors know about your mastery of Twitter. I’ve put together this tutorial to show you how to add your Twitter feed to your website.


Official Twitter Feed Widget

The most direct approach is to put the official Twitter widget on your website. The widget can be embedded on any website that allows the use of JavaScript (which is most websites). The widget is also smart enough to handle some size adjustment if you are using a responsive website.

One of the main advantages to using the widget directly from Twitter is that Twitter will keep it up to date with their changes. If they make a change in the future, you have a good likelihood that your widget will continue to work. The widget also has enough customizations that can be tailored to suit most needs.

The downside to using the widget is that you do need to have at least a copy/paste familiarity with HTML. If you want a no HTML knowledge approach then you will need to use a plugin for your particular CMS.

Setting Up Twitter Widget

Step 1: Go to Twitter Settings

Go to and if you aren’t already logged in with the account you want to use, log in. Once logged in you will see a wheel symbol in the upper right. Click on the wheel symbol and select Settings.


Step 2: Select Twitter Widgets

Once you are in Settings you will see a menu on the left side. The last item is Widgets, click on Widgets.


Step 3: Create New Twitter Widget

To create a new Twitter widget, click on Create New in the upper right.


Step 4: Configure Widget

For this tutorial we won’t be changing any of the standard options, but I’ll briefly cover what they are.

  • Timeline source: We’ll be using the ‘User timeline’. Favorites would display recent items that a user had favorited. List would display tweets from a particular list (from your settings > lists). Search would display recent tweets matching a specific search criteria. Custom would allow other options.
  • Username: This is the username whose most recent tweets will be displayed. Your currently logged in username will be displayed. You can change this if desired.
  • Options: You can include or exclude replies to your tweets. You can choose to automatically expand photos or leave them as links. Auto-expanding photos will cause your timeline vertical size to vary.
  • Height: If you want to specify a specific height for your widget you can do so here. If you don’t specify any height than the widget will be bounded by the dimensions of the div containing it.
  • Theme: Light uses dark text on a light background. If you are going to be placing the widget somewhere that has a dark background and you want light text, select the Dark option.
  • Link Color: You can customize the color used for links. If your website has red links for example you may want to also have your Twitter feed use red links.

Once you have the settings you want, click on ‘Create widget’.


Step 5: Copy Code

After you click on Create widget a new box will appear on your screen with code in it. This code will already be selected so all you need to do is copy the code to your clipboard (Edit > Copy).


You can always access your widget later and copy the code by just going to your Twitter account > Settings > Widgets and clicking on the appropriate widget.

Placing Twitter Feed Widget

Now that you have the code for your widget, you need to place that code on your website. If you use a CMS, then you could tuck the code away neatly in a CMS widget. If you don’t use a CMS or want to place the Twitter feed in another location, just paste the Twitter code where you would like it. In my case I use WordPress, so I’ve put the code in a WordPress text widget in the footer.

Client Side Configurations

The official guide to configuring your Twitter feed widget is available from Twitter Developers. I’ve put together a list of the commonly desired customizations and how they look when added to your code.


For the most part you shouldn’t need to explicitly set the width and height of the widget, it will detect the size of its containing div and match those dimensions. This is particularly helpful if your website is responsive.

However, you should be aware of a few limits. The minimum width is 180px and the maximum width is 520px. The normal minimum height is 200px. I say normal minimum because if you set the number of tweets to 1, the widget will size itself to accommodate only the most recent tweet. That single tweet may result in less than 200px in height.

To explicitly set the size dimensions of a widget, include width and height in the anchor tag.

<a class="twitter-timeline" width="300" height="500" href="" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

Link Color

If you didn’t set your desired link color in your widget you can set it here (or if someone else sent you the code and you want to override the color). As an example, I’ll use red as the link color (hex value ff0000). Add data-link-color="#ff0000" to the anchor tag.

<a class="twitter-timeline" data-link-color="#ff0000" href="" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

Border Color

Here you can set the border color for your widget. If you want to change the color from grey to something that matches your site style better you can set it here. As an example, I’ll use green (hex value 00ff00). Add data-border-color="#00ff00" to the anchor tag.

<a class="twitter-timeline" data-border-color="#00ff00" href="" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

Tweet Limit

Depending on where and how you want to use your widget, you may want to limit it to a certain number of tweets. For example just the most recent tweet is a common use. For this you can set the tweet limit by adding data-tweet-limit="1" to the anchor tag.

<a class="twitter-timeline" data-tweet-limit="1" href="" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

Layout & Background

The standard layout for the widget is a header, the tweets, and a footer. The header at the top says whose feed it is and includes a follow button. The main body of tweets are displayed with a scroll bar if needed. The footer contains a tweet to link. Finally, the entire widget has a white or black background color depending on the theme you chose.

The chrome property allows you to change these options. If you want to change a default, then you need to include the chrome. If you want to change more than option, just separate your choices by a space. For example to remove the footer and make the background transparent you can add data-chrome="nofooter transparent" to the anchor tag.

  • noheader: Removes the header.
  • nofooter: Removes the footer.
  • noborders: Removes the outside border and the internal borders which separate tweets from each other and the header & footer from the tweets.
  • noscrollbar: Removes the scrollbar.
  • transparent: Removes the background color. The only way to set a specific background color for the widget is to make the background transparent and put the widget in a div with a background color.

<a class="twitter-timeline" data-chrome="nofooter transparent" href="" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

Final Widget Look

<a class="twitter-timeline" data-link-color="#ff0000" data-border-color="#00ff00" data-tweet-limit="1" data-chrome="nofooter noscrollbar" href="" data-tweet-limit="1" data-widget-id="405880014119260160">Tweets by @Anphira</a> Followed by the javascript code that Twitter provides you.


Adding a Twitter feed to your website is pretty straight forward as long as you can do some basic HTML copy & paste. Hopefully this tutorial has made the process straightforward and easy for you to implement, but if you need assistance making this modification or others to your website, drop us a line!

Share Button

13 thoughts on “Adding a Twitter Feed to Your Website

    • Dany,

      If you want just the text, you’ll need to use an alternate method than what is described here. There are some twitter plugins for WordPress which offer different sets of features.

  1. Hi, I cannot get the timeline to appear just the text line with a follow link.
    Twitter don’t give you the widget id now so a lot of the plugin modules don’t work. I just want the latest tweet to appear.

    • Don’t use a plugin module, go directly to Twitter’s website and create a widget there. Just select “List” when creating a new widget.

    • If you are having difficulty with make sure you are directly visiting and not some other location within twitter. If that doesn’t fix it, you will need to contact twitter’s help support for what may be wrong with your specific browser.

    • Murugesan,

      You’ll need to use the data-chrome=”noheader” feature to remove the whole header if you want to remove the follow button. It’s embedded as an iFrame, so you don’t actually have control over the embedded CSS. If you want more styling control, you’ll need to use a plugin like Display Tweets for WordPress.

    • Take a look at the section of the article for Layout and Background. It covers removing the footer which is where the Tweet to box is.


Leave a Reply

Your email address will not be published. Required fields are marked *