How to Add Social Media Feeds to Elementor [For Newbies]
Home Blog How to Add Social Media Feeds to Elementor [For Newbies]

How to Add Social Media Feeds to Elementor [For Newbies]

how to add social media feeds to elementor

Do you want to learn how to embed social feeds to WordPress websites?

With a social feed embed, you can grow your social media presence while adding more relevant content to your website.

In this article, we will show you how you can embed social feeds to Elementor.

Since this is a comprehensive guide, you can use the following table of contents to navigate through the article easily:

But, before we dive straight into the article, let’s first look at why you should embed Social feed to your website and how Elementor makes this process very easy.

Why Add Social Feeds to Your Elementor Site

As a popular page builder for WordPress, Elementor is used by tons of people to create a website for their brand.

elementor homepage

With its drag-and-drop website builder, Elementor can let people design engaging websites with ease — even if they don’t have experience with coding.

But if you want to make your site stand out, an easy solution is to display social media feeds in Elementor.

By showing content from popular social media platforms, you can make your site much more engaging with photos, videos, live streams, and more.

example of elementor playlist in wordpress

And that’s just the start! Here’s how adding social feeds to Elementor can help your website:

  • You can show social media reviews and testimonials on your site to boost your conversions and get more sales with ease.
  • Displaying your own social media content is a great way to get tons of new followers and boost your brand’s social media presence.
  • With fresh content from social media, you can even get much better SEO and rank higher in search engine results.
  • Social feeds can also show visitors that your brand is active on social media if they ever need to reach out to you.

As a result, you can get more sense, boost your brand’s profile, and grow your business effectively using social media feeds.

Now let’s look at the ways to add social media feeds to your Elementor website.

How Do I Add Social Media Feeds to Elementor

The easiest way to add social media feeds with Elementor is to use a WordPress plugin.

With a social media feed plugin, you can quickly embed your social feeds to any part of your website and quickly customize them to fit your needs.

A quick search will show you that there are tons of options when it comes to WordPress social media feed plugins. But finding the right one that covers all your needs might be a bit difficult.

So, if you want an easy yet powerful plugin to add and embed social media feeds with Elementor, you can use Smash Balloon’s collection of social media feed plugins.

smash balloon best social media feed plugins

Smash Balloon has all the popular social media sites like Facebook, Instagram, Youtube, and Twitter covered.

With it, you can easily display and embed your social media content to engage visitors while growing your follower count.

The plugins are specifically designed to be easy to set up and customize. So, you can have beautiful social feeds displayed on your website in just minutes!

guided flow smash balloon

What’s more, Smash Balloon plugins are optimized for speed as well, so you can embed as many social feeds as you want, and your site will still load as fast as ever.

Plus, you get much better SEO with a faster site that’s showing fresh content from social media.

speed optimizer

The best part? Smash Balloon comes with a team of WordPress experts who are always ready to answer your questions or lend you a hand.

With over 1.75 million active users and a rating of 4.9 stars out of 5, Smash Balloon’s plugins are the most popular and beloved options when it comes to social media feed plugins.

brands using smash balloon

So, let’s go ahead and look into how you can embed your Social Feed to Elementor, covering each of the major social network options out there: Facebook, Instagram, Youtube, and Twitter.

How to Add Facebook Feeds to Elementor

To start adding your Facebook feeds to Elementor, you’ll need to get your copy of the Facebook Feed Pro plugin

Then, go ahead and install and activate the plugin in WordPress. If you’d like to learn how to do so, you can use our guide on how to install a WordPress plugin.

With the plugin installed and activated, you’ll see the Facebook Feeds option on your WordPress dashboard. Click on Facebook Feed » All Feeds on your dashboard to get started.

On the All Feeds page, click on the Add New button to create a new Facebook feed.

create a new facebook feed

First, You’ll be given the option to choose from 9 different feed types for your new Facebook feed. These options include a timeline feed, video feed, events feed, and more.

Once you choose the feed style that you like, click on Next. For our demo, we’ll be selecting the Timeline feed.

