Mister Hosting

How to Display Recent Tweets in WordPress (Step by Step)

How to Display Recent Tweets in WordPress (Step by Step)


Do you want to display your recent tweets in WordPress?

Integrating X/Twitter with your WordPress website helps increase user engagement. Your blog visitors can easily discover your tweets, which can also help you get new followers on Twitter.

In this article, we will show you how to display recent tweets in WordPress.

Why Display Recent Tweets on Your WordPress Site?

X/Twitter is one of the most popular social media platforms on the market. Displaying recent tweets on your WordPress website can enhance your online presence and engagement in several ways.

For starters, when users visit your website and see your social media feed, they might be intrigued enough to click through to your Twitter account and follow you, increasing your reach.

Plus, tweets can serve as a real-time update about what’s happening on your website or company. This can encourage engagement among your audience, as they can interact with your tweets directly.

Recent tweets can also act as social proof on your WordPress site. You can retweet positive reviews or people recommending your products, helping build trust with subscribers or customers.

With this in mind, let’s look at the different methods of displaying recent tweets on your WordPress website. You can use the quick links below to skip to a specific method:

Method 1: Manually Embed Tweets in the Gutenberg Block Editor (No Plugin)

The first method to display your recent tweets in WordPress is by manually embedding your Twitter profile or timeline on your WordPress page, post, or widget (for classic theme users).

Just like adding a YouTube video, WordPress makes it easy to embed Twitter content like a single tweet or a timeline. Its oEmbed feature can automatically turn a content URL into an embed code when pasted into the block editor.

First, you need to find and copy the URL of the Twitter profile or tweet that you want to embed.

For example, the Twitter profile URL of WPBeginner is https://twitter.com/wpbeginner

Meanwhile, the URL of a single tweet looks like this: https://twitter.com/wpbeginner/status/1604852592827326464

Next, just follow one of the methods below:

Displaying Recent Tweets in a WordPress Post or Page

First, log into your WordPress dashboard and open the block editor for a WordPress post or page.

If you want to create a new post or page, you can do this by going to Posts/Pages » Add New.

Clicking Add New Page in WordPress admin area

Then, simply paste the Twitter profile URL that you copied earlier in the ‘Type / to choose a block’ area.

You can see this highlighted below.

Pasting a Twitter URL to the block editor

Once you’ve done that, the block will immediately turn into a Twitter timeline block showing recent Tweets from that particular account.

In the block settings sidebar, you can choose to resize the block for smaller devices to make it more responsive for mobile viewing.

Additionally, feel free to add more blocks to the page or post to encourage users to follow your Twitter account.

Once done, simply click ‘Update’ or ‘Publish’ to make the changes live.

Publishing a page with a Twitter Feed

This method adds your recent tweets inside a box with a vertical slider. The box includes the 20 most recent tweets and the ‘View more on Twitter’ button at the end.

Here is what our Twitter timeline looks like:

An example of a page with a Twitter Feed made with the built-in Twitter block

If you use a WordPress block theme, then you can also use this same method to embed a Twitter feed in the Full Site Editor and display recent tweets in a pattern or template part.

You can learn more about this in our complete guide to WordPress Full Site Editing.

Displaying Recent Tweets in a WordPress Widget Area

If you use a classic WordPress theme and want to display your latest tweets in a widget area (like a sidebar), then just follow these steps.

First, go to Appearance » Widgets. Then, click the ‘+ Add New’ button in your selected widget area and select the Twitter widget.

Adding a Twitter widget in WordPress

From here, just paste the Twitter account or post URL in the appropriate field.

Then, click ‘Embed.’

Embedding a Twitter profile in a WordPress widget area

You can then update your widgets and preview the Tweets widget live on your site.

Here’s how the timeline appears in our WordPress sidebar:

Example of a Twitter widget in a WordPress sidebar

The second method to add recent tweets to your WordPress site is with a Twitter plugin. The reason why we recommend this method is that it offers a lot more customization options than the previous method, allowing you to adjust the feed to your page design.

For this, we will use Smash Balloon Custom Twitter Feeds. This plugin helps to create beautiful social feeds of different types. You can show tweets based on hashtags, search terms, mentions, timelines, and more.

