Like Button
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 lets you create a button very easily. Let's see what we need for the beginning.
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.
<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.
We can make custom like button. We can define width,action type,layout etc...
Let's see a simple example.
<!DOCTYPE html>
<html>
<head>
<title>www.w3docs.com</title>
</head>
<body>
<div class="fb-like" data-href="http://www.w3docs.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
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 |
0 Comments
CAN FEEDBACK
Emoji