select your facebook feed type

You’ve successfully created a new Facebook feed for your website. Now, we just need to connect this feed to your Facebook account and embed it in Elementor.

Connect Your Facebook Account

Now, we’ll be showing you how you can connect your Facebook account to your Facebook feed. To start, click on the Add New button on the guided flow.

add source facebook feed pro

The plugin will ask you to connect a source for your feed which will let you connect a page or a group to your feed.

Click on your preferred Source Type option and click on Connect to Facebook.

connect to facebook using facebook feed pro

This will take you directly to Facebook. Here you can give read-only access to the plugin, which will let the plugin access your Facebook feeds.

Moreover, since the plugin has read-only access, there’s no risk of the plugin changing anything on your Facebook page or group.

Meaning the plugin is completely safe to use, and you don’t have to worry about the plugin itself posting or changing anything on Facebook.

After you do that, choose the pages or groups you want to show on your feeds. Once you select the right ones, click on Next.

select the facebook pages

You will now be shown what content the plugin can read from the pages/groups you’ve selected.

Click on Done to finish this step.

allow read only access to facebook feed pro

After this, you’ll be taken back to your WordPress dashboard.

Then, select the page or group you’ve just connected that you’d like to show on your feed. Click on Add once you select the right one.

confirm facebook feed source

You can then click on Next to complete the connecting process. 

confirm source facebook feed pro

Now, you should have connected a new feed to your Facebook. With the connecting process complete, you can go ahead with your feed customization.

Customize Your Facebook Feed

Once you add your new feed source, you can select a template that you’d like to use for your Facebook feed.

You have 7 feed templates that you can choose from:

  • Default
  • Simple Masonry
  • Widget
  • Large Grid
  • Latest Album
  • Showcase Carousel
  • Simple Carousel

All you have to do is select a template here and then click on Next.

facebook feed pro template

After selecting your feed’s layout, the plugin will now open the live feed editor. 

Here, you will be provided with all the customization features on the left column of your screen. The right side of the screen will give you a live preview of your feed and all the changes you make to it.

live feed customizer facebook feed pro

To start with the feed customization, click on the Feed Layout option.

open feed layouts facebook feed pro

The plugin gives you 4 different feed layout options to choose from: List, Grid, Masonry, and Carousel.

Let’s look at each of these layouts in detail below:

feed layout options facebook social media feed

We recommend using the List layout if you want to show a simple post-by-post layout.

This will also give you the option to show one Facebook feed after another with large, visible post previews. 

list layout for facebook

The Grid option is great if you want to show your Facebook feed in rows and columns.

As a result, you can display lots of Facebook posts at once in a smaller space.

The Masonry layout gives you an optimized grid layout that shows posts in unique-sized columns.

This ensures that all your posts are displayed in full size and also take the optimal amount of space in your columns.

masonry layout facebook feed pro

Finally, if you want to display your Facebook posts in a carousel slider, you can do so using the Facebook Carousel layout.

It’s a great way to make your site more interactive.

grid layout facebook

Once you’re done choosing the right layout for you, click on the Save button on the top right to finish.

Now, you can go back to customizing your Facebook social feed further by clicking on the Customize button.

click on the customize button facebook

For the next step, let’s look at how you can customize your Facebook feed’s color scheme.

Simply click on Color Scheme to get started.

open color schemes facebook feed pro

Now, the Facebook Feed Pro plugin will give you 4 unique options to customize your Color Scheme.

  • Inherit from theme: This copies your website’s color scheme into the Facebook feed.
  • Light: This uses a bright colored scheme with a white background and dark fonts.
  • Dark: The uses a darker scheme that opts for a black background with lighter fonts.
  • Custom: With this option, you can choose all the colors for your feed’s color scheme.
color scheme options facebook feed pro

Select the color scheme that you prefer, and then click on the Save button.

Besides these options, there are other additional options like adjusting margins, post elements, header style, and much more. The customization process for them is quite similar, so you can finish your feed customization with just a few extra clicks.

