Simple Share
Simple Share （单一股票）
Intro
Intro （简介）
As you can guess, this chapter will teach you how to create 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简单共享按钮。首先，我们必须谈谈创建Facebook应用程序。创建应用程序时，您将获得其ID （应用程序ID ） ，并在您的网页上使用它。让我们看看一开始我们必须做些什么。）
Facebook Gives you a script (Javascript SDK), which will help you to work with Facebook and use its APIs. Here is the script. （Facebook为您提供了一个脚本（ Javascript SDK ） ，它将帮助您与Facebook合作并使用其API。这是脚本。）
<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. （此代码需要连接一次，因此您不必随处连接。在应用程序中的任何位置连接它，您就可以在任何地方使用Facebook API。现在，让我们看看如何创建一个简单的分享按钮。）
<!DOCTYPE html>
<html>
<head>
<title>www.w3cdoc.com</title>
</head>
<body>
<div class="fb-share-button" data-href="http://www.w3cdoc.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
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="w3cdoc Facebook Simple Share Button."/>
<meta property="og:image" content="http://www.w3cdoc.com/uploads/media/book_gallery/0001/01/066705b46be05dfdde77a1bc60c120b76257b553.png"/>
Now let’s see how to customize button. Here are the values of fields. （现在，我们来看看如何自定义按钮。以下是字段的值。）
| Setting | HTML5 Attribute | Description | Default |
|---|---|---|---|
| href | data-href | The absolute URL of the page that will be shared. | XFBML and HTML5 versions default to the current URL. |
| layout | data-layout | 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”. | icon_link |