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

0
51

Do you need to show your latest tweets in WordPress?

Integrating X/Twitter along with your WordPress web site helps improve consumer engagement. Your weblog guests can simply uncover your tweets, which may additionally enable you to get new followers on Twitter.

In this text, we’ll present you ways to show latest tweets in WordPress.

How to Display Recent Tweets in WordPressHow to Display Recent Tweets in WordPress

Why Display Recent Tweets on Your WordPress Site?

X/Twitter is without doubt one of the hottest social media platforms available on the market. Displaying latest tweets in your WordPress web site can improve your on-line presence and engagement in a number of methods.

For starters, when customers go to your web site and see your social media feed, they is likely to be intrigued sufficient to click on by way of to your Twitter account and comply with you, growing your attain.

Plus, tweets can function a real-time replace about what’s taking place in your web site or firm. This can encourage engagement amongst your viewers, as they’ll work together along with your tweets straight.

Recent tweets can even act as social proof in your WordPress website. You can retweet optimistic critiques or individuals recommending your merchandise, serving to construct belief with subscribers or prospects.

With this in thoughts, let’s have a look at the completely different strategies of displaying latest tweets in your WordPress website. You can use the fast hyperlinks beneath to skip to a particular technique:

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

The first technique to show your latest tweets in WordPress is by manually embedding your Twitter profile or timeline in your WordPress web page, put up, or widget (for traditional theme customers).

Just like including a YouTube video, WordPress makes it straightforward to embed Twitter content material like a single tweet or a timeline. Its oEmbed function can robotically flip a content material URL into an embed code when pasted into the block editor.

First, you want to discover and duplicate the URL of the Twitter profile or tweet that you want to embed.

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

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

Next, simply comply with one of many strategies beneath:

Displaying Recent Tweets in a WordPress Post or Page

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

If you need to create a new post or web page, you are able to do this by going to Posts/Pages » Add New.

Clicking Add New Page in WordPress admin areaClicking Add New Page in WordPress admin area

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

You can see this highlighted beneath.

Pasting a Twitter URL to the block editorPasting a Twitter URL to the block editor

Once you’ve completed that, the block will instantly flip right into a Twitter timeline block displaying latest Tweets from that specific account.

In the block settings sidebar, you may select to resize the block for smaller gadgets to make it extra responsive for cellular viewing.

Additionally, be happy to add extra blocks to the web page or put up to encourage customers to comply with your Twitter account.

Once completed, merely click on ‘Update’ or ‘Publish’ to make the modifications dwell.

Publishing a page with a Twitter FeedPublishing a page with a Twitter Feed

This technique provides your latest tweets inside a field with a vertical slider. The field consists of the 20 most up-to-date tweets and the ‘View more on Twitter’ button on the finish.

Here is what our Twitter timeline seems like:

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

If you employ a WordPress block theme, then you too can use this identical technique to embed a Twitter feed in the Full Site Editor and show latest tweets in a sample or template half.

You can study extra about this in our complete guide to WordPress Full Site Editing.

Displaying Recent Tweets in a WordPress Widget Area

If you employ a traditional WordPress theme and wish to show your newest tweets in a widget space (like a sidebar), then simply comply with these steps.

First, go to Appearance » Widgets. Then, click on the ‘+ Add New’ button in your chosen widget space and choose the Twitter widget.

Adding a Twitter widget in WordPressAdding a Twitter widget in WordPress

From right here, simply paste the Twitter account or put up URL in the suitable subject.

Then, click on ‘Embed.’

Embedding a Twitter profile in a WordPress widget areaEmbedding a Twitter profile in a WordPress widget area

You can then replace your widgets and preview the Tweets widget dwell in your website.

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

Example of a Twitter widget in a WordPress sidebarExample of a Twitter widget in a WordPress sidebar

The second technique to add latest tweets to your WordPress website is with a Twitter plugin. The cause why we suggest this technique is that it presents much more customization choices than the earlier technique, permitting you to regulate the feed to your web page design.

For this, we’ll use Smash Balloon Custom Twitter Feeds. This plugin helps to create stunning social feeds of various sorts. You can present tweets primarily based on hashtags, search phrases, mentions, timelines, and extra.

You will first want to install and activate the WordPress plugin. Once it’s energetic, go to your WordPress admin space, navigate to Twitter Feed » Settings, and paste your license key into the suitable subject.

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

Activating Smash Balloon's Custom Twitter Feeds Pro license keyActivating Smash Balloon's Custom Twitter Feeds Pro license key

Now, simply go to Twitter Feed » All Feeds.

Then, click on the ‘+ Add New’ button.

Adding a new Twitter Feed with Smash BalloonAdding a new Twitter Feed with Smash Balloon

