Page

The Page component renders the Facebook Page plugin using the fb-page XFBML class. It can display a page's timeline, upcoming events, and a messaging interface.

Try it live

Toggle tabs, headers, and facepile in the Playground.

Import

import { Page } from 'react-facebook';

Props

Prop	Type	Default	Description
`href`	`string`	Current page URL	The URL of the Facebook Page.
`tabs`	`string`	`undefined`	Comma-separated list of tabs to render. Options: `'timeline'`, `'events'`, `'messages'`.
`width`	`number \| string`	`undefined`	Width of the plugin in pixels (min `180`, max `500`).
`height`	`number \| string`	`undefined`	Height of the plugin in pixels (min `70`).
`hideCover`	`boolean`	`false`	Hide the cover photo in the header.
`showFacepile`	`boolean`	`false`	Show profile photos of friends who like the page.
`hideCTA`	`boolean`	`false`	Hide the custom call-to-action button (if available).
`smallHeader`	`boolean`	`false`	Use a smaller header.
`adaptContainerWidth`	`boolean`	`false`	Adapt the plugin width to its parent container.
`lazy`	`boolean`	`false`	Lazy-load the plugin.
`className`	`string`	`''`	Additional CSS class names appended to the container.

Usage

Basic

<Page href="https://www.facebook.com/YourPage" />

Timeline with Facepile

<Page href="https://www.facebook.com/YourPage" tabs="timeline" width={500} height={600} showFacepile />

Multiple Tabs

<Page
  href="https://www.facebook.com/YourPage"
  tabs="timeline,events,messages"
  width={400}
  height={500}
  smallHeader
  adaptContainerWidth
/>

Minimal

<Page href="https://www.facebook.com/YourPage" hideCover hideCTA smallHeader width={340} height={130} />