October 22, 2012

Add Twitter's Timeline Widget

To display recent tweets from Twitter on your blog, you can use Twitter's Timeline widget.

As of October 2012, Twitter requires you to use the official Twitter timeline widget to display recent tweets on your blog or other website. Twitter's API no longer supports the use of the older Twitter widget or third-party widgets.

First, you'll need to start by configuring the widget within your Twitter account.

1. Sign in to your Twitter account.

2. From the Tools menu in the upper right corner of your Twitter account, select Settings.

Twitter Settings

3. In the left column, select Widgets.

4. Click Create new to start a new widget.

5. A majority of the default settings will be filled in for you, including the Username.

6. The Height, Theme, Auto expand photos, and Link color options can be adjusted. We recommend checking the box to Auto expand photos as it will allow photos (e.g Instagram, Flickr) linked in your tweets to display in the module on your blog.

7. Click Create widget.

8. The code for the widget will be displayed below the widget preview. Click in the box and key Ctrl+C (Windows) or Cmd+C (Mac) to copy the code.

Now you can add the widget to your blog at Typepad.

9. Sign in to your Typepad account.

10. Open the Blogs menu, select your blog, and click to the Design tab.

11. For most blogs using a pre-made or Theme Builder theme, select the Embed Your Own HTML module, click Add This Module, paste the Twitter widget code in the pop-up box, and click OK. After arranging the module in the blog's sidebar, click Save Changes to update your blog.

If the Twitter widget does not fit your sidebar, see the tips for adjusting the column width to accommodate for the timeline widget below.

If you do not have the Content or Embed Your Own HTML module options, please follow the steps below which apply to your blog's design:

  • For blogs using the Chroma theme, click the Custom Sidebar design option, paste the code for your widget in the text field, and click Save Changes.
  • For blogs using an Advanced Template Set, click on the name of the template (e.g. index.html, sidebar.inc) you wish to edit, paste the code for the widget where you want it to display, and click Save Changes. Repeat for other templates where you want to add the widget.
  • For blogs using a Mixed Media Layout with the recent photos module, you'll need to create a Notes Typelist and add a New Item to the list with the widget code. Then, go to Design > Content, select the Typelist, click Add This Module, and click Save Changes to update your blog.

Adjusting Column Widths To Fit Twitter Widget

The Twitter Timeline widget will adjust to fit the column width to a minimum of 220px wide. If the Twitter widget is not displaying in full, you will need to increase the sidebar width to accommodate for the widget.

  • Many of the newer pre-made themes allow for 300px sidebar modules. Try the Chevron, Chunky, or Metropolitan themes which have wider sidebar widths.
  • With the Theme Builder, you can adjust the sidebar column to 300px at Design > Content.
  • For all pre-made themes and custom themes created with the Theme Builder, you can customize the column widths to allow for wider modules using Custom CSS. See the article on customizing column widths for more information.

Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services