index.html

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>jquery-facebook-authorize by pstrinkle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">

    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  </head>
  <body>
    <section class="page-header">
      <h1 class="project-name">jquery-facebook-authorize</h1>
      <h2 class="project-tagline">jQuery Plugin to simplify the process of requesting Facebook permissions, such that you only proceed forward in sign-up  once the user has granted all you require.</h2>
      <a href="https://github.com/pstrinkle/jquery-facebook-authorize" class="btn">View on GitHub</a>
      <a href="https://github.com/pstrinkle/jquery-facebook-authorize/zipball/master" class="btn">Download .zip</a>
      <a href="https://github.com/pstrinkle/jquery-facebook-authorize/tarball/master" class="btn">Download .tar.gz</a>
    </section>

    <section class="main-content">
      <h3><a id="basics" class="anchor" href="#basics" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>The Basics</h3>
      <p>jQuery Plugin to simplify the process of requesting Facebook permissions, such that you only proceed forward in sign-up  once the user has granted all you require.</p>

      <h3>Installation</h3>
      <p>Basically just include the file and set up the Facebook API on the page.

      <pre class="prettyprint lang-html">
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="/libs/jquery-facebook-authorize/jquery.facebook-authorize.min.js"&gt;&lt;/script&gt;

&lt;script&gt;
window.fbAsyncInit = function() {
    FB.init({
        appId   : XXXXXXXXXXXXXXXXXXXXXXX,
        cookie  : true,
        xfbml   : true, /* parse social plugins on this page. */
        version : 'v2.5'
    });
};

(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'));
&lt;/script&gt;

&lt;div id='error_msgs'&gt;&lt;/div&gt;

&lt;div class='row'&gt;
  &lt;button id='facebook_request' class="btn btn-default" style="color:#0b62a4;"&gt;
    &lt;i class="fa fa-facebook-square"&gt;&lt;/i&gt; Login with Facebook
  &lt;/button&gt;
&lt;/div&gt;

&lt;script&gt;
    $(function() {
        var $fbreq = $('#facebook_request');

        var options = {required : ['public_profile', 'email', 'user_friends', 'publish_actions'],
                       optional: []};
        $fbreq.facebookAuthorize(options);

        $fbreq.on('facebook-request-clicked', function(event) {
            $('#error_msgs').empty();
        });
        $fbreq.on('facebook-missing-required', function(event, missing) {
            $('#error_msgs').text('missing: ' + JSON.stringify(missing));
        });
        $fbreq.on('facebook-success', function(event, granted, missing, details) {
            /* move the user onto whatever step applies. */
            createOrLogin(granted, details);
        });
        $fbreq.on('facebook-not-authorized', function(event) {
            $('#error_msgs').text('not authorized');
        });
        $fbreq.on('facebook-not-loggedin', function(event) {
            $('#error_msgs').text('not logged in...');
        });
    });
&lt;/script&gt;
</pre>
      
      <h3>Usage</h3>
      <table class="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>required</td>
            <td>array</td>
            <td><code>[]</code></td>
            <td>List of required permissions.</td>
          </tr>
          <tr>
            <td>optional</td>
            <td>array</td>
            <td><code>[]</code></td>
            <td>List of optional permissions.</td>
          </tr>
        </tbody>
      </table>
      
      <h3>Events</h3>
      <table class="table">
        <thead>
          <tr>
            <th>Event</th>
            <th>Handler</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>facebook-request-clicked</code></td>
            <td><code>function(event)</code>: <br>- <code>event</code> - jQuery event</td>
          </tr>
          <tr>
            <td><code>facebook-missing-required</code></td>
            <td><code>function(event, missing)</code>: <br>- <code>event</code> - jQuery event <br>- <code>missing</code> - comma separated string of missing required permissions</td>
          </tr>
          <tr>
            <td><code>facebook-success</code></td>
            <td><code>function(event, granted, missing, details)</code>: <br>- <code>event</code> - jQuery event <br>- <code>granted</code> - comma separated string of all permissions granted <br>- <code>missing</code> - comma separated list of any missing optional permissions <br>- <code>details</code> - Facebook API response.authResponse object</td>
          </tr>
          <tr>
            <td><code>facebook-not-authorized</code></td>
            <td><code>function(event)</code>: <br>- <code>event</code> - jQuery event</td>
          </tr>
          <tr>
            <td><code>facebook-not-loggedin</code></td>
            <td><code>function(event)</code>: <br>- <code>event</code> - jQuery event</td>
          </tr>
        </tbody>
      </table>

      <h3>License</h3>
      <p><a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a></p>

      <footer class="site-footer">
        <!-- <span class="site-footer-owner"><a href="https://github.com/pstrinkle/jquery-levelup">Jquery-levelup</a> is maintained by <a href="https://github.com/pstrinkle">pstrinkle</a>.</span> -->
        <a href="https://twitter.com/YammyCozonac" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @YammyCozonac</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        <a class="github-button" href="https://github.com/pstrinkle" data-style="mega" aria-label="Follow @pstrinkle on GitHub">Follow @pstrinkle</a>
        <!-- <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span> -->
        <script async defer src="https://buttons.github.io/buttons.js"></script>
      </footer>

    </section>  
  </body>
</html>