You will first need to install and activate the WordPress plugin. Once it’s active, go to your WordPress admin area, navigate to Twitter Feed » Settings, and paste your license key into the appropriate field.

After that, you need to activate the license and click ‘Save Changes.’

Activating Smash Balloon's Custom Twitter Feeds Pro license key

Now, just go to Twitter Feed » All Feeds.

Then, click the ‘+ Add New’ button.

Adding a new Twitter Feed with Smash Balloon

If this is your first time adding a Twitter feed using Smash Balloon, then you will be asked to verify your email address.

Just go ahead and click the ‘Connect’ button to do that and follow the on-screen instructions.

Connecting the user's email address with Smash Balloon

Once you are done, you will return to the Custom Twitter Feeds plugin page and be asked to select a feed type.

With Custom Twitter Feeds, you can choose to embed a user timeline feed, a hashtag feed, or a search feed. For the sake of this example, we will use the first option. Once you’ve made your choice, just click ‘Next.’

Creating a User Timeline Twitter Feed with Smash Balloon

On the next screen, you can type in the Twitter handle you want to embed on your WordPress website.

After that, click ‘Next’ again.

Choosing a Twitter Feed source in Smash Balloon

Let’s now pick a Twitter feed template. There are 7 to choose from, and you can always change it later if you don’t think it suits your page design.

After you have made your choice, go ahead and click ‘Next.’

Choosing a Smash Balloon Twitter Feed template

At this stage, you should arrive at the Twitter feed editing interface. You will see a live preview on the right side of the page and a left-hand panel where you can configure how the feed looks.

There are two tabs: ‘Customize’ and ‘Settings.’

The Twitter Feed editing interface in Smash Balloon

Let’s start with Customize. If you choose the ‘Feed Layout’ option, then you can pick between the available feed layouts (like list, masonry, or carousel) set the number of tweets to display, tweak the feed height, and so on.

Note: Because of API limitations, Smash Balloon can only display 1 to 30 tweets at first, but more will accumulate over time.

Once you are done with those settings, simply click the ‘Customize’ button at the top to go back to the main menu.

Customizing the Twitter Feed layout in Smash Balloon

Another thing you can do is enable the Load More button, which will appear below your displayed tweets. It’s a handy feature if you have tons of tweets but cannot show them all on the same page.

Just click the ‘Load More Button’ option, followed by the ‘Enable’ button. After that, you can customize the button’s appearance.

Customizing the Twitter Feed Load More Button in Smash Balloon

If you switch to the ‘Settings’ tab, then you can see options to add more feed sources, apply tweet filters, and use advanced features (like adding custom CSS).

You can also click the ‘Clear Feed Cache’ button to remove the previous feed cache. The next time the plugin needs to display your Twitter feed, it will have to retrieve the latest tweets from X/Twitter’s servers instead of using the old cached data.

Customizing the Twitter Feed settings in Smash Balloon

Let’s try adding filters to your tweets by clicking the ‘Filters’ option.

Here, you can choose to include replies and retweets, show tweets based on which words are allowed or blocked, or hide specific tweets.

Customizing the filters to display the Twitter Feed in Smash Balloon

Once you are happy with how the Twitter Feed looks, you can click the ‘Save’ button.

To add the Twitter Feed to your page or widget area, just click on the ‘Embed’ button at the top-right corner.

After that, a popup will appear, showing you how to display the Twitter Feed: with a shortcode, a block, or a widget.

The Twitter Embed Feed popup in Smash Balloon

Regardless of the method you choose, the first thing you need to do is copy the shortcode because you will need it.

Then, if you want to embed the Twitter feed on a page, click the ‘+ Add to a Page’ button.

Once you do that, you can select an existing page from your WordPress website and click ‘Add.’

Selecting a page to embed the Twitter Feed in using Smash Balloon

You will then be directed to the WordPress block editor of your chosen page.

Click the ‘+’ add block button anywhere on the page and select the Twitter Feed block.

Selecting the Smash Balloon Twitter Feed block in the block editor

Now, the Twitter Feed you created earlier may not show up right away.

