Add Facebook Page Feed Or Other Facebook Social Plugin

Last Updated: 5/24/2019

Facebook offers the ability to embed a feed of your account within your website. In addition, there are several other ways to connect to your account, by the means of "like" buttons, comments and more. The details of each option are explained on the Facebook Social Plugins page.

The following article references the Page Plugin for its screenshots, as it is the most often utilized. However, all other plugins will utilize this same setup.

To add a Facebook plugin, follow these steps:

Part 1: Create Facebook Plugin

  1. Access this webpage: https://developers.facebook.com/docs/plugins/
  2. Choose the Login button in the upper right corner and proceed to sign in with your Facebook account information (if not already).
  3. You'll need to sign in with your personal account which is listed as an authorized administrator of the Facebook Page.

  4. Select the appropriate option from the Social Plugins list on the far left (for a page feed, choose Page Plugin).
  5. In a separate tab, visit your Facebook Page and copy the entire URL directly from your address bar.
  6. Return to the plugin configuration tab, then scroll down and paste this into the field asking for a URL. Depending on the plugin type, the name of the field will vary, but it will always say "URL" (the Page Plugin's field is called Facebook Page URL).
  7. If available, make sure the Adapt to plugin container width option is checked. This will automatically adapt your plugin's original size, to fit the screen size of the mobile device you are viewing it on.
  8. If necessary, customize the other settings to your liking (if available). Changes will update in the preview panel below.
  9. When ready, click the Get Code button beneath the preview. 
  10. We will be copying this code shortly. For now, proceed to Part 2 below. 

Part 2: Create Facebook Widget Block (Your Website)

  1. In a NEW browser tab, open the administrative panel of your website and access: Website>Blocks.
  2. Select New Block.
  3. From the list, choose choose the Markup option. This offers you a full editor for adding content, just like your pages do.
  4. Assign the position where the feed/plugin will display. Most websites will utilize an 'aside_left' or 'aside_right' position.
  5. Provide an appropriate name for the block.
  6. Click Create My Block.
  7. Click the 'Source icon' on the 1st row toolbar.

Part 3: Enter Facebook Plugin Code (Your Website)

  1. Return to the first browser tab used to obtain the code from Part 1 in this article - the popup window should still be opened.
  2. There will be two sets of code we will need to copy. First, click once over the code below Step 1>copy.
  3. Return to the website's browser tab and paste this onto the first line, then hit enter on your keyboard.
  4. Go back to the Facebook tab in your browser and click once over the code below Step 2>copy.
  5. Return to the website's browser tab and paste onto the new line below the first set of code.
  6. Adjust any other block settings, if necessary.
  7. Click Save Block.
  8. Be sure the block is active by adjusting its Status setting to On.

Once all of the steps are completed, it will look similar to this:

Still need help? Contact Us Contact Us