Shortcodes, Widgets & Sidebars

Widgets » Twitter Timeline Widget

Twitter offers embeddable timelines that allow you to display any public Twitter feed on your blog. These timelines are interactive, so readers can reply, retweet and favorite tweets straight from your blog or website.

Table of Contents


Overview

You can use our Twitter Timeline widget to put a timeline in your sidebar, or other widget area on your blog. Watch the video below for a quick overview of how it works, and read below for more examples and settings.


↑ Table of Contents ↑

Add the Twitter Widget

To add the widget to your site:

  1. In your dashboard, click on Appearance → Customize → Widgets.
  2. Choose the location where you’d like to place the widget on your site. Common options here include the Footer and Sidebar, but this may be different depending on your theme.
  3. Click either of the + block inserter buttons (see right) to see a list of all the available blocks and widgets.
  4. Scroll down to the Widgets section and click on the widget once to add it to your site.

For general information on working with widgets, see this guide.

The two + icon block inserter buttons are marked with arrows.
Block inserter buttons

↑ Table of Contents ↑

Settings

Click to expand the widget settings, and add your Twitter username under “Twitter Username.”

Here is the full list of options supported by this widget:

  • Title: Set a custom title to be displayed above the widget. The default text is “Follow me on Twitter,” but you can also change it to anything you like (e.g. “I’m on Twitter” or “Recent Tweets”).
  • Maximum Width: You can set a specific width (in pixels) for your timeline. If you leave this blank then it will try to automatically fill your sidebar.
  • Height: You can set a specific minimum height (in pixels) for your timeline. When a number of tweets (setting mentioned below) is specified, the scrollbar is disabled. This means that the widget will also ignore the “Height” setting; the widget’s height will be based on the size of the tweets.
  • # of Tweets Shown: This setting defines the number of Tweets displayed and also height of your widget.
  • Twitter Username: The Twitter user whose public tweets will be displayed in the timeline widget.
  • Layout Options: You can play around with these options to change how your timeline looks. You’ll see a preview of the changes in your Customizer.
  • Border Color: If you’d like to customize your timeline to match your theme better, then you can enter the hex code for a color in this box.
  • Timeline Theme: Twitter provides a dark and a light color theme for the timeline, so depending on your blog’s theme, you might want to change this.

Once you’re done setting your options, just click Save and you can refresh your site to see it in action.


↑ Table of Contents ↑

Embedding with a Shortcode

You can also embed your Twitter Timeline on a post or page on your blog.

In the WordPress Editor, add a Shortcode Block and add the following shortcode:

[twitter-timeline username=yourhandle]

Replace yourhandle with your Twitter handle, without the @ symbol.

If you are using the Classic Editor, paste the shortcode into the Visual editor and it will automatically display your Twitter timeline when you publish the page or post.

That’s it! When you publish the post, it will look something like this:


↑ Table of Contents ↑

Embedding Collections

If you are using TweetDeck Collections you can can copy the URL of the collection and paste it into a post or page. The feed will embed automatically.

If you want more control over the look of the embed, you can use a shortcode to embed a collection on your site or blog.

To do so, you will need the collection ID. The Collection ID is at the end of the URL and will look something like this: 539487832448843776.

Using the same steps as above for embedding shortcode, you will add the following shortcode:

[[twitter_collection id="539487832448843776"]]

Click here for supported shortcode parameters.

Not quite what you're looking for?

Get Help