If this happens to you, just paste the shortcode into the ‘Shortcode Settings’ field in the block settings sidebar.

After that, click ‘Apply Changes.’

Inserting a shortcode in the Smash Balloon Twitter Feed block

Once done, you can go ahead and click ‘Update’ to make the changes live.

Here is what the Twitter Feed looks like on our demo site:

An example of the Twitter Feed made with Smash Balloon

If you want to display your Twitter Feed in a widget area, then just click the ‘+ Add to a Widget’ option. You will be redirected to the widget editor next.

Then, simply find and select the ‘Twitter Feed’ widget.

Adding the Twitter Feed Smash Balloon widget in the widget editor

Similar to the previous method, just paste the shortcode in the block settings sidebar and click ‘Apply Changes.’

You will then see your newly created Twitter Feed in the live preview.

Inserting the Smash Balloon Twitter Feed shortcode in the widget editor

Finally, click ‘Update’ to make the changes final.

You can then visit your live website to see what the feed looks like:

Example of the Twitter Feed widget made with Smash Balloon

Method 3: Display Latest Tweets in WordPress With Twitter Publish (No Plugin)

The last method lets you add recent Twitter posts using the Twitter Publish feature.

Twitter Publish lets you easily create the embed code for various types of Twitter content, including a tweet, a video, a timeline, or a button (like a Follow or Share button).

This method allows you to customize how the embedded element looks before adding it to your WordPress blog or website. It’s not as powerful as the second method, but it’s worth mentioning because it’s free.

For this tutorial, we will show you how to use Twitter Publish to embed a timeline. First, you need to visit the Twitter Publish website and then paste your Twitter profile URL into the ‘What would you like to embed?’ box.

Once that’s done, click on the arrow icon.

Inserting a Twitter URL in the Twitter Publish website

After that, you will be asked to choose a display option: Embedded Timeline or X/Twitter Buttons.

You should choose the ‘Embedded Timeline’ option, as you want to show your Twitter timeline with recent tweets.

Twitter Publish's display options

Upon selecting the display option, it will instantly create the embed code for your recent tweets. You can go ahead and click ‘Copy Code’ to embed the custom HTML code right away.

Alternatively, click ‘Set customization options’ to customize how the embedded timeline looks.

Customizing the Twitter Feed made with Twitter Publish

Here, you can customize the timeline’s height and width, choose a light or dark mode, and enable a language translation for the tweets if needed.

You can see what the embedded element will look like below the settings. Once done, just click ‘Update.’

Clicking Update in the Twitter Publish website

The embed code will now include the customization settings you have chosen for the timeline.

Simply click ‘Copy Code’ to continue.

Copying a Twitter Publish embed code

Now, go back to your WordPress dashboard and open the block editor for a page, post, or widget area.

After that, just click the ‘+’ add block button anywhere in the editor and select the Custom HTML widget or block.

Selecting the Custom HTML block in the block editor

Now, go ahead and paste the embed code from earlier in the field.

Once done, you can click the ‘Preview’ button to see what the feed looks like.

Pasting the Twitter Publish HTML code in the block editor

After that, feel free to add more elements to the page, post, or widget area. Then, just update or publish it.

Here’s what our demo website looks like:

An example of Twitter Feed made with the Twitter Publish website

Bonus Tip: Add More Social Media Feeds to WordPress

Do you run other social media platforms for your brand or business? If so, then you might want to display other social feeds besides Twitter on your website.

By displaying different social feeds on your WordPress site, you can let visitors know what platforms they can follow you on, increasing your follower count.

Showing off your social feeds also has a key advantage over displaying the usual social icon buttons. It can show visitors what content they would miss by not following you on your social networks, creating a ‘fear of missing out.’

With Smash Balloon, you can display and customize all kinds of social media feeds on your WordPress website. This way, all of the feeds look good with the theme you are using.

Customize TikTok feed layout

Just check out the tutorials below on how to display different social feeds in WordPress:

We hope this article helped you to learn how to show recent tweets in WordPress. You may also want to see our ultimate guide to WordPress SEO (search engine optimization) or our expert pick of the best WordPress social media plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.





Source link

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다