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.
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.
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>
source:https://developers.facebook.com/docs/plugins/share-button/