Step 1: Create a Facebook App
Go to Facebook Developers → https://developers.facebook.com/
Create a new app
Copy your App ID
Add a Contact Email
(Required to make the app live)
Step 2: Load Facebook SDK (inside– recommended)
<body>
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: ‘YOUR_APP_ID’,
xfbml: true,
version: ‘v18.0’ // use latest available version
});
};
// Load the SDK asynchronously
(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”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
</script>
<!– Page content goes here –>
</body>
Step 3: Create the Share Button
<p>
<a href=”javascript:void(0)” class=”facebook-share” rel=”nofollow”>
Share on Facebook
</a>
</p>
Step 4: jQuery Share Logic
<script>
jQuery(document).ready(function ($) {
$(‘.facebook-share’).on(‘click’, function () {
FB.ui({
method: ‘share’,
href: ‘https://developers.facebook.com/docs/’,
quote: ‘Facebook Dialogs provide a simple, consistent interface for sharing content.’,
hashtag: ‘#FacebookShare’
}, function (response) {
if (response && !response.error_message) {
alert(‘Post was shared successfully.’);
} else {
alert(‘Post was not shared.’);
}
});
});
});
</script>
NOTES: Recommended Meta Tags (Very Important)