Implementing Facebook Connect (Part 2) - Establishing a Connection

Two weeks ago I took a look at Facebook Connect (FC) summarizing what it is and why developers would want to integrate it with their own applications in part 1 of this series. Originally I had thought this would be a two post topic but as I have learned more about FC I think it’s going to take a few posts to get up and running successfully. So, in this post we’re going to get all the pre-requisites out of the way and establish a connection with Facebook from our own application. We will then look at how we can do things with that connection in subsequent posts. Ready or not… let’s get started!

Getting Started

In order to use FC with your own application you first need to set your application up within Facebook so you can get your hands on an API key. As is the case when working with any API your API key will be used throughout your FC integration code for authentication purposes.

Step 1 - Add Facebook Developers to Your Applications

The first thing you need to do in order to set your application up within Facebook is add the Facebook Developers Application to your approved applications list. To do this, visit http://www.facebook.com/developers/. Once you have added the developers application to your authorized applications list you will have access to all the developer resources that Facebook has to offer as well as a discussion board for questions and issues.

Step 2 - Setup Your Application

Now that you have added the developers application to your authorized applications list you can now proceed with setting your application up.

facebook-developers

Navigate back to the Facebook Developers application by visiting http://www.facebook.com/developers/ and click the Set Up New Application button at the top right of the window.

Now comes the fun part… setting up an application in Facebook involves a mega-form full of options and other required pieces of information. The form is fairly self-explanitory so I won’t take the time to go through it all with you. The only thing I will point out is the Connect tab. This section of the form concerns all the FC settings as they relate to your application. The only thing you need to concern yourself with at this point is the Base Domain field. “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.” Enter all the necessary information about your application and click Save Changes.

facebook-edit-sign-up-sheet

<

h2 style=”text-align: left;”>Establishing a Connection Now that we have our API keys we can put the files in place that will help us establish a connection between our application and Facebook. I am having problems displaying code in my blog posts so for this post I’m just going to refer you to the FC getting started guide for the actual code to use. If any of you have any recommendations for tools to use to display code in Wordpress blog posts I would love to hear them.

Step 1 - First the CCC File

The first thing we want to do is create something called the cross-domain channel communication (CCC) file. That’s an awfully big name for such a little file. Basically this file provides the Facebook JavaScript Client Library with what it needs in order to function properly.

Copy the code from the FC getting started guide located under #2 and paste it into a new file named xd_receiver.htm. This file needs to be placed in a directory that’s relative to the callback URL that you entered when setting up your application in the mega-form above. For those of you following along using CodeIgniter, you should be able to get away with placing this file in the root of your CI application. That’s where everything is really referenced from anyway regardless of the search engine friendly URLs.

Step 2 - Now the Test File

Now that we have the CCC file we can begin writing the file we are going to use to establish our connection. Since we are only testing things in this post we will just make a simple file that displays the Facebook log-in button and adds the application to the users approved applications list. Go ahead and create a new file named test.htm and then follow along with the getting started guide starting with #3 for the necessary markup. Again, for those CI users you can place this markup in a view file and load it using whatever template your program is using.

Before running the script you want to be sure to replace YOUR_API_KEY_HERE with your API key and <path from web root> with the appropriate path to the CCC file. Once you have done that you can upload the two files we’ve created and test.

That’s it!

When viewing your test file in a browser all you should see is a Connect button displayed. When you click the button you should see a pop-up window prompting you to either login to your Facebook account or give your application permission to access your profile like in the screen shot below:

fctesting

Once you either login or give your application permission you can now go back to your Facebook account and look at the list of your authorized applications and you should now see your own application in the list.

<

h2 style=”text-align: left;”>What’s next?

We didn’t get into much of the real nitty gritty in this post but we did lay the ground work for what is to come. In the next post I will begin looking at how we can access information about our users from Facebook and how we can send data back. Stay tuned!

Reblog this post [with Zemanta]