How to Embed a Facebook Page on Your Website

How to Embed a Facebook Page on Your Website (Step by Step)

By Lianne Laroya on September 24, 2021

Are you looking for the best way to embed a Facebook page 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.

Why?

Because over 180 million businesses have Facebook pages, you need to cross-promote your page to get ahead of the competition.

But Facebook doesn’t let its users easily add a responsive and customizable Facebook page to their WordPress.

That’s why in this post, we’ll show you the easiest way to embed a Facebook page on your website. And the best part? This tutorial’s newbie-friendly, so you can readily customize your Facebook page and make it responsive — no technical knowledge needed.

Let’s dive into it.

Ways to Add a Facebook Page to Your Site

You have 2 methods to choose from when you want to embed your Facebook page to WordPress:

1. Manually embed your Facebook page using Facebook’s plugin. Want to customize how your feed looks like on your website? You need to change code snippets or hire a developer to help you.

2. Use a trusted WordPress plugin to connect your Facebook account and automatically embed your page on your website with just a few clicks.

The 1st method, manually embedding your Facebook page, comes with lots of limitations. For instance, if you’d like to personalize your feed’s design, you have to tweak lots of code snippets to do this.

Or, if you’re not familiar with coding, then you’d need to hire an expensive developer to style your feed, so it’s consistent with your branding.

Also, you have to deal with code again if you want to make your Facebook page’s feed responsive. This means that if you want it to look great on any device at any screen size, then you need to tweak code snippets again.

Finally, since this method involves switching between multiple web pages and changing code snippets directly on your website, it can be pretty confusing. And because it’s confusing, you run the risk of accidentally breaking your website — with no support team to assist you.

All of these problems will go away if you use a trusted WordPress plugin to embed your Facebook page on your website, though.

Easiest Way to Embed Your Facebook Page

To help you add a responsive Facebook page to WordPress, you can use the Custom Facebook Feed Pro plugin from Smash Balloon.

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

embed facebook page on website plugin

In fact, the plugin’s so easy and simple to use that you can embed your customizable Facebook page in just under 5 minutes! It makes your Facebook page automatically responsive, too. Plus, its super fast performance helps your website load faster than ever.

The best part? If you want to change your feed’s color or font style, you can! Since it’s so user-friendly, you don’t need to be a design expert to customize your feed. You can just check or uncheck options and let the plugin do the hard work.

In addition to showing your Facebook page, you can display other Facebook content, too. With the plugin’s help, you can even embed your Facebook group, Facebook events and even Facebook reviews on WordPress.

Finally, the plugin is backed by a team of WordPress experts who are there to standby as customer support for you. Need someone to assist you while embedding your Facebook page? You can just send them a message.

With its 4.8/5 star rating and over 1 million users, Custom Facebook Feed Pro is happily recommended, after all.

embed facebook page on website ratings

Ready to level up your Facebook marketing by cross-promoting your page to your site? Let’s talk about embedding your Facebook page on your WordPress below.

Step 1: Install the Custom Facebook Feed Pro Plugin

First, go ahead and get your copy of Custom 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 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, videos feed, photos feed, albums 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, we’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 a Facebook group or a page.

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

add new source for facebook feed

On the next popup, you can just select the Page option and then click on Connect.

select facebook page

After you do that, the plugin will send you to Facebook. There, you can choose the page you want to show on your feed.

So, just select your Facebook page on the popup and then click on Next.

select facebook pages

You can now give read-only access to the plugin so that it can show content from your Facebook page.

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

To allow the read-only access, just click on the Done button on the popup.

what is smash balloon allowed to do

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 live feed editor.

custom facebook feed pro live editor

On the left panel of this live feed editor, 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.

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

So 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

Let’s get started!

Embed Your Facebook Page Feed on Your Page

You can embed your Facebook feed straight from your live 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. Just 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 that 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!

Your business deserves to grow like crazy — so, what are you waiting for?

Go and grab your copy of Custom Facebook Feed Pro by Smash Balloon today!

Want to display more social feeds to your site? You can also add a Twitter feed and even an Instagram feed.

Finally, if you found this post helpful, feel free to follow us on Twitter and Facebook for more social media marketing tutorials to boost your business’ growth.

Want to Try our Facebook plugin for Free?

Enter the URL of Your WordPress website to install Custom Facebook Feed Lite.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *