Shortcodes, Widgets & Sidebars

Widgets »Twitter Timeline Widget

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

Embedding with a Shortcode

First, go to Twitter and create your Twitter Widget. There, you can pick your color scheme and size your Twitter widget. Once you’re done, click “Save Changes.”

To insert the widget into your WordPress.com post, paste the following shortcode into your post editor:

[twitter-timeline id=1234 username=yourhandle]

In the shortcode, id is the long number you see in the URL while editing your Twitter widget, and username is your twitter handle, without the @ symbol.

twitter-widget-id

It will look something like this in your post:

twitter-timeline-wordpress

When you’re all done, it should look something like this:

Twitter Timeline Widget

You can also use our Twitter Timeline widget to put a timeline in your sidebar, or other widget-enabled area.

Configuring Widget

Once you add the widget to your sidebar from the Appearance -> Widgets page, you’ll see that the widget settings look like this:

twitter-timeline-widget

  • Title: Set a custom title to be displayed above the widget. Something like “I’m on Twitter” or “Recent Tweets”.
  • Width: You can set a specific width (in pixels) for your timeline. If you set this to “0″ then it will try to automatically fill your sidebar.
  • Height: You can make your timeline taller or shorter by setting a height. The default is 400px which will normally show 2 or 3 of your most recent tweets (you can see the rest by scrolling).
  • Widget ID: A unique number which identifies your widget with Twitter. See the above Embedding with a Shortcode section on where to get this number.
  • Layout Options: You can play around with these options to change how your timeline looks. Each one is a toggle so just check the box and click Save, then refresh your site to see how it looks.
  • 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.

Not quite what you're looking for?

Get Help