If that is your first time including a Twitter feed utilizing Smash Balloon, then you may be requested to confirm your e mail handle.

Just go forward and click on the ‘Connect’ button to do this and comply with the on-screen directions.

Connecting the user's email address with Smash BalloonConnecting the user's email address with Smash Balloon

Once you’re completed, you’ll return to the Custom Twitter Feeds plugin web page and be requested to choose a feed sort.

With Custom Twitter Feeds, you may select to embed a consumer timeline feed, a hashtag feed, or a search feed. For the sake of this instance, we’ll use the primary choice. Once you’ve made your selection, simply click on ‘Next.’

Creating a User Timeline Twitter Feed with Smash BalloonCreating a User Timeline Twitter Feed with Smash Balloon

On the following display, you may sort in the Twitter deal with you need to embed in your WordPress website.

After that, click on ‘Next’ once more.

Choosing a Twitter Feed source in Smash BalloonChoosing a Twitter Feed source in Smash Balloon

Let’s now decide a Twitter feed template. There are 7 to select from, and you’ll all the time change it later if you happen to don’t suppose it fits your web page design.

After you might have made your selection, go forward and click on ‘Next.’

Choosing a Smash Balloon Twitter Feed templateChoosing a Smash Balloon Twitter Feed template

At this stage, you must arrive on the Twitter feed enhancing interface. You will see a dwell preview on the suitable aspect of the web page and a left-hand panel the place you may configure how the feed seems.

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

The Twitter Feed editing interface in Smash BalloonThe Twitter Feed editing interface in Smash Balloon

Let’s begin with Customize. If you select the ‘Feed Layout’ choice, then you may decide between the obtainable feed layouts (like checklist, masonry, or carousel) set the variety of tweets to show, tweak the feed top, and so forth.

Note: Because of API limitations, Smash Balloon can solely show 1 to 30 tweets at first, however extra will accumulate over time.

Once you’re completed with these settings, merely click on the ‘Customize’ button on the high to return to the primary menu.

Customizing the Twitter Feed layout in Smash BalloonCustomizing the Twitter Feed layout in Smash Balloon

Another factor you are able to do is allow the Load More button, which is able to seem beneath your displayed tweets. It’s a helpful function if in case you have tons of tweets however can not present all of them on the identical web page.

Just click on the ‘Load More Button’ choice, adopted by the ‘Enable’ button. After that, you may customise the button’s look.

Customizing the Twitter Feed Load More Button in Smash BalloonCustomizing the Twitter Feed Load More Button in Smash Balloon

If you turn to the ‘Settings’ tab, then you may see choices to add extra feed sources, apply tweet filters, and use superior options (like adding custom CSS).

You can even click on the ‘Clear Feed Cache’ button to take away the earlier feed cache. The subsequent time the plugin wants to show your Twitter feed, it can have to retrieve the most recent tweets from X/Twitter’s servers as a substitute of utilizing the previous cached information.

Customizing the Twitter Feed settings in Smash BalloonCustomizing the Twitter Feed settings in Smash Balloon

Let’s attempt including filters to your tweets by clicking the ‘Filters’ choice.

Here, you may select to embody replies and retweets, present tweets primarily based on which phrases are allowed or blocked, or conceal particular tweets.

Customizing the filters to display the Twitter Feed in Smash BalloonCustomizing the filters to display the Twitter Feed in Smash Balloon

Once you’re proud of how the Twitter Feed seems, you may click on the ‘Save’ button.

To add the Twitter Feed to your web page or widget space, simply click on on the ‘Embed’ button on the top-right nook.

After that, a popup will seem, displaying you ways to show the Twitter Feed: with a shortcode, a block, or a widget.

The Twitter Embed Feed popup in Smash BalloonThe Twitter Embed Feed popup in Smash Balloon

Regardless of the strategy you select, the very first thing you want to do is copy the shortcode as a result of you’ll need it.

Then, in order for you to embed the Twitter feed on a web page, click on the ‘+ Add to a Page’ button.

Once you do this, you may choose an current web page out of your WordPress web site and click on ‘Add.’

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

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

Click the ‘+’ add block button anyplace on the web page and choose the Twitter Feed block.

Selecting the Smash Balloon Twitter Feed block in the block editorSelecting the Smash Balloon Twitter Feed block in the block editor

Now, the Twitter Feed you created earlier could not present up instantly.

If this occurs to you, simply paste the shortcode into the ‘Shortcode Settings’ subject in the block settings sidebar.

After that, click on ‘Apply Changes.’

Inserting a shortcode in the Smash Balloon Twitter Feed blockInserting a shortcode in the Smash Balloon Twitter Feed block

