Facebook Page Plugin

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

This article will provide detailed information on how to add the Facebook Page Plugin to your site in order to promote your Facebook Business Page on your Business Catalyst site.

Obtaining the code

To get started, navigate to this URL which will take you to the Facebook Page Plugin wizard. Follow the steps below to complete the wizard:

  1. Populate the Facebook Page URL field with the URL of your Facebook business page.
  2. Populate the Width field with a number that will represnet the width of your page plugin (Min. 270 to Max. 500)
  3. Populate the Height field with a number that will represnet the width of your page plugin (Min. 130)
  4. You will also see the following options in which you can select: Hide Cover Photo, Show Friend's Faces & Show Page Posts. Selecting any of these options will effect how your Activity Feed will appear.
  5. Click the Get Code button and the following lightbox will appear:

You will need to copy both sections of this code and insert it onto a web page. The next section of this article will describe how to achieve this.

Implementing the code

  1. The first section of code, the JavaScript SDK is only required to be inserted on your page once. Insert this immediately after the closing <body> tag on your web page.
  2. The second section of your code is the HTML portion. You can insert this anywhere on your web page between the <body></body> tags, and must be after the JavaScript SDK code.

See the example below:

The end result should look similar to the following:

Customizing the code

Facebook allows the ability to customize the HTML code that is generated by the Page Plugin wizard. The following parameters can be changed:

Setting HTML5 Attribute Description Default
href data-href The URL of the Facebook Page None
width data-width The pixel width of the plugin. Min. is 280 & Max. is 500 340
height data-height The maximum pixel height of the plugin. Min. is 130 500
hide_cover data-hide-cover Hide cover photo in the header false
show_facepile data-show-facepile Show profile photos when friends like this true
show_posts data-show-posts Show posts from the Page's timeline. false