X
    Categories: WordPress Tutorials, Tips and Guides

How To Embed A Facebook Page On Your WordPress Site

Facebook has become the most popular social media platform today. Everyone from the smallest blog to the largest brand has at least one page on the Facebook.

For all businesses, Facebook Pages offer the following two major advantages:

  • Social Proof: The more likes, comments and general engagement you have on your Facebook page, the more potential customers will trust you. Herd mentality is a very real phenomenon, and having an established Facebook page increases the likelihood of securing new business.
  • Huge Potential Audience: Facebook has more than 1 billion people. If you can reach just a small portion of these users, you could increase potential customer base for your business significantly.

Once you’ve got a Facebook page, you’ll want to get people to like your page. There’s only so far you can get by inviting your friends and family. Many people overlook the simplest way of promoting their Facebook page: Embedding it into your website.

Add Facebook Page to WordPress Website

To begin with, install the Facebook Page plugin on your website. This is very popular plugin with more than 20,000 installations. You could either install the plugin by going to  WordPress Admin Panel >> Plugins>> Add New and searching for the plugin. Alternatively, you could download the plugin from the official website.

Add a Facebook Page to a Page or Post

Once you’ve installed the plugin, you will see a new widget in the WordPress Admin Dashboard. This form will automatically generate a shortcode that you could use to easily embed it into a post or page. The only mandatory field to fill in is the `Facebook Page URL` field, that needs the URL of the Facebook page.

Once you have entered the URL in the field, it will display a shortcode in the grey box at the bottom of the form. Simply copy the shortcode and paste it into the content of your post or page. Once you update or preview your page or post, your Facebook page will be embedded in the content where you added the shortcode.


Add a Facebook Page to a Widget Area

The Facebook Page Plugin also includes a custom widget so that you can easily embed your Facebook page in a widget area. Simply drag the Facebook Page Plugin widget into your desired widget area, and then paste the URL of your Facebook page into the `Page URL` field.

If you are using the classic widget editor, click Save and view your site to see the Facebook page embedded in your widget area. If you’re using the Customizer, you’ll see a live preview of your site with the embedded Facebook Page.

Alternatively, you can also paste a Facebook Page Plugin shortcode into a text widget.

Customising the Appearance of the Plugin

The Facebook Page Plugin provides a number of options for customizing the way your  Facebook Page looks. Here are the few areas you could customize to change the look and feel of the Facebook page on your WordPress website:

Width

You can control the width of the embedded Facebook page with the width setting. Facebook restrict this to between 180 pixels and 500 pixels wide.

Height

You can control the height of the Facebook page with the height setting. There is a minimum of 130 pixels high, or 70 pixels high with the small header setting enabled. If you wish to display your latest Facebook posts in the embedded page, you will need to make the height setting much higher.

Cover Photo

Checking this will display the cover photo for the page in the background of the header. Otherwise, it will just have a white background.

Facepile

Enabling this option shows a list of faces of people who already like your Facebook page.

Page Tabs

You can display any combination of latest posts, events and direct messages in your embedded Facebook page.

Hide Call To Action

If your Facebook page has a call to action, such as shop or subscribe. Checking this option will hide it.

Small Header

The default header for the embedded Facebook page is 130 pixels high. Enabling this option will change it to just 70 pixels high.

Adaptive Width

Enabling adaptive width will restrict the plugin to width of its container, such as a sidebar. It also makes it responsive, so when the size of the window change, the Facebook page will resize as well.

Display Link While Loading

By default the plugin will display the link to the Facebook page while the plugin loads. You can turn this off by leaving this option unchecked. It’s recommended that you leave this enabled, in case a JavaScript error on your site prevents the page from loading.

Link Text

You can also change the text for the link to the Facebook page that displays while it’s loading with this option.

Language

By default the Facebook page will be embedded in the same language as your website’s language setting. This can be changed with the language setting to any one of nearly 100 languages Facebook makes available. One thing to keep in mind is that you can’t embed Facebook pages with different languages on the same web page.

One issue that a number of users have encountered recently is that Facebook have restricted embedding to public pages only, you cannot embed a page with audience restrictions such as age or location. Unfortunately there is no workaround at this time.

Disclaimer: This is a guest post by Cameron Jones, a professional WordPress plugin developer in the Gold Coast, Australia. The opinions and ideas expressed herein are author’s own, and in no way reflect Cloudways position.

Subhan Alam: Subhan Alam is a Digital Marketing Manager at Cloudways, a Managed Cloud Hosting Platform. He works on different regions and is passionate about implementing new approaches in Digital Marketing. He likes to stay fit and meditates daily.