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!
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.
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.
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
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.
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:
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!