Once completed, you may go forward and click on ‘Update’ to make the modifications dwell.

Here is what the Twitter Feed seems like on our demo website:

An example of the Twitter Feed made with Smash BalloonAn example of the Twitter Feed made with Smash Balloon

If you need to show your Twitter Feed in a widget space, then simply click on the ‘+ Add to a Widget’ choice. You can be redirected to the widget editor subsequent.

Then, merely discover and choose the ‘Twitter Feed’ widget.

Adding the Twitter Feed Smash Balloon widget in the widget editorAdding the Twitter Feed Smash Balloon widget in the widget editor

Similar to the earlier technique, simply paste the shortcode in the block settings sidebar and click on ‘Apply Changes.’

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

Inserting the Smash Balloon Twitter Feed shortcode in the widget editorInserting the Smash Balloon Twitter Feed shortcode in the widget editor

Finally, click on ‘Update’ to make the modifications remaining.

You can then go to your dwell web site to see what the feed seems like:

Example of the Twitter Feed widget made with Smash BalloonExample of the Twitter Feed widget made with Smash Balloon

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

The final technique allows you to add latest Twitter posts utilizing the Twitter Publish function.

Twitter Publish allows you to simply create the embed code for varied varieties of Twitter content material, together with a tweet, a video, a timeline, or a button (like a Follow or Share button).

This technique permits you to customise how the embedded component seems earlier than including it to your WordPress blog or web site. It’s not as highly effective because the second technique, however it’s price mentioning as a result of it’s free.

For this tutorial, we’ll present you ways to use Twitter Publish to embed a timeline. First, you want to go to the Twitter Publish web site after which paste your Twitter profile URL into the ‘What would you like to embed?’ field.

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

Inserting a Twitter URL in the Twitter Publish websiteInserting a Twitter URL in the Twitter Publish website

After that, you may be requested to select a show choice: Embedded Timeline or X/Twitter Buttons.

You ought to select the ‘Embedded Timeline’ choice, as you need to present your Twitter timeline with latest tweets.

Twitter Publish's display optionsTwitter Publish's display options

Upon deciding on the show choice, it can immediately create the embed code to your latest tweets. You can go forward and click on ‘Copy Code’ to embed the customized HTML code instantly.

Alternatively, click on ‘Set customization options’ to customise how the embedded timeline seems.

Customizing the Twitter Feed made with Twitter PublishCustomizing the Twitter Feed made with Twitter Publish

Here, you may customise the timeline’s top and width, select a light-weight or darkish mode, and allow a language translation for the tweets if wanted.

You can see what the embedded component will appear like beneath the settings. Once completed, simply click on ‘Update.’

Clicking Update in the Twitter Publish websiteClicking Update in the Twitter Publish website

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

Simply click on ‘Copy Code’ to proceed.

Copying a Twitter Publish embed codeCopying a Twitter Publish embed code

Now, return to your WordPress dashboard and open the block editor for a web page, put up, or widget space.

After that, simply click on the ‘+’ add block button anyplace in the editor and choose the Custom HTML widget or block.

Selecting the Custom HTML block in the block editorSelecting the Custom HTML block in the block editor

Now, go forward and paste the embed code from earlier in the sector.

Once completed, you may click on the ‘Preview’ button to see what the feed seems like.

Pasting the Twitter Publish HTML code in the block editorPasting the Twitter Publish HTML code in the block editor

After that, be happy to add extra parts to the web page, put up, or widget space. Then, simply replace or publish it.

Here’s what our demo web site seems like:

An example of Twitter Feed made with the Twitter Publish websiteAn example of Twitter Feed made with the Twitter Publish website

Bonus Tip: Add More Social Media Feeds to WordPress

Do you run different social media platforms to your model or enterprise? If so, then you may want to show different social feeds moreover Twitter in your web site.

By displaying completely different social feeds in your WordPress website, you may let guests know what platforms they’ll comply with you on, growing your follower depend.

Showing off your social feeds additionally has a key benefit over displaying the standard social icon buttons. It can present guests what content material they’d miss by not following you in your social networks, making a ‘fear of missing out.’

With Smash Balloon, you may show and customise every kind of social media feeds in your WordPress web site. This method, all the feeds look good with the theme you’re utilizing.

Customize TikTok feed layoutCustomize TikTok feed layout

Just try the tutorials beneath on how to show completely different social feeds in WordPress:

We hope this text helped you to find out how to present latest tweets in WordPress. You may need to see our ultimate guide to WordPress SEO (search engine optimization) or our professional decide of the best WordPress social media plugins.

If you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can even discover us on Twitter and Facebook.



Source link