Once you’re done with the customization, click on the Save button to finish customizing your feed.

Embed Your Facebook Feed in Elementor

Now that you’re done customizing your Facebook Feed, we go ahead and embed it into any page of your Elementor site. 

First, click on Embed on the top right of your feed editor. 

embed button for facebook social feed widget

This will open a popup that’ll give you a shortcode for your Facebook feed. You can also directly add this feed to your page, sidebar, or footer from here.

Click on the Copy button next to the shortcode to move to the next step.

copy shortcode facebook feed

Now, go ahead and create a new page by clicking on Pages » Add New on your WordPress admin dashboard.

After that, click on the Edit with Elementor button at the top of your page editor. 

create new wordpress page

If you want to add your Facebook Feed to a post instead, you can create a new post by clicking on Posts » Add New.

Then, click on the Edit With Elementor option.

create new wordpress post

Once you click on that, you will open the new page/post in the Elementor editor. On the left column, you’ll see all the widgets available to you. Use the search bar on the top left to search for “shortcode.”

shortcode widget for elementor

Then, click the Shortcode widget and drag it to the right-side editor.

shortcode block for elementor

Click on the newly placed Shortcode widget, and on the left panel, and you should see the Enter your shortcode field.

Paste in the Shortcode that you copied earlier to embed your Facebook feed.

paste facebook shortcode elementor

Once you’re done, click on Publish, and your Facebook Feed will be embedded into your Elementor site.

You can preview your page to see how the Facebook feed appears to your website visitors.

facebook elementor page example

With that, you should be done with embedding a Facebook feed to Elementor. Now, let’s follow a similar process to embed Instagram feeds to Elementor.

How to Add Instagram Feeds to Elementor 

To embed your Instagram feed to Elementor, you’ll have to follow a similar process as above, starting with a plugin installation.

First, grab the Instagram Feed Pro plugin. Then, install and activate the plugin.

If you want detailed instructions for this, you can follow our step-by-step tutorial on installing WordPress plugins.

Once you activate the plugin, click on Instagram » All Feeds on your WordPress admin dashboard. 

Then, click on Add New to create a new feed for your Elementor website.

create new feed instagram feed pro

The plugin will then ask you to choose your feed type. You’ll be given the option to choose between:

  • User timeline: Displays your Instagram account’s latest posts.
  • Public Hashtag: This shows Instagram posts with a specific hashtag.
  • Tagged Posts: Embed the Instagram posts that have your account tagged.

You can also choose to combine different feed types using multiple options.

Go ahead and click on Next to proceed with the connection process.

select your feed type instagram feed pro

For our tutorial, we’ll be using the user timeline feed type.

Connect Your Instagram Account

To embed your Instagram feed in Elementor, we’ll need to connect your Instagram account to the plugin first. 

To do so, start by clicking on Add Source on the new feed page.

instagram add source for feed

This will provide you the option to choose either your personal Instagram account or a business account. 

The main difference is that a business account lets you add Instagram reels, shoppable e-commerce feeds, shop posts, hashtag feeds, and more.

If you’re running a business and you have your products displayed on your Instagram, we highly recommend using a business account.

After picking your Instagram account type, go ahead and click on Login With Instagram.

select instagram account type popup

This will open a prompt on Instagram, asking you to provide permissions for the plugin. The plugin will only request read-only permissions, so there’s no risk of the plugin accidentally posting anything on your account or making any changes to it.

Click on Allow on the request prompt to continue.

allow access to instagram

Then, you’ll be taken back to your website, where you can click on Next to finish the connection process.

confirm account as source for instagram feed

Now that we’re done connecting Instagram to your Elementor website, we can go ahead with the customization.

Customize Your Instagram Feed

After you connect your account, the plugin will let you import a pre-designed template for your Instagram feed.

That way, you can have a beautiful Instagram feed ready to go instantly. Just choose a template that you’d like to use and click on Next.

Doing that will take you to the Instagram feed live editor.

