Home > Articles > Web Development

  • Print
  • + Share This
Like this article? We recommend

Like this article? We recommend

Initiating the Environment

Initiating the Environment

Two simple steps give you access to the full Facebook Connect functionality in your web page:

  1. Add the Facebook Connect JavaScript library into your page:
  2. <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" 
    type="text/javascript"></script>
  3. Call the Facebook initialization function FB.init.

The FB.init function expects two arguments:

  • The API key you received when creating the Facebook stub application.
  • The relative address of the HTML page (usually named xd_receiver.htm) used to exchange data between your application and Facebook. This page has to be within the directory you specified as the Connect URL on the Connect tab of the Facebook application edit form.

The contents of the xd_receiver.htm file are best downloaded directly from the Facebook documentation or from the Facebook Connect sample application.

After the Facebook Connect environment is initialized, you can query the status of your application's connection with Facebook:

  • Connected. The user has logged into Facebook in this browser session (or allowed Facebook to cache her login status) and has authorized your application to use her Facebook account.
  • Not connected. The user hasn't logged into Facebook or hasn't yet authorized your application.

You can execute additional JavaScript functions immediately after the environment is initialized[md]for example, to adapt the introductory text on your web page[md]by passing them within the third parameter of the FB.init function. For example, our sample application uses the following code to call the fb_login function (which changes the text displayed on the first page) if the user has already connected our application with her Facebook account:

<script>
  FB.init("4614058aac0b3b2be7896ce84baf9b44", "xd_receiver.htm",
    { ifUserConnected: fb_login });
</script>
  • + Share This
  • 🔖 Save To Your Account