ShareButton

A customizable button that opens the Facebook Share dialog using the JavaScript SDK.

ShareButton renders a fully customizable element that opens the Facebook Share dialog when clicked. Unlike the Share component (which renders the official Facebook XFBML widget), ShareButton lets you control the markup and styling entirely.

Try it live

Try the programmatic share dialog in the Playground.

Import

import { ShareButton } from 'react-facebook';

Props

ShareButton extends ShareOptions with rendering props.

Prop	Type	Default	Description
`href`	`string`	required	The URL to share.
`display`	`'iframe' \| 'popup' \| 'async' \| 'page'`	required	How the share dialog is presented.
`hashtag`	`string`	`undefined`	A hashtag to include in the share (e.g. `'#react'`).
`redirectUri`	`string`	`undefined`	URL to redirect to after the dialog closes (for `'page'` display mode).
`children`	`ReactNode`	`undefined`	Content rendered inside the button.
`as`	`ComponentType \| ElementType`	`'button'`	The element or component to render.
`disabled`	`boolean`	`undefined`	Disables the button.
`className`	`string`	`undefined`	CSS class name.
`style`	`CSSProperties`	`undefined`	Inline styles.

Any additional props are spread onto the rendered element.

Usage

Basic

<ShareButton href="https://example.com" display="popup">
  Share this page
</ShareButton>

Styled with Tailwind CSS

<ShareButton
  href="https://example.com"
  display="popup"
  hashtag="#example"
  className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
>
  Share on Facebook
</ShareButton>

Custom Element

<ShareButton as="a" href="https://example.com" display="popup" className="text-blue-600 hover:underline cursor-pointer">
  Share this article
</ShareButton>