How to Embed Facebook's New Page Plugin on Your Website

By Jillean Kearney on June 04, 2015

Many websites, including Agility CMS-powered websites, use Facebook's Like Box. The Like Box is an embeddable plugin that allows users to Like and share your Facebook Page without ever having to leave your website. The embed also displays Facebook users that already like your Page.

Facebook announced that it's retiring the Like Box on June 23rd, and replacing it with the new Page Plugin. The change is part of Facebook's release of Graph API v2.3. 

The Page Plugin has similar functionality to the Like Box, but it's easier on the eyes (includes a page's cover photo) and provides the option to pull in content from your Facebook Page, like Twitter's embeddable feed plugin.

Facebook is asking that all Like Box code be removed from websites and replaced with the new Plugin Page code.

If a website's embed code isn't updated by June 23rd, the Page Plugin will automatically show up in place of the Like Box but it may not work effectively without the new Graph API.

Agility CMS Users: Follow the five easy steps below to embed Facebook's new Page Plugin within your website's sidebar (or elsewhere on your site).

How to Embed Facebook's New Page Plugin

Step 1: Navigate to: https://developers.facebook.com/docs/plugins/page-plugin

This is where you are able to configure how your new Facebook Page Plugin will look. Fill in all the necessary requirements, which include:

  • The URL of your Facebook Page

  • Width and height (Please note: If using the plugin within a sidebar zone, max width is 300px)

  • Whether you wish to include your Cover Photo, Page Posts and Friend's Faces

Facebook Page Plugin

Step 2: Once you're happy with how your Plugin looks, click on the "Get Code" button. You'll be presented with a pop-up that contains your new code. This is the code that you will be adding to Agility CMS.

Plugin Code

Step 3: Copy the first script, the JavaScript code. This will be pasted into your instance's Global Scripts. Navigate to Settings >> Global Scripts (under Customization).

Agility CMS Settings

Paste this code into the Top Script area. Hit OK.

Agility CMS Global Scripts

Step 4: Next, copy the second script from Facebook's embed pop-up from Step 2. Within Agility CMS, Navigate to Digital Content >> Website Configuration Settings.

Under the Content tab, paste this second code into the Facebook Plugin Code area.

Agility CMS Website Configuration Settings

Step 5: Once complete, hit Save and Publish. Your new Facebook Plugin will appear on any page that includes the Facebook module.

Add a Comment | Back to Top

June 04, 2015
Categories:  Content Managers

Add A Comment

Comment

Allowed HTML: <b>, <i>, <u>

Comments

SUBSCRIBE TO OUR BLOG

Have Questions?

Speak to a Solutions Advisor.

Contact Us

1 (888) 299-2998

info@agilitycms.com