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:
- How to Add Facebook Feeds to Elementor
- How to Add Instagram Feeds to Elementor
- How to Add YouTube Feeds to Elementor
- How to Add Twitter Feeds to Elementor
- How to Add Social Feeds to Elementor (Combined)
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.
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.
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 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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
You can then click on Next to complete the connecting process.
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.
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.
To start with the feed customization, click on the Feed Layout option.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Then, you’ll be taken back to your website, where you can click on Next to finish the connection process.
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.
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.
You’ll be given 4 unique Layouts to choose from:
- Grid
- Carousel
- Masonry
- Highlight
The Grid layout gives you clean and evenly-spaced columns and rows.
So, you can have a nice Instagram gallery with tons of posts.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Want to show tweets in a single column?
With the list layout, you can show tweets like in the official Twitter website.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.