Adding any kind of facebook share button to a website is simple and easy, whether it's basic share button which you have seen on most websites or a custom designed button which you may have seen in some websites. Here's a step by step guide on how you can add a facebook share button on you website -
Note: This guide presumes that you do not have a facebook developer account. If you have one, you can skip to the step 7.
Step 1:
Go to https://developers.facebook.com/ and click on Log In
Step 2:
You will be redirected to the facebook login page. Log In with your facebook account or create a new one if you don't have any. Facebook strongly advises to create a developer account using your personal account and not by creating a new account using the company name or website name. Enter your facebook username and password then click login.
Step 3:
After logging in, you will be redirected to the main page again with a new dropdown My Apps. Click on My Apps.
Step 4:
After clicking on My Apps a dropdown will show with several options. Click on Add New App.
Step 5:
After clicking on Add New App a popup will show asking for Display Name and Contact Email for your app. Fill up the details accordingly and hit Create App ID
Step 6:
After clicking on Create App ID a popup will show asking for security code captcha. Type the code and click submit.
Step 7:
Now, you will be redirected to your apps admin panel. By default the status of your app will be OFF, meaning your app is in development and not live. You can turn it ON any time you like. In this admin panel you can see all the facebook products that can be used in your app and an APP ID in the top left corner next to your Apps Name. This is a unique ID for your application to be used wherever you are trying to access facebook api. Keeping that in mind, let's move forward.
Step 8:
Click on the Settings in the left pane and then Basic. Add your website's domain which would be like 'www.mywebsite.com' in App Domains.
Step 9:
Now, scroll down to the page and click on Add Platform.
Step 10:
After clicking on Add Platform a popup will show asking for platform selection. Click on Website to select it.
Step 11:
A new section will get added to the page asking for your Website URL. Enter the Site URL and click on Save Changes.
Step 12:
Now you are all set to add a facebook share button to your website. You can add a share button in two ways -
- Share Button (Basic Share Button)
- Share Dialog (Custom Share Button)
Share Button
A share button can be added to a website easily with a few lines of code. But first we need to include facebook's Javascript SDK in our webpage, right after the opening body tag.
<!-- Include the JavaScript SDK on your page once, ideally right after the opening body tag. -->
<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_GB/sdk.js#xfbml=1&version=v3.0&appId=1774450775918270&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>After including the Javascript SDK all you need is the markup given below to show up the share button wherever you want.
<!-- Place this code wherever you want plugin to appear -->
<div class="fb-share-button"
data-href="https://www.codemeright.com/facebook-share-button.html"
data-layout="button"
data-size="small"
data-mobile-iframe="true">
<a target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.codemeright.com%2Ffacebook-share-button.html&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Share</a>
</div>Output: The code above will show the basic small share button on your page
There are some variations in the share button that can be achieved by changing values of attributes data-layout and data-size.
data-layout = "button"
data-size = "small"
data-layout = "button"
data-size = "large"
data-layout = "button_count"
data-size = "small"
data-layout = "button_count"
data-size = "large"
data-layout = "box_count"
data-size = "small"
data-layout = "box_count"
data-size = "large"Let's see how we can implement facebook share button plugin with some examples -
Example 1:
Here is an example how to add a share button to a webpage that shares its own URL to facebook.
<html>
<head>
<title>Facebook Share Button</title>
</head>
<body>
<!-- Include the JavaScript SDK on your page once, ideally right after the opening body tag. -->
<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_GB/sdk.js#xfbml=1&version=v3.0&appId=1774450775918270&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>Facebook Share Button (Small)</h1>
<!-- Place this code wherever you want pugin to appear -->
<div class="fb-share-button" data-href="https://www.codemeright.com/facebook-share-button.html" data-layout="button" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.codemeright.com%2Ffacebook-share-button.html&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
<h1>Facebook Share Button (Large)</h1>
<!-- Place this code wherever you want pugin to appear -->
<div class="fb-share-button" data-href="https://www.codemeright.com/facebook-share-button.html" data-layout="button" data-size="large" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.codemeright.com%2Ffacebook-share-button.html&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
</body>
</html>Example 2:
Here is an example how to add a share button with count to a webpage that shares its own URL to facebook.
<html>
<head>
<title>Facebook Share Button (Count)</title>
</head>
<body>
<!-- Include the JavaScript SDK on your page once, ideally right after the opening body tag. -->
<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_GB/sdk.js#xfbml=1&version=v3.0&appId=1774450775918270&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>Facebook Share Button (Count) (Small)</h1>
<!-- Place this code wherever you want pugin to appear -->
<div class="fb-share-button" data-href="https://www.codemeright.com/facebook-share-button-with-count.html" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.codemeright.com%2Ffacebook-share-button-with-count.html&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
<h1>Facebook Share Button (Count) (Large)</h1>
<!-- Place this code wherever you want pugin to appear -->
<div class="fb-share-button" data-href="https://www.codemeright.com/facebook-share-button-with-count.html" data-layout="button_count" data-size="large" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.codemeright.com%2Ffacebook-share-button-with-count.html&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
</body>
</html>Example 3:
Here is an example how to add a share button with box-count to a webpage that shares its own URL to facebook.
<html>
<head>
<title>Facebook Share Button (Box-Count) (Small)</title>
</head>
<body>
<!-- Include the JavaScript SDK on your page once, ideally right after the opening body tag. -->
<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_GB/sdk.js#xfbml=1&version=v3.0&appId=1774450775918270&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>Facebook Share Button (Box-Count) (Small)</h1>
<!-- Place this code wherever you want pugin to appear -->
<div class="fb-share-button" data-href="https://www.codemeright.com/facebook-share-button-with-box-count.html" data-layout="box_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.codemeright.com%2Ffacebook-share-button-with-box-count.html&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
<h1>Facebook Share Button (Box-Count) (Large)</h1>
<!-- Place this code wherever you want pugin to appear -->
<div class="fb-share-button" data-href="https://www.codemeright.com/facebook-share-button-with-box-count.html" data-layout="box_count" data-size="large" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.codemeright.com%2Ffacebook-share-button-with-box-count.html&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
</body>
</html>Share Dialog
If you don't want the standared share button or it doesn't fit to your design then you can use the facebook share dialog plugin. Just create a custom button designed as per your requirements and call the share dialog on that button as shown below -
Example
<html>
<head>
<title>Facebook Custom Share Button</title>
<!-- Open Graph data -->
<meta property="og:title" content="How To Use Font Awesome Icons In HTML" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.codemeright.com/blog/post/how-to-use-font-awesome-icons-in-html" />
<meta property="og:image" content="https://www.codemeright.com/assets/uploads/2017/9/how-to-use-font_awesome-icons-in-html.jpg" />
<meta property="og:description" content="A short description about the page content." />
<meta property="og:site_name" content="Code Me Right" />
<meta property="fb:app_id" content="1774450775918270" />
</head>
<body>
<!-- Include the JavaScript SDK on your page once, ideally right after the opening body tag. -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1774450775918270',
xfbml : true,
version : 'v2.10'
});
FB.AppEvents.logPageView();
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Create a custom button with a unique id -->
<button id="shareBtn" >Share</button>
<!-- Call Share Dialog on the the above created custom button using button id -->
<script>
document.getElementById('shareBtn').onclick = function() {
FB.ui({
method: 'share',
mobile_iframe: true,
href: 'https://www.codemeright.com/blog/post/how-to-use-font-awesome-icons-in-html'
}, function(response){});
}
</script>
</body>
</html>If you have any queries, feel free to ask them in our comment section below. You can comment on our website using your facebook account as our comment section is also a facebook plugin called facebook share plugin. So, it makes it easier for our readers to connect with us without signing in to our website. See! It's good to have facebook around. You can also check out the facebook docs for facebook share button plugin on https://developers.facebook.com/docs/sharing and for all the other plugins on https://developers.facebook.com/docs.
0 Comments