Send Button

The Send button lets people privately send content on your site to one or more friends in a Facebook message.

Send Button ConfiguratorCode ExampleSettingsFAQs

Step-by-Step

1. Choose URL or Page

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

2. Code Configurator

Paste the URL to the Code Configurator and click the Get Code button to generate your send button code.

3. Copy & Paste HTML snippet

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

Send Button Configurator

URL to send

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="http://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="http://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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>

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

</body>
</html>
Customize Link Preview

Settings

The configurator above doesn't include all of the possible settings for your Send button. You can also change the following settings:

Setting HTML5 Attribute Description Default

colorscheme

data-colorscheme

The color scheme used by the plugin. Can be "light" or "dark".

"light"

href

data-href

The absolute URL of the page that will be sent.

Current URL.

kid_directed_site

data-kid-directed-site

If your web site or online service, or a portion of your service, is directed to children under 13 you must enable this

"false"

ref

data-ref

A label for tracking referrals which must be less than 50 characters, and can contain alphanumeric characters and some punctuation (currently +/=-.:_). See the FAQ for more details.

None

size

data-size

The button is offered in 2 sizes i.e. large and small.

small