Sabtu, 07 Juni 2014

Step by Step How to Add Facebook Like Button to Your Web Page

Facebook gives you 4 alternative methods; HTML5, XFBML IFRAME and URL to add like button to your page.

But in this step by step tutorial I am gonna show you to add to your page with HTML5 method.


Step 1. Placing element root to your page

<div id="fb-root"></div>



Step 2. Placing Javascript Facebook SDK right after the root element

<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=1420140978258210&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



Step 3. Adding like button to wherever you want to 'this' page.

<div class="fb-like" data-href="http://YOUR_WEB_SITE.com/YOUR_CURRENT_PAGE" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>


Final code should look like this

<html>
    <head>
        <title>your web title</title>
    </head>
    <body>
        <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=1420140978258210&version=v2.0";
          fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));</script>
         
        <div>YOUR HEADER</div>
        <div>YOUR CONTENT</div>

        <!-- the like button -->
        <div>
            <div class="fb-like" data-href="http://YOUR_WEB_SITE.com/YOUR_CURRENT_PAGE" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
        </div>
    </body>
</html>