How to Embed Tweets in WordPress With Gutenberg

Published in WordPress.

Twitter is the most popular social network of the moment (apart from Instagram). Everyone uses Twitter. We see it on television, where more often people is identified by their Twitter usernames in addition to their real names.

When we are writing content for our website in WordPress, there are some times when we would like to embed tweets within the content. Surely you have seen many sites that include tweets between the paragraphs of their articles.

This is especially useful when you want to reference a conversation that has happened on Twitter easily. If the visitor wants to look at it, they can easily click on it and navigate directly to the tweet and follow the thread there. It’s all about making life easier for your visitors.

Today let’s see how we can embed tweets in our content when we use the WordPress block editor.

Embedding Tweets With Gutenberg Step by Step

The first thing we need to embed tweets in our content is to select the tweet we are going to embed. I know, captain obvious ☺️

Go to Twitter and find the tweet you want to embed. Then click on its date, as you can see in the following screenshot:

To see the details of a tweet you just have to click on its date within Twitter.
To see the details of a tweet you just have to click on its date within Twitter.

This leads you to see the details of the tweet within the Twitter interface. The important thing here is to get the tweet’s URL, since this is what we’ll need in the following steps.

Just copy the URL directly from the address bar of your browser:

You have the link to a tweet in the address bar of the browser.
You have the link to a tweet in the address bar of the browser.

We can now go back to WordPress, to the editing screen of our post or page. Now what we have to do is add a new block in the editor: a Twitter block. To achieve this, type a forward slash character / followed by the twitter word and you’ll be able to add a Twitter block:

The WordPress block editor allows you to add a Twitter type block to embed tweets.
The WordPress block editor allows you to add a Twitter block to embed tweets.

There are other ways to add a Twitter block to the editor using the editor’s own interface. We have the button to add blocks, which is the one with a circle that includes a + symbol inside. Choose the way you feel most comfortable to add the block, but note that writing the bar / in a new paragraph block is (usually) the fastest option.

Once the Twitter block has been added to the content, you will see the following:

The Twitter block allows you to include a tweet by pasting its URL.
The Twitter block allows you to include a tweet by pasting its URL.

The Twitter block is quite simple. It only has one text field and one button, in addition to the explanation of how we should use it.

Paste the URL we copied before into the text field in the Twitter block. This way, the block will be able to embed the tweet we want.

Paste the URL of a tweet into the Twitter block of the block editor to embed it.
Paste the URL of a tweet into the Twitter block of the block editor to embed it.

Click on the embed button and the block editor will automatically show a preview of the tweet we just embedded in the content. As simple as that!

The Twitter block shows the preview of the tweet that we have embedded in the editor.
The Twitter block shows the preview of the tweet that we have embedded in the editor.

The final result of embedding a tweet in the WordPress block editor is the one you see below:

This is how a tweet embedded in a post looks like in WordPress.

Keep in mind that depending on the theme you use in your WordPress you may be able to slightly style the embedded tweet. Furthermore, the Twitter block includes an option to adapt to the size of tweet when the size of the browser changes. This option is enabled by default, and you should not change it if you don’t know what you are doing.

On the other hand, if you are one of those who wants to do things faster, there is a shortcut for you. Once you have copied the URL of the tweet you want to embed, you just have to paste this URL directly into the WordPress block editor. This will automatically convert the paragraph block where you have pasted the URL of the tweet into a Twitter block with the tweet embedded, as you can see below:

If you paste the URL of a tweet into the block editor within a paragraph block, it will become a Twitter block with an embedded tweet.

It is very easy to embed external content in the WordPress block editor. Twitter is just an example, but there are plenty of possibilities to embed. I encourage you to take a look at the types of blocks that the block editor provides in order to know all the potential you have available.

Featured image by Benjamin Balázs on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.