Connect/Demos

From Facebook Developer Wiki

Jump to: navigation, search

To demonstrate how Facebook Connect can work for you, this page offers some demos for you to try.

First we offer 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.

Next, we introduce 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.

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.

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.

Additional Information

Facebook Connect Tutorial1

reference