# Page Plugin



The Page plugin lets you easily embed and promote any public Facebook Page on your website. Just like on Facebook, your visitors can like and share the Page without leaving your site. You can use the Page plugin for any Page that is not restricted, for example, by country or age.

**Warning:** Related Topics: [Social Plugins FAQs](https://developers.facebook.com/docs/plugins/faqs) | [Other Social Plugins](https://developers.facebook.com/documentation/plugins)

## Settings {#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` |
| `tabs` | `data-tabs` | Tabs to render i.e. `timeline`, `events`, `messages`. Use a comma-separated list to add multiple tabs, i.e. `timeline, events`. | `timeline` |
| `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` |
| `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` |
| `lazy` | `data-lazy` | `true` means use the browser's lazy-loading mechanism by setting the `loading="lazy"` iframe attribute. The effect is that the browser does not render the plugin if it's not close to the viewport and might never be seen. Can be one of `true` or `false` (default). | `false` |

#### Deprecated Attributes
- The attribute `data-show-posts` is deprecated. Please use the attribute `tabs`/`data-tabs` and use the value `timeline` to show posts from the Page's timeline.

## Adding the Page Plugin to a Website {#how-to}
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"></div>
```

## Call to Action {#cta}

If your page has a custom call to action button, it will be shown instead of the default call to action which is a Share button.

If the width of the plugin is less than 280px, the default Share button will be shown to prevent design misalignment in different translations.

## Page Tabs: Timeline, Events & Messages {#page-tabs}
You can now have **timeline**, **events** and **messages** tabs on the plugin:

- **Timeline Tab**: Will show the most recent posts of your Facebook Page timeline.
- **Events Tab**: People can follow your page events and subscribe to events from the plugin.
- **Messages Tab**: People can message your page directly from your website. People need to be logged in to use this feature.

#### Enabling Messaging on your Page
To **enable messaging** on your Facebook page go to your Page `Settings`. In the row `Messages` check *Allow people to contact my Page privately by showing the Message button* (Direct Link: `https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view`).

### Adding Multiple Tabs
Use a comma-separated list within the `data-tabs` attribute to add multiple tabs:

```
<div class="fb-page"
data-tabs="timeline,events,messages"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380"
data-hide-cover="false"></div>
```

### Single Tab
You can also just add a single tab showing either the `timeline`, `events` or `messages`:

```
<div class="fb-page"
data-tabs="events"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380"></div>
```

## Adaptive Width {#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  {#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](http://www.w3schools.com/css/css_boxmodel.asp) **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  {#friends-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"></div>
```

## Privacy Restricted Pages {#privacy}

Facebook Pages with privacy restrictions cannot be embedded.

## Changing the Language {#language}

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

*Example*

```
js.src = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.5";
```

Supported locales are referenced in the [Facebook Locales XML file](http://www.facebook.com/translations/FacebookLocales.xml).
You may need to adjust the width of a Social Plugin to accommodate different languages. You may find more information on our [Localization & Translation](https://developers.facebook.com/documentation/javascript/internationalization) page.