Here's How I Embed Facebook Page Feeds on My Website (5 Easy Steps)
clicksocial

Schedule social media posts straight from WordPress with ClickSocial

Start Free Trial angle-right
Home Blog Here’s How I Embed Facebook Page Feeds on My Website (5 Easy Steps)

Here’s How I Embed Facebook Page Feeds on My Website (5 Easy Steps)

Want a simple way to display your Facebook Page feed directly on your website?

Adding your Facebook page on your WordPress is an effective way to increase page engagement, user interaction, and your brand’s growth over time.

By featuring your feed on your website, you can reach a wider audience and encourage more likes and interactions, especially since it’s getting harder to reach everyone on Facebook alone.

But adding a Facebook Page feed isn’t always straightforward if you rely on built-in WordPress tools or manual code, which can be confusing for many users.

I remember the first time I tried embedding a Facebook Page feed on my site. Yikes! I ran into so many unexpected hurdles before finally finding a reliable, step-by-step solution.

At Smash Balloon, we’ve helped thousands of WordPress users easily add social media feeds to their sites, such as Facebook page feeds, making the whole process smooth and hassle-free.

In this article, I’ll walk you through five easy steps to embed your Facebook Page feed on your website, even if you don’t have any coding experience.

In This Article

2 Ways to Add Facebook Page Feeds to Your Site

You have 2 methods to choose from when you want to embed social media feeds, specifically Facebook page feeds to WordPress:

FeatureUsing Smash Balloon’s Facebook Feed ProManually Embedding Facebook Feed
Setup 🛠️Effortless setup in minutesTricky, involves finding & embedding iFrames or dealing directly with Facebook’s API
Coding Requirements 💻Absolutely no coding required!Manual methods require HTML/CSS and JavaScript/PHP
Customization 🎨Customize layouts (timeline, grid, carousel), post types, colors, text, and more — in a few clicksVery limited. Minimal styling control — needs coding for more
Content Display 📄Display posts, photos, videos, albums, events, and even Facebook Page reviewsLimited to a basic page feed
Responsive Design 📱100% responsive. Your Facebook page feed looks perfect on all devices (desktops, tablets, smartphones) instantlyNeeds manual CSS adjustments to avoid display issues
Facebook API & Tokens 🔑We handle all Facebook API changes and access token management automaticallyYou’re responsible for managing API access tokens, which can expire or change, breaking your feed without warning
Time Investment ⏰Saves a significant amount of time with quick setup and easy managementTime-consuming to set up, customize, and maintain, especially with Facebook’s evolving platform
Final Takeaway ✨It’s the best way to display dynamic, customizable, and reliable Facebook Page content. Get started with Facebook Feed Pro now!Needs technical setup, limited features, potential reliability issues, and ongoing maintenance.

The Best Way to Embed Your Facebook Feed on Your Website

[Disclaimer: As I’m working with Smash Balloon, I’m naturally going to highlight our plugin as a solution. However, I genuinely believe it’s the easiest and most effective way to embed Facebook Page feed on website for most WordPress users, based on my professional experience and testing many social media feed plugins.]

So, you want to embed Facebook Page feed on website without any complicated steps?

Great! Let me tell you the simplest and most effective method I’ve found in all my years in this business for this specific task: Smash Balloon’s Facebook Feed Pro plugin.

As the best Facebook feed plugin for WordPress websites, Facebook Feed Pro helps you display your page feed on your website — easily and quickly, even if you’re not a WordPress expert.

Facebook Feed Pro is packed with features that make this process a breeze:

  • It helps your site do more by showing Facebook Page feeds on your site. No coding needed to get started
  • You can connect your Facebook Page and get your feed up and running in just a few minutes!
  • It automatically matches your website’s style, so your Facebook feeds blend in perfectly with your theme
  • Your embedded Facebook feeds are responsive, meaning they will look great on all devices, from desktops to smartphones
  • It comes with a visual feed customizer, so you can easily change how your feeds look, even if you’ve never touched design, CSS, or HTML before. This makes customizing your embedded Facebook feed super simple
  • You can use it to embed Facebook Page feed on Elementor, Astra, Oxygen Builder, Beaver Builder, Facebook feeds on Divi and other website builders

What I especially appreciate about Facebook Feed Pro is its visual feed customizer!