Similar to the Facebook Feed Pro editor, you have your customization panel on the left and your live preview on the right.

Using the options on the left, you can easily change your layout, color scheme, header, post elements, and much more.

live feed editor instagram feed

Plus, the live preview will show you how your Instagram feed will look at all times.

Ready to personalize your Instagram feed? Let’s start by clicking on Feed Layout.

edit layout for instagram carousel

You’ll be given 4 unique Layouts to choose from:

  • Grid
  • Carousel
  • Masonry
  • Highlight
enable the carousel layout

The Grid layout gives you clean and evenly-spaced columns and rows.

So, you can have a nice Instagram gallery with tons of posts.

grid layout for instagram

The Carousel layout gives you a posts slider that users can scroll through to view your Instagram posts.

Plus, a slider is much smaller-sized but also a more interactive way to display your Instagram feeds.

carousel layout add instagram to elementor

With the Masonry layout, you get a cascaded grid layout that keeps the original proportions of your Instagram posts in your feed.

This layout is a bit more stylish and also makes sure that all your Instagram posts are displayed in full size.

masonry layout for instagram

Finally, the Highlight layout is a cascaded grid layout where you can choose to highlight special Instagram posts alongside the grid.

If you want the focus on a specific post from your entire feed, then this is the perfect pick for you.

highlight layout for instagram

Once you’re done choosing your Instagram feed layout, go ahead and click on Save to move forward.

For the next step, let’s customize the color scheme for your feed. To go back to the main customization panel, click on Customize.

return to main customization options

Now that you’ve set up your layout, you can go ahead and change the colors of your Instagram feed.

First, click on the Color Scheme option on the left.

click on color scheme option

The feed editor gives you 4 unique color schemes to choose from:

  • Inherit from Theme: Pulls your website’s color for your Instagram feed’s color scheme.
  • Light: This makes use of a bright background and darker fonts for a brighter display.
  • Dark: Uses a dark background with lighter fonts with a focus on visibility.
  • Custom: Lets you custom define each color in your feed manually.
choose your color scheme elementor

Similar to the feed layout process, once you’re done changing your options, click on Save.

Now, you can test out all the other options the live editor provides you with, such as header customization, button customization, and more.

Remember to click on Save once you’re happy with the changes. Once you finish your editing, you can go ahead and embed your Instagram feed using the Elementor page builder.

Embed Your Instagram Feed in Elementor

To embed an Instagram feed in Elementor, first, you’ll need the shortcode for your feed.

Click on the Embed button next to the Save button on the top right. 

embed free instagram feed pro

This will open a prompt where you’ll be able to see the embed options for Instagram feeds. You can add it to your web page or display an Instagram widget on your sidebar or footer.

Click on the Copy button next to the shortcode to copy and save it.

copy shortcode instagram feed

Now, we just need to add this shortcode to any post or page. Open your WP Admin Dashboard and click on Pages » Add New to create a new page.

create new wordpress page

If you want to add the shortcode to a new post, you can click on Posts » Add New instead.

Next, click on Edit with Elementor on the top of the editor screen to move to the Elementor live editor.

create new wordpress post

The left panel will list all the widgets you can use on your page or post. 

Use the search bar on the top left and search for the “shortcode” widget.

shortcode widget for elementor

This will give you the shortcode widget that you can drag into the editor panel on the right.

Once you click on that, you will open the new page/post in the Elementor editor. On the left column, you’ll see all the widgets available to you. Use the search bar on the top left to search for “shortcode.”

Then, click the Shortcode widget and drag it to the right-side editor.

shortcode block for elementor

Then, you’ll be given the option to add your shortcode to the widget on the left panel.

Simply paste in the shortcode you saved in the Enter your shortcode field.

enter your shortcode

Finally, click on Publish on the bottom left to make your page/post live on your website.

You can then check your Instagram feed on your website to make sure everything works perfectly.

example of instagram feed on elementor

And that covers the process of embedding an Instagram feed in Elementor.

