Trying Out Facebook Connect

From Facebook Developer Wiki

Jump to: navigation, search

To demonstrate how Facebook Connect can work for you, this page offers three starting points that vary in the degree of integration you'll need to perform.

The very first basic example shows you how to quickly integrate your site with Facebook Connect by simply setting up a Connect application, and adding a brief snippet of code to your site. By doing just this, you can easily have users log in with Facebook, or connect their accounts on Facebook with existing accounts on your site. All Connect sites should follow these steps.

The second example is a series of demo files we've created to provide a quick and easy how-to, so you can dive into some of the cooler and more complex functionality of Facebook Connect.

Our third example introduces you to a site we created to demonstrate many of the available features of Facebook Connect. It's called The Run Around. Here, you can see a live version of what can be done with Facebook Connect and try it out for real.

Contents

[edit] Basic: Getting Your Site and Facebook Connect Working in Minutes

The simplest implementation of Facebook Connect involves just adding a few snippets of code to your site.

  1. If you don't already have a Facebook Platform API key for your site, create an application with the Facebook Developer application.
    Note: Even if you have created an application and received an API key, you should review steps 1.4 through 1.7 and make sure your application settings are appropriate.
    1. Go to http://www.facebook.com/developers/createapp.php to create a new application.
    2. Enter a name for your application in the Application Name field.
    3. Accept the Developer Terms of Service, then click Save Changes.
    4. On the Basic tab, keep all of the defaults.
    5. Take note of the API Key, you'll need this shortly.
    6. Click the Connect tab. Set Connect URL to the top-level directory of the site which will be implementing Facebook Connect (this is usually your domain, e.g. http://www.example.com, but could also be a subdirectory).
      You should include a logo that appears on the Facebook Connect dialog. Next to Facebook Connect Logo, click Change your Facebook Connect logo and browse to an image file. The logo can be up to 99 pixels wide by 22 pixels tall, and must be in JPG, GIF, or PNG format.
    7. If your site is going to implement Facebook Connect across a number of subdomains of your site (for example, foo.example.com and bar.example.com), you need to enter a Base Domain (which would be example.com in this case). Specifying a base domain allows you to make calls using the PHP and JavaScript client libraries as well as get and store session information for any subdomain of the base domain. For more information about subdomains, see Supporting Subdomains In Facebook Connect.
    8. Click Save Changes.
  2. Create a cross-domain communication channel file called xd_receiver.htm and place it in a directory relative to the Connect URL that you entered in the previous step. For instance, let's say you're using http://www.example.com as your Connect URL, but you want to store your Facebook Connect files in their own subdirectory, say http://www.example.com/connect. You should create the xd_receiver.htm file in the directory from where you'll be serving your Connect Web pages (http://www.example.com/connect in our example). Copy the following content into the file:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <body> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script> </body> </html>

    Or, you can download the file directly. This file will allow your application and Facebook to send data back and forth.

  3. Create another HTML file in the same directory as the one you created in the previous step, say, http://www.example.com/connect/test.html. Within the <html> tag for test.html, add this attribute: xmlns:fb="http://www.facebook.com/2008/fbml", as in:
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

  4. Next, in your newly created test.html file, you need to refer to the Facebook JavaScript Feature Loader file. This will allow your site access to all of the features of Facebook Connect in JavaScript, like XFBML, JavaScript API calls, and so forth. This script should be referenced in the BODY of your file, not in the HEAD.
    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

  5. You can render a Facebook Connect login button using XFBML on your page, right alongside of your normal HTML. For instance, after the two lines that you just added, you could use a line of markup like this:
    <fb:login-button></fb:login-button>

    This will render the Facebook Connect login button, so that you'll be able to connect your Facebook account to your site.
    Optionally, you can add a JavaScript handler to the callback function to call when the user logs in:
    <fb:login-button onlogin="facebook_onlogin();"></fb:login-button>

  6. Finally, you need to include the following script after the login button:

    <script type="text/javascript"> FB.init("YOUR_API_KEY_HERE", "<path from web root>/xd_receiver.htm"); </script>

    For more details, see XFBML#Rendering_XFBML.

    All this script is doing is telling Facebook that you might want to render XFBML on your site, so it should load all necessary resources in order to do that.

  7. That's it! Try loading the test.html page you just created, then try connecting to Facebook. You've just implemented the first step of Facebook Connect!

    Here's the entire content of test.html:
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> <head></head> <body> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <fb:login-button></fb:login-button> <script type="text/javascript"> FB.init("YOUR_API_KEY_HERE", "xd_receiver.htm"); </script> </body> </html>

[edit] Intermediate: Using the Facebook Demo Applications

You can try out three sample applications that demonstrate how Facebook Connect works. Facebook provides the demo files -- one HTML file for each demo (demo1.htm, demo2.htm, demo3.htm), an index.htm file, and a cross-domain channel file (xd_receiver.htm) -- in our public repository.

The first demo simply establishes a Facebook session with your application and calls friends.get to demonstrate how to make API calls. Once the session is authenticated, the application can provide a callback. From there you can make a POST back to your site, make JavaScript calls, or anything else you want.

The second demo renders XFBML inline after the Facebook login session is authenticated.

The third demo renders XFBML in an iframe from Facebook. Some XFBML tags must be rendered in this manner for security reasons; generally anything requiring user input. For instance, request forms and invite forms both must be included in this manner.

To get started, you need to create a Facebook application and upload the demo files onto your server. Complete the following steps.

  1. Create an application with the Facebook Developer application, following the exact same steps in the previous "Basic" section, and copy the resulting API key.
  2. Upload the demo files onto your server. It's a good idea to keep them together in the same directory for simplicity's sake.
  3. In each demo file, paste in the API key you just generated where indicated by YOUR_API_KEY_HERE. In demo2.htm, you'll need to replace USER_ID_HERE with your user ID. If you don't know what your user ID is, go to your Facebook profile page, and look at the URL. Your user ID is the GET parameter called 'id'.
  4. That's all; try running the demos. Note that full Connect functionality is currently only available to people listed as developers of the application. This will be the case until the full user launch later this year. If you want to add additional developers to your application, you can do that by going back to the Application Settings page you visited while initially setting up an application, and adding new people in the "Developers" section.

[edit] Advanced: Trying Out a Live, Full Facebook Connect Experience

For a very in-depth look at how you can use Facebook Connect, you can see a sample site that we created called The Run Around, which incorporates all of the key features that we've introduced for developers. Go to http://www.somethingtoputhere.com/therunaround/. The site lets you register using Facebook, connect existing accounts and makes use of many aspects of both the original Facebook Platform as well as Connect, like Feed forms, authentication, API calls, and more.

The best way to learn how anything works is always to dive right in and take a look around, so we've made it easy for you to do exactly that with The Run Around. You can download the source code or pull it from our public SVN repository, for The Run Around.

Note: We've tested the Run Around to confirm that it works with the following browsers:

  • Firefox 2, 3
  • Internet Explorer 6, 7
  • Safari 3

Unofficially tested:

  • Google Chrome

It may not work with other browsers. It has been reported that it does not work with Opera 9.51 and 9.52.

[edit] Additional Information

Facebook Connect Tutorial1

Retrieved from "http://wiki.developers.facebook.com/index.php/Trying_Out_Facebook_Connect"
reference