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

By Lianne Laroya on December 17, 2020

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 webpages and changing code snippets directly on your website, it can be quite 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 Feeds plugin from Smash Balloon. As the best Facebook feed plugin for WordPress, Custom Facebook Feeds 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 Custom Facebook Feeds Plugin

First, go ahead and get your own copy of Custom Facebook Feeds 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 WPBeginner’s newbie-friendly post on how to install a WordPress plugin as your guide.

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

Step 2: Connect Your Facebook Account

To let the plugin help you embed a customizable Facebook page to your site, you need to connect it to your Facebook account.

It’s easy to do this. First, go to your WordPress dashboard.

Then, go to Facebook Feeds » Settings. Look for the blue Connect a Facebook account button.

connect facebook page to plugin

Once you’ve seen it, just click on it so you can start linking your plugin to your Facebook account.

Step 3: Select to Show Your Facebook Page

Next, the plugin will ask you to select between connecting your Facebook page or group — it’s jam-packed with lots of features, after all.

embed facebook page on website

This tutorial is focused on embedding a Facebook page on your website, though, so let’s choose Facebook Page. Then, follow the onscreen instructions to finalize your account connection.

Remember to click Save Settings so the plugin remembers your choice. Then, proceed to the next step below.

Step 4: Customize Your Facebook Page’s Feed

Another great feature of the plugin is it automatically inherits your website’s existing theme’s design. This means that your Facebook feed automatically copies your site’s font, color, size and other style elements so it looks consistent with your branding.

And if you want to customize it manually, the plugin gives you lots of customization choices that are easy to set up, even without any coding knowledge.

To start, just head on over to the topmost part of the settings page. Then, click on the Customize » General tabs. You’ll be directed to the customization page where you can freely edit your Facebook page feed’s width, height, padding and even background color.

customize facebook page

Next, scroll down until you see the Post Types section. Under this section, you can easily choose the type of posts you want to show in your Facebook page’s feed. Again, no need for code here since you can just check or uncheck the boxes next to the post type to hide or show them.

facebook page post types

Now, let’s talk about customizing your Facebook page’s header, like box and “load more” button. To access the customization settings for these design elements, just scroll down on the same page until you see this:

embed facebook page on website header load more

Under the header section, you can enable the option to include a header on your Facebook page feed by checking on its checkbox. If you choose to display a visual header, you’ll be asked to select the information you want to show including:

  • Your cover photo
  • Name and avatar
  • About Info

Facebook page header options

For example, here’s what an embedded Facebook page looks like if visual header is chosen:

embed facebook page on website visual header

For a more minimalist design, you can also choose to show your Facebook page with a text header, which looks like this:

embed facebook page on website text header

Feel free to change your Facebook page’s feed as you see fit. Once you’re happy with how it looks like, just remember to click on Save Changes to preserve your choices. Then, go to the final step below.

Step 5: Embed Your Facebook Page on Your Website

You can embed your Facebook page:

  • On your website’s new page or post, or,
  • On your website’s sidebar or footer areas

Let’s talk about both options below.

Embed Your Facebook Page on Your Website’s Page

To start creating a new page, go to your WordPress dashboard and go to Pages » Add New.

embed facebook page on website add new page

You’ll then be taken to your block editor. Here, click the Plus (+) icon located inside your block editor. Next, type “facebook” in the search field. Once you see the Custom Facebook Feed widget, click it to add it to your page’s editor. This will automatically give you a preview of what your Facebook page’s feed looks like.

embed facebook page on website editor

Finally, click Publish to make your Facebook page live on your website.

Embed Your Facebook Page on Your Website’s Sidebar

Did you know that you can also add your Facebook page as a widget in your website’s sidebar?

Yes, and it’s super easy to do this as well.

First, copy your shortcode here:[custom-facebook-feed]

Next, go to your WordPress dashboard and click on Appearance » Widgets. See the Text widget? Just drag the Text widget to your chosen sidebar. Then, paste the shortcode you copied into the widget’s blank area.

embed facebook page on website widget

Remember to click Save and you’re done. Now, you can see your Facebook page embedded on your website’s sidebar, like this:

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?

Click here to get started with Facebook Feeds by Smash Balloon today!

Want to display more social feeds to your site? You can also add Twitter feed and even your 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 *