Now that we’ve covered both Facebook and Instagram, let’s look at Youtube and how you can add a Youtube feed gallery to Elementor.

How to Add YouTube Feeds to Elementor

First, grab your copy of Youtube Feed Pro here, then install and activate the plugin on your Elementor site.

If you want to learn how to do so, you can use our WordPress plugin tutorial here

Once you have your plugin activated and installed, you can go ahead and create a new YouTube feed.

First, open the plugin’s feed menu by clicking on Youtube Feed » All Feeds on your WordPress dashboard.

Then, click on Add New on the top.

embed youtube playlist by adding new feed

YouTube Feed Pro will then let you choose from 6 different unique feed types:

  • Channel: For showing videos directly from a Youtube channel.
  • Playlist: To embed a Youtube playlist on your Elementor website.
  • Favorites: Display Youtube videos from your favorites list.
  • Search: Embed Youtube videos using a selected search term.
  • Live streams: Shows only live streams from Youtube on your Elementor site.
  • Single videos: For embedding and displaying a specific video as a single post.

Once you’re ready, choose any of the 6 options and click on the Next button. 

youtube feed types youtube

For our tutorial, we’ll be using the playlist feed type.

Connect Your Feed to Youtube

Now that you’ve created your new Youtube feed, you’ll need to connect it to Youtube to display your videos.

You can then fetch videos directly and display them on your Elementor site.

For this, the easiest way is to use a Youtube API key.

In case you don’t have your key yet, follow the steps in this simple guide on how to create your YouTube API key.

Once you have your API key, copy it and return to your website.

There, you can paste it into the popup before clicking on Add.

add api key youtube

Now, we just need to connect this feed to a YouTube channel, playlist, favorites list, and so on, depending on the type of feed you created.

For a playlist feed like in our example, open a Youtube playlist in a web browser. Then, check the address of the page at the top to find the URL.

Then copy the playlist ID at the end of the URL as shown below.

copy youtube playlist id

Finally, you can return to your WordPress website and then paste in the ID on the Playlist ID field.

After you do that, click on Next to continue.

insert playlist id youtube

And that should add a new Youtube feed to your website. Now we just need to customize it and then embed it into Elementor.

Customize Your YouTube Feed

Youtube Feed Pro gives you a huge number of customization options that you can use for your feeds and galleries.

First, you can go ahead and choose a template for your feeds. The plugin gives you 8 different options to choose from:

  • Default
  • Carousel
  • Cards
  • List
  • Gallery
  • Latest video
  • Showcase carousel
  • Widget

To continue, select your template and then click on Next.

pick a feed template youtube feed pro

Doing that will open the live feed editor, where you can customize your Elementor Youtube feed in just a few simple clicks.

On the left, the plugin has the option to set up your layout, color scheme, header, and much more — no coding needed!

live feed editor for youtube feed pro plugin

Plus, you can look at the live preview on the right if you want to see how your Elementor YouTube feed will look.

To get started with the customization, you can select the Feed Layout option on the left.

select feed layout option youtube feed pro

YouTube Feed Pro will now show you 4 different layout options for your feed:

  • Grid: Put your videos in neat rows and columns and embed lots of videos at once.
  • Gallery: Show a large video at the top with small thumbnails at the bottom to focus on a single video.
  • List: Embed videos in a single column so each YouTube video is clearly visible
  • Carousel: Turn your feed into a beautiful YouTube slideshow for an interactive site
feed layouts for youtube feed pro

Click on Save to confirm your new feed layout.

You can then continue personalizing your feed by clicking on the Customize button at the top.

customize your youtube feed

Next, it’s time to edit the colors of your YouTube Elementor feed.

Just select the Color Scheme option on the left side of the editor for that.

select color scheme options youtube feed pro

To easily change the colors of your YouTube feed, the plugin lets you choose from 4 color schemes:

  • Inherit from Theme: Use the same colors as your Elementor website
  • Light: Showcase a light background with black-colored font
  • Dark: Pick a dark background along with a light font
  • Custom: Manually select all the colors of your YouTube feed yourself
