Simple Share
Intro¶
As you can guess, this chapter will teach you how to create a Facebook Simple Share button. At first, we must talk about creating a Facebook App. When you create an App, you will get its Id (App ID) and will use it on your webpage. Let's see what we must do for the beginning.
Facebook Gives you a script (Javascript SDK), which will help you to work with Facebook and use its APIs. Here is the script.
<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&appId=316506458541811&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>This code needs to be connected once, so you don't have to connect it everywhere. Connect it anywhere in your application, and you can use Facebook APIs everywhere. So now let's see how we can create a simple share button.
<!DOCTYPE html>
<html>
<head>
<title>www.w3docs.com</title>
</head>
<body>
<div class="fb-share-button" data-href="http://www.w3docs.com/" data-layout="button_count"></div>
<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&appId=1514519048826987&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>Custom Properties¶
But now there is a question: how to customize the properties of share information? Facebook Simple Share gets all that fields from your webpage meta tags. Here is it.
<meta property="og:title" content="Some Content ..."/>
<meta property="og:description" content="W3docs Facebook Simple Share Button."/>
<meta property="og:image" content="http://www.w3docs.com/uploads/media/book_gallery/0001/01/066705b46be05dfdde77a1bc60c120b76257b553.png"/>Now let's see how to customize the button. Here are the values of fields.
| Setting | HTML5 Attribute | Description | Default |
|---|---|---|---|
|
| The absolute URL of the page that will be shared. | XFBML and HTML5 versions default to the current URL. |
|
| Selects one of the different layouts that are available for the plugin. Can be one of "box_count", "button_count", "button", "link", "icon_link", or "icon". |
|
0 Comments
CAN FEEDBACK
Emoji