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
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 Twitter.com 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="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
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="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
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="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
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="https://twitter.com/twitterapi" 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="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
Final Widget Look
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!