{"id":38033,"date":"2021-01-11T12:06:57","date_gmt":"2021-01-11T10:06:57","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=38033"},"modified":"2023-01-03T12:15:23","modified_gmt":"2023-01-03T10:15:23","slug":"embed-tweets","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/embed-tweets\/","title":{"rendered":"How to Embed Tweets in WordPress Without Code (Beginner’s Guide)"},"content":{"rendered":"\n

Learning how to embed tweets in WordPress only takes a few simple steps and maybe a plugin if you want more advanced features. <\/p>\n\n\n\n

The goal of this tutorial is to help you feel comfortable embedding a tweet for your blog, allowing you to add live, interactive Twitter conversations from your own account or from others around the internet. <\/p>\n\n\n\n

You can choose to place one tweet in a post as a resource or even have a constantly updated feed from your account. Keep reading to learn how!<\/p>\n\n\n\n

How to embed tweets in WordPress with the default editor<\/h2>\n\n\n\n

The default WordPress editor<\/a> offers a large collection of drag-and-drop blocks <\/a>to incorporate elements into your WordPress pages and posts. <\/p>\n\n\n\n

This includes a dedicated block to embed tweets!<\/p>\n\n\n\n

This is the simplest option to place a tweet or short Twitter feed into a post or page. There aren’t any fancy customization or design tools, but it does the trick for instantly displaying a tweet on your website and not having to worry about embed code or plugins. <\/p>\n\n\n\n

Here’s how to use it…<\/p>\n\n\n\n\t\t

<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tBeginner's guide: How to embed #tweets in #WordPress \ud83d\udc26<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n\n\n\n

1. Add a Twitter block<\/h3>\n\n\n\n

To begin, go to your WordPress dashboard and either create a new post or page or edit an existing piece of content where you want to add a tweet.<\/p>\n\n\n\n

\"posts<\/figure><\/div>\n\n\n\n

Go to the area where you want to add your tweet and click the + <\/strong>icon to add a new block:<\/p>\n\n\n\n

\"add<\/figure><\/div>\n\n\n\n

Search for\/select the Twitter<\/strong> block to add it to your post:<\/p>\n\n\n\n

\"use<\/figure><\/div>\n\n\n\n

2. Paste in the URL to your tweet<\/h3>\n\n\n\n

Now it’s time to go to Twitter. It’s possible to publish anyone’s public tweets on your website, as long as it’s not a Twitter feed with a collection of tweets. <\/p>\n\n\n\n

Therefore, locate the tweet you’d like to embed and go to the specific page for that tweet only. <\/p>\n\n\n\n

The browser search bar shows a unique URL for the tweet. Copy the website URL to your computer’s clipboard. <\/p>\n\n\n\n

\"copy<\/figure><\/div>\n\n\n\n

Go back to the WordPress dashboard. <\/p>\n\n\n\n

You should now see a Twitter URL block asking for a link from the desired tweet. <\/p>\n\n\n\n

In the empty field, paste the tweet you copied from before.<\/p>\n\n\n\n

Click the Embed<\/strong> button to complete the process. <\/p>\n\n\n\n

\"paste<\/figure><\/div>\n\n\n\n

You should then see a live preview of the embedded tweet in the editor. There are some settings for mobile-friendliness and CSS, but that’s about it. <\/p>\n\n\n\n

\"embed<\/figure><\/div>\n\n\n\n

To make sure everything looks good, go to the frontend of that WordPress post or page to see the tweet prior to publishing. You’ll notice that when you embed tweets they offer interactive elements, like links, hashtags, and buttons to see the full tweet on Twitter or to visit the account. <\/p>\n\n\n\n

\"new<\/figure><\/div>\n\n\n\n

Bonus: Embed full “Tweetstorms”<\/h3>\n\n\n\n

One extra element that comes with the Twitter block is for embedding what are called “Tweetstorms.” A Tweetstorm is a series of related posts, usually published in succession. <\/p>\n\n\n\n

You can publish Tweetstorms, but you must be the owner of the Twitter account. <\/p>\n\n\n\n

To do so, click on the previously embedded tweet and push the Unroll option. <\/p>\n\n\n\n

This reveals several posts in a row, but only if the Tweetstorm is from your account, is recent, and the posts relate to each other. Otherwise, you’ll get an error. <\/p>\n\n\n\n

\"unroll<\/figure><\/div>\n\n\n\n

How to embed Twitter user or hashtag feeds in WordPress with a plugin<\/h2>\n\n\n\n

Quite a few plugins are available online for you to embed tweets with more advanced features. <\/p>\n\n\n\n

For instance, you may want a running feed from your Twitter account on your website, or maybe some tools to customize how those tweets look when embedded. <\/p>\n\n\n\n

We recommend testing out the myriad of plugins with these capabilities, but we mainly recommend the Smash Balloon Custom Twitter Feeds plugin<\/a>, which is what we’ll use in the tutorial below.<\/p>\n\n\n\n

1. Install the plugin<\/h3>\n\n\n\n

To get started, install and activate the Smash Balloon Twitter Feeds plugin. If you have any questions about that, learn how to install a plugin here<\/a>. <\/p>\n\n\n\n

2. Connect the plugin to your Twitter account<\/h3>\n\n\n\n

Select the new Twitter Feeds<\/strong> tab in your WordPress dashboard. <\/p>\n\n\n\n

\"Twitter<\/figure><\/div>\n\n\n\n

The plugin’s setup area has four steps. <\/p>\n\n\n\n

The first is the Configure<\/strong> tab. <\/p>\n\n\n\n

Click on the button to Log in to Twitter<\/strong>, which gives the plugin permission to import feeds using your Twitter account. <\/p>\n\n\n\n

\"login<\/figure><\/div>\n\n\n\n

Click the Authorize app<\/strong> button to give the Smash Balloon Twitter Feed plugin access to your Twitter account. <\/p>\n\n\n\n

\"authorize<\/figure><\/div>\n\n\n\n

This should link to your Twitter account. If not, you can select to manually retrieve your Access Token and Access Token Secret <\/strong>by following the plugin’s instructions.<\/p>\n\n\n\n

Save your changes after the account is linked. <\/p>\n\n\n\n

\"tokens<\/figure><\/div>\n\n\n\n

3. Configure feed settings<\/h3>\n\n\n\n

While still in the Configure<\/strong> tab, scroll down to modify your Feed Settings. For instance, you can choose to have a feed from a user account or from a hashtag. <\/p>\n\n\n\n

There are other free and premium settings, like how many tweets to display or advanced feed types. <\/p>\n\n\n\n

\"feed<\/figure><\/div>\n\n\n\n

4. Configure the layout for your feed<\/h3>\n\n\n\n

Save the changes and go to the Customize<\/strong> tab. <\/p>\n\n\n\n

Here you have settings to change the design of the Twitter feed. <\/p>\n\n\n\n

\"customize<\/figure><\/div>\n\n\n\n

You can adjust everything from the layout to what’s included in the tweets. You can also tell the plugin how many tweets you want to appear. <\/p>\n\n\n\n

\"layouts\"<\/figure><\/div>\n\n\n\n

5. Configure the design\/style of your feed<\/h3>\n\n\n\n

The Style<\/strong> tab is for other appearance modifications such as colors and text. <\/p>\n\n\n\n

Feel free to change things to match your brand. <\/p>\n\n\n\n

Remember to save your settings before going to another tab. <\/p>\n\n\n\n

\"style<\/figure><\/div>\n\n\n\n

6. Display your feed<\/h3>\n\n\n\n

The final step is to Display Your Feed<\/strong>.<\/p>\n\n\n\n

There are two ways to display the feed, but the only one listed on this page is the shortcode method<\/a>. Therefore, copy the given shortcode to your clipboard. <\/p>\n\n\n\n

\"copy<\/figure><\/div>\n\n\n\n

Navigate to a new or old post or page in WordPress. <\/p>\n\n\n\n

The first option for displaying the feed is pasting the shortcode into a Shortcode<\/strong> block.<\/p>\n\n\n\n

\"shortcode<\/figure><\/div>\n\n\n\n

The easier method is to search for and insert the Twitter Feed<\/strong> block. This block is from the Smash Balloon Twitter Feed plugin. <\/p>\n\n\n\n

\"Twitter<\/figure><\/div>\n\n\n\n

There’s no need for any further customization, since you already configured your feed in the settings area.<\/p>\n\n\n\n

Publish the post or page, and go to the frontend to see the tweets in action. For this tutorial, I opted for a hashtag feed, but you can choose your own account as well. <\/p>\n\n\n\n

\"embed<\/figure><\/div>\n\n\n\n

Embed tweets in WordPress today<\/h2>\n\n\n\n
\n
\n

Embedding a tweet doesn’t have to be a chore. Instead, utilize one of the methods outlined above – either with the native editor or a plugin – to embed tweets in WordPress without any problems. <\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tThe easy way to embed #tweets in #WordPress (for free) \ud83d\udc26<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n

For some other ideas to integrate Twitter into your WordPress site, we also have some other useful guides:<\/p>\n\n\n\n