Facebook API

Facebook API can be used to build non-automated, authentic, high-quality demonstrative blocks.

Official documentation

For more detailed information and examples, see the official documentation: Facebook for developers .

How to use?

Include these metatags right before <head> tag is closed.

<head>
  <meta property="og:url" content="http://localhost:8080">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Front">
  <meta property="og:description" content="Your description">
</head>
Copy

Include this script right after open <body> tag.

<body>
  <script>
    window.fbAsyncInit = function () {
      FB.init({
        appId: '211814435920978',
        xfbml: true,
        version: 'v2.8'
      });
    };

    (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";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>
</body>
Copy

Examples

Page 

<div class="fb-page"
     data-href="https://www.facebook.com/htmlstream"
     data-tabs="timeline"
     data-width="500"
     data-height="500">
  <blockquote cite="https://www.facebook.com/unify2dev" class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/unify2dev">Facebook</a>
  </blockquote>
</div>
Copy

Comments 

<div class="fb-comments"
   data-href="https://www.facebook.com/zuck/posts/10102577175875681?comment_id=1193531464007751&reply_comment_id=654912701278942"
   data-numposts="2"
   data-width="100%"></div>
Copy

Post 

<div class="fb-post"
    data-href="https://www.facebook.com/20531316728/posts/10154009990506729"></div>
Copy

Video 

<div class="fb-video"
     data-href="https://www.facebook.com/facebook/videos/10153231379946729/"
     data-width="500"
     data-show-text="false">
  <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/" class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
    <p>How to share with just friends.</p>Posted by
    <a href="https://www.facebook.com/facebook/">Facebook</a>
    on Friday, 1 January 2018
  </blockquote>
</div>
Copy

Like button 

<div class="fb-like"></div>
Copy

Share 

<div class="fb-share-button"
     data-href="https://developers.facebook.com/docs/plugins/"
     data-layout="button_count"
     data-size="small"
     data-mobile-iframe="true">
  <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse">Share</a>
</div>
Copy
Previous Social APIs - Instagram
Next Social APIs - Twitter
Contact Us