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 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 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.

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

Practice Your Knowledge

What is the purpose of the 'element.textContent' in JavaScript?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?