youtube feed pro color scheme options

Once you’re done setting up the feed colors, click on the Save button.

Just like that, you can change your load more button design, header, video elements, and more from this live feed editor.

Remember to click on Save to confirm the new design of your YouTube video feed.

Finally, you can go ahead and add it to your Elementor site in the next step.

Add YouTube Feed to Elementor

Similar to other Smash Balloon plugins, you can easily add YouTube feeds to ELementor directly from the live feed editor.

Click on the Embed button at the top to get started.

embed your youtube feed

On the popup, you can find all the ways to embed this feed on your WordPress website.

For now, you can click on the Copy button to continue.

embed your shortcode in youtube

Want to show YouTube videos on your Elementor page?

Navigate to the Pages » Add New menu from your dashboard and then click on Edit with Elementor at the top.

create new wordpress page

You can also use a post here instead.

First, open the Posts » Add New menu and then click on the Edit with Elementor button at the top.

create new wordpress post

Doing that will open the post or page in the Elementor editor. On the left, you can find all the Elementor widgets, and on the right, you can see a real-time preview.

To get started, look for the search bar at the top and then look for the “shortcode” widget.

shortcode widget for elementor

You’ll then see the Shortcode widget on the left side of the Elementor editor.

All you have to do is drag the widget and then drop it on your page or post on the right.

shortcode block for elementor

Finally, paste the shortcode from earlier into the Enter your shortcode field on the left side of the editor.

Click on the Publish button, and your YouTube feed will be live on your website for everyone to see.

In fact, you can open the page or post to see how your YouTube Elementor feed will look to your visitors.

example of elementor playlist in wordpress

As you can see, displaying YouTube videos in Elementor can be super easy with the help of this plugin.

For more information, you can take a look at this guide on how to add a video gallery to Elementor.

Now, let’s look at the easiest way to add Twitter content to your Elementor website.

How to Add Twitter Feeds to Elementor

You can get started by getting your copy of the Twitter Feed Pro plugin from here and then downloading it to your computer.

After that, simply install and activate the plugin on your WordPress website.

For more information on how to do that, follow this guide on installing WordPress plugins.

Once the plugin is ready, navigate to the Twitter Feed » All Feeds menu from your dashboard and then click on Add New.

add new custom twitter feed

Twitter Feed Pro will then ask you to choose the type of Twitter feed that you’d like to embed.

You have 6 different options that you can choose from here:

  • User timeline: Show the tweets made by a selected Twitter profile
  • Hashtag: Display tweets that have your selected Twitter hashtags
  • Home timeline: Embed the Twitter content from your account’s timeline
  • Search: Choose specific search terms and then embed the Twitter search results
  • Mentions: Showcase tweets that mention your brand on Twitter
  • Lists: Display tweets from your selected Twitter lists

After you select a feed type, click on the Next button to continue.

select feed type twitterr

We’ll go with the user timeline feed type for our example here.

Once you’ve created your feed, it’s time to connect it to Twitter in the next step.

Connect Your Twitter Account

After connecting your Twitter account, your new feed can start embedding tweets on your Elementor site.

Ready to get started? Click on the Connect button in the popup.

connect twitter account to wordpress

Next, the plugin will send you to Twitter, where it’ll ask for read-only access to your Twitter account.

Since it’s read-only access, Twitter Feed Pro can view your info, but it can’t make any changes at all. As a result, Twitter Feed Pro is completely safe to use.

All you have to do is click on the Authorize app button to connect your account.

authorize twitter read only access.jpg

The next step is to select the profile, hashtag, search term, Twitter list, or more, depending on the type of Twitter feed you selected.

For our example, we’ll connect the feed to a Twitter timeline.

And for that, all you have to do is enter the Twitter handle on the popup before clicking on the Next button.

embed twitter feed user timeline

Just like that, you now have a Twitter feed that’s ready to go online. Plus, the plugin comes with a functionality that’ll make sure your feed automatically match your Elementor site’s design.

