Facebook apps are a part of society now. From fancy flash games to simple polls, almost everyone uses them. There will come a time in your development career where you will have to build something that interacts with Facebook. I'm on my second one this week, and a third one starting next week.
Facebook has tried to foster a developer community through SDKs and development wikis, but much of this information is spread out. Over the next few posts, I'll take a look at building a basic Facebook app from end-to-end in an attempt to gather many of the answers I've found over the last week.
First we need to tell Facebook about our application...
Getting Your App In Facebook
The first thing we need to do is register our application with Facebook. Facebook has created an app to register and submit your application for their platform, so before we do anything we'll need to set up the Developer App.
Log into your Facebook account and in the Search box above your feed type in 'Developer'. An entry under Apps should appear called 'Developer App', so click on that. Enter your password, and allow the application. You'll wind up with nice clean slate with no applications. Click on the '+ Create New App' button.
Give your application a name, agree to the Terms of Service, and enter the captcha. Congratulations, your application is now registered with Facebook!
Configuring Your Application
Now that we have an application registered, we need to start setting it up. I'm going to eventually build an iFrame application that will take some basic info, store it, and then post to the user's wall.
Fill in the Basic Information page for your app. It's all self explanatory so I'm going to assume you can figure it out. Now look over to the left. The navigation menu here is where you can further set up your application. We're not interested in the Web or Mobile sections right now, but lets take a look at the 'On Facebook' section. Go ahead and click on it.
By default, Facebook will set you up with a Canvas application. With these, Facebook will wrap your application inside of the Facebook chrome. What is going on here is that Facebook will set your application up in an iFrame. There's nothing terribly fancy about this approach and it makes it very easy to work with.
Under the Canvas section, type in the location for the application in the 'Canvas Page' area. This is the Facebook URL people will use to access your application, and it must be unique across Facebook's service. We'll enter in 'myradfacebookapp' as the name, which will give us a URL of http://apps.facebook.com/myradfacebookapp.
'Canvas URL' is the location your app sits at on the world-wide-web. If your domain name is 'myraddomain.com' and your app sits in a subdirectory of 'myfacebookapp', then you would enter 'http://www.myraddomain.com/facebookapp/' as the URL.
By October 1st, 2011, every application must be behind HTTPS so fill in the 'Secure Canvas URL' if you have it already. If you don't, spend the money on an SSL certificate. Namecheap.com has inexpensive certificates all the way up to EV certificates. If it's after October 1st, 2011, you're required to fill this in.
While we're here, select 'Disabled' under the Social Discovery section. That way you can keep your test app secret. We'll worry about the rest of this page later.
Congrats, You've Made a Facebook App!
While it's not much, this is technically a full Facebook application. If you were to head to http://apps.facebook.com/myradfacebookapp the page you configured in the Canvas URL section would appear inside Facebook. It just won't do much since we haven't done any code to interact with Facebook, and we've completely ignored the entire Application ID and Application Secret at the top of the page. Those will come in handy in the next phase where we actually do some coding!