Page Plugin

The Page plugin lets you easily embed and promote any Facebook Page on your website. Just like on Facebook, your visitors can like and share the Page without having to leave your site.

Related Topics: Social Plugins FAQs | Other Social Plugins

Settings

In addition to the settings above, you can also change the following:

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 `180` & Max. is `500`	`340`
`height`	`data-height`	The pixel height of the plugin. Min. is `70`	`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`
`hide_cta`	`data-hide-cta`	Hide the custom call to action button (if available)	`false`
`small_header`	`data-small-header`	Use the small header instead	`false`
`adapt_container_width`	`data-adapt-container-width`	Try to fit inside the container width	`true`

How to add the Page Plugin to your Website

The standard configuration of the Page plugin includes only the header and a cover photo. This size is ideal for promoting your Page in a small space, such as the top of a sidebar.

<div class="fb-page" data-href="https://www.facebook.com/facebook"
  data-width="380" data-hide-cover="false" data-show-facepile="false" 
  data-show-posts="false"></div>

Adaptive Width

The plugin will by default adapt to the width of its parent container on page load (min. 180px / max. 500px), useful for changing layout:

<div style="width: 190px;">
    <!-- Page plugin's width will be 190px -->
  <div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

If the width of the parent element is bigger than the Page plugin's width it will maintain the value defined in data-width:

<div style="width: 600px;">
    <!-- Page plugin's width will be 500px -->
  <div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

The plugin will never be smaller than 180px:

<div style="width: 100px;">
    <!-- Page plugin's width will be 180px -->
  <div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

Adaptive width can be switched off by unchecking Adapt to plugin container width and the plugin will rendered at the specified width irrespective of the parent container.

No Dynamic Resizing

The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet:

The plugin will determine its width on page load
It will not react changes to the box model after page load.

If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

Show Friend's Faces

Show who likes your Page with real people's profile images rather than just a number. People visting your Page will see a count of friends that like the Page as well as their profile photos.

This option can be activated by checking Show Friend's Faces in the configurator.

<div class="fb-page" data-href="https://www.facebook.com/imdb" 
  data-width="340" data-hide-cover="false" data-show-facepile="true"
  data-show-posts="false"></div>

List Page Posts

You can show posts from the Page's timeline in your Page plugin implementation. This is a great way to keep people up to date with what is going on on your Page.

This option can be activated by checking Show Page Posts in the configurator or adding the attribute data-show-posts="true".

<div class="fb-page" data-href="https://www.facebook.com/instagram" 
  data-width="280" data-hide-cover="false" data-show-facepile="false"
  data-show-posts="true"></div>

Privacy Restricted Pages

Some pages have audiance restrictions by age, country, etc. A warning message is shown when you attempt to configure a Facebook Page which is not visible to everyone.

Although, the warning message will only be visible while configuring the plugin here on developers.facebook.com

If a restricted Facebook Page is embedded, then:

Plugin will render normally as expected for those who are not restricted.
Plugin would not render at all for those who are restricted.

Adjust Language

You can adjust the language of the Page plugin plugin by loading a localized version of the Facebook JavaScript SDK. When you load the SDK adjust the value js.src to use your locale: Just replace en_US with your locale, e.g. ru_RU for Russian (Russia):

Example

  js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.3";

Supported locales are referenced in the Facebook Locales XML file. You may need to adjust the width of a Social Plugin to accommodate different languages. You may find more information on our Localization & Translation page.

Supported Pages Checklist

You can use the Page plugin for:

Pages

You cannot use the Page plugin for:

Events

Groups

Pages without owners like generated pages, places, interests, etc

English (US)