On top of that, Twitter Feed Pro lets you customize your feed in lots of different ways.

But before that, it’s time to customize the design of your new Twitter feed.

Customize Your Twitter Feed

To get started, you can choose to import a feed template for your feed to instantly select a unique design.

Twitter Feed Pro lets you choose from 7 different templates here:

  • Default
  • Masonry cards
  • Simple carousel
  • Simple cards
  • Showcase carousel
  • Latest tweet
  • Widget

Select the template that you’d like to use and then click on the Next button.

choose a feed template

After picking your Twitter feed layout, you can then use the live feed editor to customize how your feed looks.

In just a few clicks, you can change your layout, color scheme, header design, tweet elements, and much more — no need to touch a single line of code.

live feed editor twitter

On the right, the live preview will show how your Twitter feed will look in real-time.

First, let’s use the live feed editor to change the layout of the tweets on your Elementer site.

Click on the Feed Layout option on the left.

feed layout option twitter

With Twitter Feed Pro, you have 3 different layouts that you can choose from: List, Masonry, and Carousel.

Let’s look at each layout in more detail below.

pick a feed layout twitter

Want to show tweets in a single column?

With the list layout, you can show tweets like in the official Twitter website.

list twitter feed layout

Next, you have the masonry layout that can show tweets in multiple columns.

It’s a great way to show tons of tweets at once and engage your visitors.

example masonry twitter feed wordpress

Finally, you have the Twitter carousel layout that’ll turn your tweets into an engaging slideshow.

It’s a great way to make your site interactive and keep your visitors engaged.

carousel twitter feed

Finally, click on the Save button to save your new layout design.

Once you’ve set up your layout, click on Customize to return to the main options.

back to customization options twitter

You can use the remaining options here to change your Twitter feed’s color scheme, button design, header design, and much more.

Click on Save once you’re done editing your Twitter Elementor feed.

Finally, let’s add this Twitter feed to your website in the last step here.

Add Twitter Feed to Elementor

Since Twitter Feed Pro was designed with ease of use in mind, you can easily add tweets to your site directly from the live feed editor.

First, click on the Embed button at the top.

embed twitter button live editor

Doing that will open a popup with the embed options for this Twitter feed. You can add it to a WordPress page or show it on your sidebar or footer as a Twitter feed widget.

For now, you can click on the Copy button.

copy twitter feed pro shortcode

Next, you can open the Pages » Add New menu from your dashboard to add this Twitter feed to an Elementor page.

Once you’ve done that, click on the Edit with Elementor button at the top.

create new wordpress page

Alternatively, you can show the tweets on an Elementor post instead.

Just go to the Posts » Add New menu from your dashboard and then click on Edit with Elementor button.

create new wordpress post

After you’ve got the Elementor editor open, you can look at the left panel to find all the widgets that you can add to your post or page.

First, enter the term “shortcode” in the search bar on the top left.

search for shortcode block elementor

You can then see the Shortcode widget in the search results below.

Next, drag that widget and then drop it on the right section of the Elementor editor.

drag and drop shortcode widget elementor

You’ll now see the various options for the shortcode widget on the left panel of the screen.

There, look for the Enter your shortcode field and then paste your shortcode from earlier.

paste your twitter shortcode elementor

If you just click on Publish, your Twitter feed will be online on your Elementor site for everyone to see.

As you can see, Twitter Feed Pro can make this whole process super easy. You can even open your website to see the Twitter content embedded on your Elementor page or post.

example of elementor twitter feed on website

To learn more, you can check out this guide on how to add Twitter feeds to Elementor.

Finally, let’s see how you can combine content from the biggest social media platforms on your Elementor website.

How to Add Social Feeds to Elementor (Combined)

Want to combine social media content from the biggest platforms on your Elementor site?

To get started, you can get the Social Wall Pro plugin here and then install it on your website.

For more information on how to do that, you can follow this guide on how to install WordPress plugins to WordPress.

Once your plugin is ready, follow the above instructions to connect your Elementor site to Facebook, Instagram, YouTube, and Twitter.

