Blocks

Blocks »Twitter Block

Use the Twitter block to embed tweets into your posts and pages like this:

The Twitter block is only for embedding individual tweets. Embedding a Twitter feed in its entirety is not supported at this time.

Table of Contents

Adding a Twitter Block

Animated image of adding the Twitter block by typing /twitter into a new block

To add the Twitter Block you can click the + Add Block button and search for “Twitter”. You can also type /twitter on a new line to find the block.

Detailed instructions on adding blocks can be found here.

When you insert the block, there is a field to enter the URL (aka link) to the tweet you want to embed. To find that link, go to Twitter and either copy the link on the date of the tweet, or click the down arrow at the top right of the tweet to find the “Copy Link to Tweet” option. Then paste that link in the block and click Embed.

Twitter also has an ‘Embed Tweet’ option with a code. This method is not supported. Simply use the link instead.


↑ Table of Contents ↑

Block Toolbar

To reveal the block toolbar, you can click on the block and the toolbar will display.

Each block has its own block-specific controls that allow you to manipulate the block right in the editor.

Twitter block toolbar options
Twitter block toolbar options

The Twitter block offers the following options in its toolbar:

  • Align left
  • Center
  • Align right
  • Wide (if supported by theme)
  • Full width (if supported by theme)
  • Edit
  • More Options

To change the URL of the embedded tweet, click the Edit icon in the toolbar.


↑ Table of Contents ↑

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.

↑ Table of Contents ↑

AMP Settings

These settings are shown only on sites with the Business and eCommerce plans with plugins installed.

The AMP Settings for the Twitter block control how it will display on Accelerated Mobile Pages.

There is also a toggle option for AMP noloading. Enable this option if you want to hide the loading symbol that shows while loading the embed on the AMP page.


↑ Table of Contents ↑

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. Learn more.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

The instructions from this guide are referring to the WP Admin dashboard. You can get to this dashboard by adding /wp-admin to the end of your site’s url (e.g.: example.wordpress.com/wp-admin)

If you’re looking to embed tweets using the Block editor, use the Twitter block.

Watch the video below for a quick overview of how to embed tweets in the Classic editor, and read below for more examples and settings.

To embed a tweet, just paste a tweet URL on its own line.

Unlike the Twitter Timeline Widget, which displays a Twitter feed in your sidebar, a Twitter embed allows you to display an individual tweet in a blog post or post comment, complete with:

  • The tweet’s text
  • Action links allowing readers to reply to, retweet, and favorite tweets without leaving your site
  • Inline links, links to hashtag pages, linked usernames, and a follow button in the tweet
  • A border around the tweet showing part of the background image from the Twitter profile

↑ Table of Contents ↑

Embedding with a URL

First, locate the tweet you want to post. Then click the timestamp.

tweet timestamp

You’ll be taken to the page for that individual tweet. Copy the URL in the address bar.

tweet URL in browser

Next, paste it on a line by itself in the Visual editor. Make sure that it is not hyperlinked.

That’s it! You’ll see a preview of the tweet in the Visual Editor.

↑ Table of Contents ↑

Embedding with a Shortcode

If you want more control over the display and layout of the tweet you are embedding, you can use a special shortcode. Copy and paste one of the following shortcodes into a post, page, or text widget. Be sure to change the tweet URL or ID to the one that you want to embed.

Display a tweet:

[tweet https://twitter.com/wordpressdotcom/status/632582884654751744 ]

Display a tweet with a smaller width:

[tweet https://twitter.com/wordpressdotcom/status/632582884654751744 width='200']

Display the follow button and tweet actions in a different language:

[tweet https://twitter.com/wordpressdotcom/status/632582884654751744 lang='ko']

Hide or show context when a tweet is in reply to another tweet:

[tweet 552831565495955456]

[tweet 552831565495955456 hide_thread='true']

Hide or show the media item from the linked site:

[tweet 632582884654751744 hide_media='true']

Combine parameters:

[tweet 632582884654751744 hide_thread='true' width='250' lang='ko']

Align a tweet to the left, right, or center:

[tweet 632582884654751744 align='right']

↑ Table of Contents ↑

Troubleshooting

For information about troubleshooting Twitter embeds, take a look at our Troubleshooting Embed Links doc.

Not quite what you're looking for?

Get Help