I love how easily it lets you control the look and feel of your Facebook Page content when you embed Facebook Page feed on website, keeping it engaging for your visitors.

To make things even better, if you need any assistance setting up your Facebook Page feed, the dedicated Facebook Feed Pro support team is always ready to assist you.

Lots of people use Facebook Feed Pro to keep their websites updated when they embed Facebook Page feed on website, and it has a fantastic rating of 4.9/5 stars.

After all, Facebook Feed Pro is a WordPress social feed plugin from Smash Balloon, a name used and loved by over 1.75 million websites and popular brands to effortlessly add social media feeds to their sites.

Ready to start when you want to embed Facebook Page feed on website in just a few clicks? 

Get started with Facebook Feed Pro now!

5 Steps to Add Facebook Page Feeds to Your Website

Now, let’s talk about how to use Facebook Feed Pro to easily embed Facebook page feeds on your website.

Step 1: Install the Smash Balloon Facebook Feed Pro Plugin

First, go ahead and get your copy of Smash Balloon’s Facebook Feed Pro here.

After you’re done downloading the best Facebook feed plugin for WordPress, the next step is installing it on your website.

If you haven’t done this before, no worries! You can check out our newbie-friendly post on how to install a WordPress plugin as your guide.

When you’re done installing and activating the plugin, go to the next step below.

Step 2: Create Your Facebook Page Feed

To create your Facebook feed, first navigate to the Facebook Feed » All Feeds menu from your dashboard. 

After that, just click on the Add New button at the top of the page to continue.

add new feed with custom facebook feed pro

Once you do that, you can choose the type of feed that you want.

There are 9 options to pick from: including timeline feed, reviews feed, Facebook videos feed, photos feed, albums feed, Facebook events feed and much more.

all the facebook feed types

You can just select the feed type you prefer and then click on Next to proceed.

For this tutorial, I’ll be using a timeline feed.

select facebook feed type

After that, you can continue to the next step and connect this new feed to Facebook.

Step 3: Connect the Feed to Your Facebook Page

Now, you can go ahead and connect your feed to the Facebook page you want. Without a plugin, I’d need to connect to Facebook’s API by myself, but since we’re using Facebook Feed Pro, it’ll only take a few clicks!

To get started, first click on the Add New button on this page.

add new source for facebook feed

Next, you can click on Connect to Facebook to proceed. Doing that will open www.facebook.com on your web browser.

Here, the plugin will ask for read-only access to your account. You can now give read-only access to the plugin so that it can show content from your Facebook page.

With this access, Facebook Feed Pro can only read your data and can’t make any changes. So, the plugin is completely safe.

On the popup, click on the Continue button.

Doing that will bring you back to your website. There, click on the Add button to confirm the Facebook page as a source.

add new source confirmation

Finally, you can click on Next and finish connecting your new feed to your Facebook page.

pick your source for custom facebook feed pro

After that, it’s time to move on to the next step and customize your new Facebook page feed’s design.

Step 4: Customize Your Facebook Page Feed

Once you’ve connected your feed to a Facebook page, you will see it open in the visual feed editor with live preview.

custom facebook feed pro live editor

On the left panel of this live feed customizer, you can find all options to customize your feed. Using these, you can change your feed type, layout, color scheme, header style, like box style, and much more.

And on the right, you can see a live preview of your Facebook feed.

Here, you can just click on the Feed Layout option to start customizing.

select the facebook feed layout

You have 4 different options for the feed layout of your Facebook page feed: List, Grid, Masonry, and Carousel.

select layout for your facebook page feed

The first option is the list layout, where your Facebook posts will appear in a single column. That means each post will be more visible.

list layout for the facebook group feed

Want to have your Facebook posts in rows and columns? Just pick the Grid layout.

That way, you can show lots of videos, photos, and more at once.

grid layout for your facebook feed

You can also go for the masonry option, where your posts will appear in multiple columns.

I like using Facebook Feed Pro’s masonry layout for my Facebook page with links, so my blog post’s featured images are shown in my feed as well.

masonry feed layout for facebook

If you want to make your Facebook page feed more engaging, you can try the Facebook carousel option.

In this one, visitors can see and interact with a carousel slider to check out your Facebook posts.

carousel feed layout for facebook group feed