Finally, you can open the Social Wall menu from your dashboard and then click on Add New.

After you do that, Social Wall Pro will let you choose which social media platforms you want to show on your site.

Look for the platform that you want to add, and then click on the Add to Wall button below.

select sources for social wall

After choosing the platforms, you can select which of your social feeds you want to add to Elementor.

Select the feeds under each platform and then click on the Create Wall button.

select feeds for your social wall

Just like that, you have a social wall with posts from the biggest platforms out there.

Plus, the plugin will automatically copy the design of your Elementor site and look beautiful right out of the box. On top of that, you can even personalize how this social wall looks in the next step.

Customize Your Social Media Feed

You’ll see the social wall open in the live feed editor, where you can easily personalize how it looks in a few clicks.

On the left, you can find the options to change your layout, colors, button design, post elements, and more.

live feed editor social wall

Just like all the other Smash Balloon plugins, the live preview on the right will show you how your social posts will look on your site.

Ready to start customizing your social wall? First, click on the Layout option.

customize social wall layout

Now, the plugin will let you choose between 3 layouts for your social wall:

  • Masonry: Display tons of posts on your Elementor site at once using multiple columns
  • List: Use a single column to show your posts so all the posts are more clearly visible
  • Carousel: Turn your social media posts into an engaging slideshow carousel

After picking your layout options, remember to click on Save to confirm your changes.

Ready to continue designing your social wall?

You can click on the Customize button to return to the main options.

customize your social wall again

Now, let’s go ahead and personalize which posts are visible on your social wall.

Look for the Posts option on the left and then click on it.

customize post elements social wall

Using the option on the left, you can choose to show or hide post elements like the avatar, post text, date, username, and more.

Next, select the post elements that you want to show and unselect the ones you want to remove from your wall.

choose post elements social wall

Finally, click on Save to keep your changes.

From the remaining options, you can easily change your social wall’s color palette, button design, filters, and more.

Remember to click on Save once you’re happy with how your social wall looks.

With that, you can go ahead and add this social wall to your Elementor WordPress site in the final step.

Add Your Social Media Feed to WordPress

Like all the other plugins on this tutorial, you can use the live feed editor to directly insert social media content on your Elementor site.

First, click on the Embed button in the top right corner.

embed your social media wall

Now, you’ll see a popup that shows all the ways you can embed social walls on your WordPress site.

To embed this social wall using Elementor, click on the Copy button.

social wall copy shortcode

To add a social wall to a new Elementor page, navigate to the Pages » Add New menu from your dashboard.

After you do that, just click on the Edit with Elementor button at the top.

create new wordpress page

Want to display a social wall on your Elementor post instead?

Open the Posts » Add New menu from your dashboard instead and then click on Edit with Elementor.

create new wordpress post

Now, you can see the page or post open in the Elementor drag-and-drop editor. On the left, you can find all the widgets that you can add to your page or post.

Using the search bar at the top, just look for the “shortcode” widget.

search for shortcode block elementor

Once you do that, you’ll be able to see the Shortcode widget in the search results below.

To embed your social wall, drag the widget from the left and then drop it on the right.

drag and drop shortcode widget elementor

Finally, paste your social wall shortcode from earlier into the Enter your shortcode field.

You’ll then see your social wall on the Elementor live preview on the right.

add social wall shortcode to elementor

Then all you have to do is click on Publish, and your new social wall will be online on your Elementor website.

You can just open your Elementor page or post and take a look at how the social wall will look to your website visitors.

social wall elementor example

And there you have it!

Now you know how to add social media feeds to Elementor in just a few easy steps — no need for HTML, CSS, or any other type of code.

With that, you can have a beautiful Elementor website that engages visitors, converts people into followers, and helps grow your business with ease.

Ready to add social media feeds to your site? Get Smash Balloon now!

While you’re here, take a look at our list of proven social media marketing examples that you can copy.

Don’t forget to follow us on Facebook and Twitter for more social media marketing tips and tricks.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.