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.
Nelio Forms
A fantastic contact plugin using the block editor. In its simplicity lies the true power of this plugin. I love it, very versatile and it worked perfectly for me.
Wajari Velasquez
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:
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:
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:
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 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.
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 final result of embedding a tweet in the WordPress block editor is the one you see below:
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:
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.
Leave a Reply