How to Embed Your Facebook Feed on Your Elementor (2024)
clicksocial

Schedule social media posts straight from WordPress with ClickSocial

Start Free Trial angle-right
Home Blog How to Embed Your Facebook Feed on Your Elementor (2024)

How to Embed Your Facebook Feed on Your Elementor (2024)

How to Add Your Facebook Feed to Elementor

Looking for the easiest way to add your Facebook feeds to Elementor?

Embedding Facebook page feeds on your Elementor website boosts user engagement and encourages your visitors to stay longer on your site and view the products or services you’re offering.

Cross-promoting your Facebook content on your brand’s Elementor site is also a great way to increase both your online sales and Facebook followers.

Here at Smash Balloon, we have more than 10 years of experience in the field of social media feeds, and over 1.75 million users trust us to display their social media content on their websites.

Today, we’re going to show you how to easily add your Facebook feeds to Elementor — absolutely no coding needed.

Easiest Way to Add Facebook Page Feeds to Elementor

Are you tired of manually adding your Facebook feeds to Elementor?

If you’re a WordPress beginner who’s using Elementor as your website builder, then Smash Balloon’s Facebook Feed Pro is your secret weapon.

As the best Facebook feed plugin for WordPress, Facebook Feed Pro is 100% compatible with Elementor. You can use it to embed Facebook feeds on your Elementor website in just a few clicks. Yes, even if you’re not tech-savvy!

custom facebook feed pro homepage

Since Facebook Feed Pro is super user-friendly, you can create, customize, and post your Facebook feeds with zero coding needed, perfect for WordPress newbies.

What’s more, Facebook Feed Pro also comes with tons of great features. Here are the top features that our users love:

  • Effortlessly Integrate Facebook Feeds in Minutes: No coding needed — you can get started and showcase your Facebook content in a flash.
  • Customize with Clicks, Not Code: Forget about coding or CSS experience. You can create and customize your Facebook feeds in real-time with just a few clicks using the plugin’s built-in visual feed editor.
  • Ready-Made Templates to the Rescue: No need to start from scratch. You can use our professionally-made Facebook feed templates to customize your feed easily.
  • Lightning-Fast Performance: Enjoy blazing-fast page load times, even with your Facebook feed displayed, thanks to the plugin’s lightweight design. (Bonus: this can also improve your SEO!)
  • Expert Support at Your Fingertips: Get peace of mind with our dedicated team of WordPress specialists ready to assist you with any of your Facebook feed concerns.

Because of all these features that extend your site’s functionality to include social media marketing, Facebook Feed Pro has become the best Facebook feed plugin for WordPress and Elementor users.

A rating of 4.9/5 stars from over 250,000 active users speaks for itself.

custom facebook feed pro reviews from users

In fact, over 1.75 million brands trust Smash Balloon plugins to display social media feeds like YouTube playlists, Instagram hashtag feeds, TikTok feeds, Twitter feeds, Google reviews feed, Yelp reviews and more on their websites.

Facebook Feed Pro is the best option if you want to embed Facebook feeds to make your website more engaging and boost sales.

The best part?

Facebook Feed Pro has a 14-day money-back guarantee so you have time to find out if it’s the perfect fit for your business.

Ready to embed your Facebook content on Elementor? Get your copy of Facebook Feed Pro here!

How to Add Facebook Feed to Elementor Website (5 Steps)

If you’re asking, “How do I add a Facebook feed to my Elementor?” then we’ve got you covered.

All it takes is 5 simple steps, and you’ll be able to post your Facebook feeds to your Elementor website. No technical knowledge requited. Let’s take a look at how you can easily do this below.

Step 1: Install and Activate Facebook Feed Pro

First of all, you can get your copy of Facebook Feed Pro here. Once you have the plugin, simply install and activate it on your WordPress website.

If you’re not sure how that’s done, check out our handy article on how to install WordPress plugins.

Step 2: Create Your Facebook Feed for Elementor

