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 very good thing in SEO.

Facebook lets you create like button very easy. 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 want to use (like button, like 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="//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 difficult in this. On like button tag attributes are setting for like button. You can use it with share button, with user photo, with likes count etc...

Settings

As we have told there are some attributes which are settings for like button. Here is a table of that setting. You can test all this properties on our example.

SettingAttributeDescriptionDefault

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

Related Resources ΒΆ