Like Button
Like Button （喜欢按钮）
Intro
Intro （简介）
The like button is a feature of social networking service Facebook, where users can like content such as status updates, comments, photos links shared by friends and advertisements. Facebook Like button is a perfect thing in SEO. （点赞按钮是社交网络服务Facebook的一项功能，用户可以点赞状态更新、评论、朋友分享的照片链接和广告等内容。Facebook点赞按钮在搜索引擎优化中是一件完美的事情。）
Facebook lets you create like button very easy. Let’s see what we need for the beginning. （Facebook可以让您轻松创建点赞按钮。让我们从一开始就看看我们需要什么。）
First of all, we need to create Facebook Application. When we create it, we can give some properties from that App (AppId, etc..). Then as every social website, we need to connect our application to Facebook service. Here is how it looks like. （首先，我们需要创建Facebook应用程序。当我们创建它时，我们可以从该应用程序中提供一些属性（ AppId等）。然后，就像每个社交网站一样，我们需要将我们的应用程序连接到Facebook服务。这是它的样子。）
<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>
If we want to use Facebook API we need to have this script in our page. No matter what API we wish to use (like button, like a box, share button, etc…), this script will help you to use Facebook API. （如果我们想使用Facebook API ，我们需要在页面中使用此脚本。无论我们希望使用什么API （如按钮、框、共享按钮等） ，此脚本都将帮助您使用Facebook API。）
We can make custom like button. We can define width,action type,layout etc… （我们可以制作自定义的LIKE按钮。我们可以定义宽度、操作类型、布局等…）
Let’s see a simple example. （让我们看一个简单的例子。）
<!DOCTYPE html>
<html>
<head>
<title>www.w3cdoc.com</title>
</head>
<body>
<div class="fb-like" data-href="http://www.w3cdoc.com/" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></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>
As you see, there is nothing complicated in this. On like button tag attributes are setting for like button. You can use it with the share button, with user photo, with likes count etc… （如你所见，这没什么复杂的。点赞按钮标签属性设置为点赞按钮。您可以通过分享按钮、用户照片、赞数等使用它……）
Settings
Settings （设置）
As we have told there are some attributes which are settings for the like button. Here is a table of that setting. You can test all these properties on our example. （正如我们所说，有一些属性是类似按钮的设置。以下是该设置的表格。您可以在我们的示例中测试所有这些属性。）
| Setting | Attribute | Description | Default |
|---|---|---|---|
| action | data-action | The verb displaied on the button. Can be either “like” or “recommend” | “like” |
| colorscheme | data-colorscheme | The color scheme used by the plugin for any text outside of the button itself. Can be “light” or “dark”. | “light” |
| href | data-href | The absolute URL of the page that will be liked. | XFBML and HTML5 versions default to the current URL. |
| kid_directed_site | data-kid-directed-site | If your website or online service, or a portion of your service is directed to children under 13 you must enable this. | “false” |
| layout | data-layout | Selects one of the different layouts that are available for the plugin. Can be one of “standard”, “button_count”, “button” or “box_count”. | “standard” |
| ref | data-ref | A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). | None |
| share | data-share | Specifies whether to include a share button beside the Like button. This only works with the XFBML version. | “false” |
| show_faces | data-show-faces | Specifies whether to display profile photos below the button (standard layout only). You must not enable this on child-directed sites. | “false” |
| width | data-width | The width of the plugin (standard layout only), which is subject to the minimum and default width. | 20 |