From your WordPress dashboard, hover over to the Facebook Feed menu, then click on All Feeds. On this new page, click on the Add New button.

add new feed with custom facebook feed pro

Now, you’ll have to pick the feed type. With this Facebook feed WordPress plugin, you can pick between tons of options here:

After you’ve picked the type of Facebook feed you want, click on the Next button.

select your facebook feed type

Step 3: Connect Your Elementor Facebook Feed

Once you’ve created a feed, you can pick where your Facebook posts will be taken from. This is the source for your Facebook feed.

Facebook Feed Pro lets you connect your Facebook feed to your source account with just a few clicks — no manual access token needed.

To get started, click on the Add New button here to add a new source.

add source facebook feed pro

In this new popup, you can pick a Page for your source. Once you do that, click on the Connect button.

connect to facebook using facebook feed pro

This will send you to Facebook, where you can give read-only access to this plugin.

A read-only access means that the plugin can’t actually change anything on your Facebook account.

First, select the Facebook page that you want to show on your site, and then click on the Next button.

select the facebook pages

Now, you can go ahead and click on Done to grant the read-only access.

allow read only access to facebook feed pro

Now you’ll be brought back to WordPress. All you have to do here is select the Facebook page you want to use as source and then click on the Add button.

confirm facebook feed source

Finally, you can click on Next to proceed.

confirm source facebook feed pro

Step 4: Customize Your Facebook Elementor Feed

For a quick and easy way to create beautiful Facebook feeds, you can import a pre-designed theme. That way, you can change the icons, like button, colors, banner style, and much more in a single click.

Facebook Feed Pro comes with a selection of beautiful feed themes, such as:

  • Default
  • Modern
  • Social Wall
  • Outline
  • Overlap

I usually choose the Modern theme for my Facebook feeds since I’m a fan of its minimalist aesthetic. But for this tutorial, let’s choose the Default theme.

After you choose a theme, click on the Next button here.

After that, you can select a template to quickly choose a different layout of Facebook posts on your feed.

Facebook Feed Pro comes with 7 different templates to choose from:

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

You can click on the feed template that you like and then click on Next.

facebook feed pro template

After that, you can now use the visual feed editor and customize your Elementor Facebook feed in real-time.

On the left side, you can see all the customization options for your feed. Using these options, you can change your feed type, feed layout, like box style, color scheme, header style, and much more.

live feed customizer facebook feed pro

On the right, you can see a live preview of your Facebook feed. Whenever you make any changes to your Facebook page feed, you can see the result right here.

To start customizing your Elementor Facebook feed, first select the Feed Layout option on the left.

open feed layouts facebook feed pro

With this plugin, you can pick between 4 feed layout options:

  • List
  • Grid
  • Masonry
  • Carousel
feed layout options facebook social media feed

If you go for the list layout, your Facebook posts will be shown one after another in a single column. This can be good if you want each Facebook post to have a lot of space.

list layout for facebook

Want your Facebook posts to shine? Choose the grid layout option for a clean, organized layout that showcases multiple Facebook posts at once.

The masonry layout will show all of your posts in different columns. Plus, the posts will also keep their original proportions.

masonry layout facebook feed pro

Finally, you have the Facebook carousel or slider option if you want to show your feed in a dynamic slider.

This layout lets your site visitors swipe through multiple posts in a sleek slider, perfect for capturing attention and telling a visual story with your Facebook content.

grid layout facebook

Select the feed layout that you prefer and click on the Save button.

After you do that, click on the Customize button to keep customizing your Facebook feed.

click on the customize button facebook

And that’s just the start. With the Facebook Feed Pro’s visual feed customizer, you can set the color scheme, header type, background color, load more buttons, feed size, margins, and much more — no coding needed.

Once you edit your feed to your liking, remember to click on the Save button to save the changes.

Step 5: Add Your Facebook Feed to Elementor

