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

Adding the Widget
Embedding with a Shortcode
Embedding Collections

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.

Adding the Widget

Create a widget by going to My Sites → Design → Customize.

In the Customizer, go to Widgets, then Add a Widget:

add-a-widget-092015

Search for “Twitter” and you’ll see a Widget option for adding your Twitter Timeline:

twitter-widget-092015

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.
  • Link/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 these boxes.
  • 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.

In 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