example.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OpenFB Sample</title>
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
    />
  </head>
  <body>
    <div class="container">
      <h1>OpenFB</h1>
      <p>
        Facebook integration in JavaScript apps running in the browser and in
        Cordova.
      </p>
      <hr />

      <button onclick="login()">Login with Facebook</button>
      <hr />

      <button onclick="getInfo()">Get My Info</button>
      <p>Name: <span id="userName"></span></p>
      <img id="userPic" />
      <hr />

      <textarea id="Message" placeholder="What's on your mind?"></textarea>
      <button onclick="share()">Share</button>
      <hr />

      <p>
        Complete Facebook Logout. After logging out, you'll have to login again
        and provide your Facebook credentials.
      </p>
      <button onclick="logout()">Logout</button>
      <hr />

      <button onclick="readPermissions()">Read Permissions</button>

      <p>
        Revoke App Permissions. After revoking permissions, you'll have to grant
        permissions again when logging in.
      </p>
      <button onclick="revoke()">Revoke Permissions</button>
    </div>

    <!--cordova.js is automatically injected by the Cordova build process-->
    <script src="openfb.js"></script>

    <script>
      // Defaults to sessionStorage for storing the Facebook token
      openFB.init({ appId: 'YOUR_FB_APP_ID' })

      //  Uncomment the line below to store the Facebook token in localStorage instead of sessionStorage
      //  openFB.init({appId: 'YOUR_FB_APP_ID', tokenStore: window.localStorage})
      function login () {
        openFB.login(
          response => {
            alert(
              esponse.status === 'connected'
                ? `Facebook login succeeded, got access token: ${
                    response.authResponse.accessToken
                  }`
                : `Facebook login failed: ${response.error}`,
            )
          },
          {
            scope: 'email',
          },
        )
      }

      function getInfo () {
        openFB.api({
          path: '/me',
          success: data => {
            console.log(JSON.stringify(data))
            document.getElementById('userName').innerHTML = data.name
            document.getElementById('userPic').src =
              'http://graph.facebook.com/' + data.id + '/picture?type=small'
          },
          error: errorHandler,
        })
      }

      function share () {
        openFB.api({
          method: 'POST',
          path: '/me/feed',
          params: {
            message:
              document.getElementById('Message').value ||
              'Testing Facebook APIs',
          },
          success: () => alert('the item was posted on Facebook'),
          error: errorHandler,
        })
      }

      function readPermissions () {
        openFB.api({
          method: 'GET',
          path: '/me/permissions',
          success: result => alert(JSON.stringify(result.data)),
          error: errorHandler,
        })
      }

      function revoke () {
        openFB.revokePermissions(
          () => alert('Permissions revoked'),
          errorHandler,
        )
      }

      function logout () {
        openFB.logout(() => alert('Logout successful'), errorHandler)
      }

      function errorHandler (error) {
        alert(error.message)
      }
    </script>
  </body>
</html>