Finally, it’s time to add your new Facebook widget to your Elementor page. The good news is that you can do this directly from your visual feed customizer.

First, click on the Embed button at the top.

embed button for facebook social feed widget

You’ll then see a popup with all the ways to embed Facebook feeds on your website. Here, click on the Copy button on the popup.

copy shortcode facebook feed

Now that you’ve copied your shortcode, go to Pages » Add New to create a new WordPress page.

Here, you can click on the Edit with Elementor button, and WordPress will open the Elementor editor.

create new wordpress page

You can also use a WordPress post here if you prefer. Simply go to Posts » Add New and then click on the Edit with Elementor button.

create new wordpress post

After that, you’ll see the Elementor editor. Here, you can find all the Elementor widgets on the left panel. On the right, you have a live preview of your post or page.

Now go to the search field on the left and type in “shortcode” to find the Facebook feed widget.

shortcode widget for elementor

Once you do that, you can drag the Shortcode widget from the search results and drop it to the right.

shortcode block for elementor

On the left, you can now see the options for the new shortcode widget.

There, look for the Enter your shortcode field and then paste the shortcode that you copied earlier.

paste facebook shortcode elementor

Now click on Publish, and you’ve now added your Facebook feed to Elementor!

Go and check your website, and you can see how it looks. Your site visitors can click on your Facebook pictures, and they’ll show up on a beautiful lightbox right on your website.

facebook feed elementor example

And that’s it!

Now, you know how to embed your Facebook feeds on your Elementor page so you can have an easier time boosting your engagement, conversions, and sales.

All you need is the Facebook Feed Pro plugin, and it’ll be a piece of cake to create, customize, and embed your Facebook feeds on your Elementor website.

So what are you waiting for? Go and grab your copy of Facebook Feed Pro today!

Related Articles on Adding Facebook Feeds to Elementor and Other Page Builders

Want to explore more options for integrating Facebook with your Elementor website? Looking for guides on embedding Facebook feeds on popular website builders?

Check out these helpful resources:

Why Display Your Facebook Page Feed on Elementor?

Elementor is a WordPress page builder that comes with a user-friendly drag-and-drop editor.

It helps you easily create engaging pages for your WordPress website — no need to hire a designer or purchase extra Elementor addons.

elementor homepage

But if you want to get more out of your Elementor webpages, there’s an easy solution. To boost your engagement, you can try adding a Facebook page feed.

Using a Facebook feed, you can show relevant Facebook posts on your Elementor page. This way, you can get more Facebook interactions, better conversion, and more sales for your business.

In fact, here are a few more ways adding Facebook feeds to your Elementor site can help you:

  • Embedding your Facebook feed in Elementor showcases real Facebook reviews and builds trust with your site visitors.
  • If you show Facebook posts of people enjoying your products, it can work as customer testimonials for positive social proof. This means seeing these posts will make your visitors more likely to buy from your WooCommerce store.
  • By adding Elementor Facebook feeds, you can show relevant images and videos to make your page more interesting.
  • It’s also an easy way to get more Facebook followers from the people visiting your site.
  • Posting keyword-rich Facebook content on your Elementor page can help you rank higher in search engine results.
  • Embedding Facebook feeds to your site increases your user engagement and makes your posts more likely to be pushed out by the algorithm to more people, so you can get more likes on Facebook

Add Social Media Widgets to Your Elementor Website

If you’re an online business, chances are you have more than one social media account.

If you’re wondering how to add social media feed widgets to your Elementor website, see these next posts for step-by-step tutorials:

Do you also have an Instagram feed? Here’s how you can embed an Instagram feed on your Elementor WordPress site.

Finally, if your business is listed on Google maps, you can see this next post on how to embed Google reviews on your Elementor.

author avatar
Sajjan Sharma Senior Writer
Sajjan has been writing about WordPress, social media marketing, and online businesses for over 10 years. His professional interests extend to include influencer marketing, content curation and digital marketing strategies.

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.