Once you pick the layout for your Facebook page feed, click on the Save button at the top.

Next, click on the small Customize button and go back to the main customization options.

go back to facebook customization options

Now select the Color Scheme option on the left to start setting up the colors for your Facebook page feed.

select color scheme for facebook feed

You have 4 color schemes to pick from here:

  • Inherit from Theme: Copy the colors of your website
  • Light: Bright background and dark text.
  • Dark: Dark background and lighter text
  • Custom: Manually pick the colors yourself

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

custom facebook feed pro color schemes

You can now go on and customize the rest of your Facebook page feed here. The live feed editor allows you to change the header style, post elements, like box, feed margins, background, and much more.

And once you’re done, remember to save your changes using the Save button at the top.

Next, it’s time to finally add your Facebook page feed to your website.

Step 5: Embed Your Facebook Page Feed on Your Website

Once you’ve finished customizing, it’s time to embed your Facebook page feed. You have 2 ways of doing that here:

  • Embed your Facebook page feed on your page
  • Embed your Facebook page feed on your sidebar

Embed Your Facebook Page Feed on Your Page

You can embed your Facebook feed straight from your visual feed editor. To get started, first click on the Embed button at the top.

click on embed button custom facebook feed pro

You can now see a new popup that asks you where to post your Facebook feed. Click on the Add to a Page option to proceed.

add facebook feed to page

After that, you can see a list of the pages on your website. Select the page where your Facebook feed should be and then click on Add.

select page for facebook feed

Once you do that, the plugin will send you to that page so you can finish embedding your Facebook feed.

On this page, click on the small plus icon (+) at the top to add a new block. Then you can just select the Custom Facebook Feed widget from the options.

add facebook custom feed block

Finally, click on the Publish button, and you’ve now embedded your Facebook page feed. Take a look at your site and see how it looks.

facebook feed example promote your business

Embed Your Facebook Page Feed on Your Sidebar

You can also embed your Facebook page feed on the sidebar of your WordPress site as a Facebook widget.

First, you need to open your Facebook feed in the live feed editor. To do that, just navigate to the Facebook Feed » All Feeds menu from your WordPress dashboard.

On this page, you can find all of your Facebook feeds listed out. Now click on your Facebook page feed here.

select your facebook feed

You will then see your Facebook feed open in the live feed editor. Next, click on the Embed button at the top.

click on embed button custom facebook feed pro

You’ll now see a popup where you can choose the location of your Facebook page feed. Click on the Add to a Widget button here.

add facebook feed as a widget

After you do that, the plugin will send you to the Widgets page of your website.

On this page, click on the Sidebar panel.

select sidebar for widget

Finally, click on the plus icon (+) and then select the Custom Facebook Feed widget from the options.

choose custom facebook feed pro widget

Just like that, you’ve added your Facebook page feed to your WordPress sidebar. To see how it looks, you can just open your site and check.

embed facebook page on website sidebar

And so, there you have it. Congratulations!

Now, you’ve learned how to easily embed a Facebook page on your website with the help of the world’s best Facebook feed plugin for WordPress!

Top Posts on Embedding Facebook Content on Your Website

Start Embedding Your Facebook Page Feeds Now

Sharing your Facebook Page’s updates directly on your website doesn’t have to be a chore.

From my own experience embedding feeds, using Facebook Feed Pro makes the entire process incredibly straightforward.

Here’s what I recommend for seamlessly integrating your Facebook Page:

  • Get your copy of Facebook Feed Pro here. (It comes with our 14-day money-back guarantee, so you can try it with confidence!)
  • Follow the 5 easy steps described in this guide to connect your Facebook Page.
  • Take a moment to see how your Facebook Page feed looks when displayed on your website, across different devices.
  • Notice how this keeps your website visitors up-to-date with your latest Facebook activities, right where they are.

Remember, showing your active Facebook Page feed on your website is a great way to boost engagement and keep your audience connected across platforms.

If you have any questions about using Facebook Feed Pro to display your Facebook Page feeds, don’t hesitate to ask me in the comments below!

author avatar
Lianne Laroya Content Marketing Manager
Lianne serves as the Content Marketing Manager at Smash Balloon, drawing upon more than 12 years of experience in WordPress content, social media marketing, user-generated content (UGC) and search engine optimization (SEO).

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.