Add Twitter's Timeline Widget
To display recent tweets from Twitter on your blog, you can use Twitter's Timeline widget.
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.
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. The Domains field must be completed. In the Domains field, you need to enter the domain or subdomain for the site(s) where you want to display the widget. The addresses added to the Domains must be included correctly, or the recent tweets will not display on your blog. Please keep in mind:
- You can include multiple domains separated by commas. For example: help.typepad.com, everything.typepad.com, www.typepad.com
- Add both the mapped and unmapped domain if you using Domain Mapping for your blog. For example: www.mymappeddomain.com, subdomain.typepad.com
- If you have another domain masked to your site, add both the masked and non-masked domain.
- Do not include http:// for your blog's address.
- Do not include the blog's folder name, only the main domain name for your account.
- Do not include www if you are adding a subdomain. Correct: subdomain.typepad.com. Incorrect: www.subdomain.typepad.com.
If the Domains are not entered correctly, the recent tweets will not display on your blog.
8. Click Create widget.
9. 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.
11. Open the Blogs menu, select your blog, and click to the Design tab.
12. 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 or TweetPad 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.