Share Button

The Share button lets people add a personalized message to links before sharing on their timeline, in groups, or to their friends via a Facebook Message.

If your app is native to iOS or Android, we recommend that you use the native Share Dialog on iOS and Share Dialog on Android instead.

If your website doesn't need a button to open share dialog or Facebook provided button doesn't fit into your website design, Web Share Dialog is also provided for sharing links. Note that you do not need to implement Facebook login or request any additional permissions through app review in order to use this plugin.

Share Button Configurator
Code Example
Settings
FAQs

Step-by-Step

1. Choose URL or Page

Pick the URL of a website or Facebook Page you want to share.

2. Code Configurator

Paste the URL to the Code Configurator and adjust the layout of your share button. Click the Get Code button to generate your share button code.

3. Copy & Paste HTML snippet

Copy and past the snippet into the HTML of the destination website.

Share Button Configurator

URL to share

Layout

button_count

Button Size

small

Get Code

Full Code Example

Copy & paste the code example to your website. Adjust the value data-href to your website URL. Next use the og:*** meta tags to adjust your link preview. og:url and data-href should use the same URL.

<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="Your Website Title" />
<meta property="og:description"   content="Your description" />
<meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your share button code -->
<div class="fb-share-button" 
data-href="https://www.your-domain.com/your-page.html" 
data-layout="button_count">
</div>

</body>
</html>

Settings

Setting	HTML5 Attribute	Description	Default
`href`	`data-href`	The absolute URL of the page that will be shared.	XFBML and HTML5 versions default to the current URL.
`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`
`layout`	`data-layout`	Selects one of the different layouts that are available for the plugin. Can be one of `box_count`, `button_count`, `button`.	`icon_link`
~~`mobile_iframe`~~ Deprecated	~~`data-mobile_iframe`~~	If set to `true`, the share button will open the share dialog in an iframe (instead of a popup) on top of your website on mobile. This option is only available for mobile, not desktop. For more information see Mobile Web Share Dialog.	~~`false`~~
`size`	`data-size`	The button is offered in 2 sizes i.e. `large` and `small`.	`small`