——————————————————————————-
Regardless of what programming language you use, setting up Facebook’s developer settings can be extremely confusing. Some fields you need, some fields you don’t and depending on what your doing with your application, some fields can block your app from accomplishing the end result. The absolute very first step is to download the developer application. You must download this application so you can create applications with Facebook. Once you have the developer application downloaded, click ‘Setup New Application’. This will bring up a series of form fields that you may or may not need. Below I cover the form fields you need to pay attention to and will most likely use. Required
- Name your application (for your eyes only)
Base Options
- Set a valid developer contact and support e-mail
- Callback URL: a callback url is the path to http://www.yourserver.com/yourapp/
- Canvas Page URL: this is the path users see and Facebook uses to find your app. http://apps.facebook.com/myapp. You have the option to click ‘Use FBML’ or Use ‘iframe’. Both can now access FBML, however, using FBML creates a more robust and cleaner application. Click ‘Use FBML’ and know that you can still use iframes within your application via fb:iframe.
- Profile Tab URL: this is the path to your tab content if a user has added your tab. i.e. http://apps.facebook.com/myapp/mytab. You cannot use fb:iframe with this option.
- Profile Tab Name: is simply the name of the tab that users will see
- Application Type: make sure ‘Website’ is clicked as we will be making a website application
- Mobile Integration: by checking this option, Facebook will add some SMS functionality to your application. If you don’t plan on going mobile, don’t check it as it will add function you don’t need.
- Can your application be added on Facebook? click yes or the whole purpose of making an app is lost.
- Default IFrame Canvas Size Option: smart size is simply a way for your application to adjust to Facebook’s default window. If you select ’smart size’ chances are you will have scrollbars and your window will be ugly. By clicking resizable, you open yourself to a slew of functions that can make your frame adjust with your content. click here for more on that.
Installation Options
- Who can add your application to their Facebook account? select ‘users’ and all pages to allow your entire app to be accessible.
- Post-Add URL: this is the url that is used to redirect the user once he/she clicks ‘Allow’ for your app. ie. http://apps.facebook.com/myapp/
- Application Description: this is what all ‘potential’ users will see before they go to your application. look at this as your teaser and a way for you to get people interested in your app.
- Post-Remove URL: you can set this to a page that asks why the user removed your app for example. ie. http://apps.facebook.com/myapp/remove.cfm. you cannot use iframes with this setting.
- Default Profile Box Column: set to either ‘wide’ or ‘narrow’. i would choose ‘narrow’ as this will default the width to the main profile of the user. The narrow box gets more impressions if the user keeps your box on their profile.
- Developer Mode: this is an important field if your app is still in development. you don’t want all your friend’s to see what your making, testing, etc. developer mode will lock down normal functions that make Facebook so viral.
Integration Points
- Side Nav URL: this is the url that attaches itself to the ‘Go to Application’ button on your application.php page. ie. http://apps.facebook.com/myapp/
- Canvas Width: check ‘Use full canvas width’ to make your app extend across the page
*you will notice I left out some fields. these fields are not crucial to developing your app but it doesn’t hurt to know what they do
. this is a simple setup that will give you FULL access to creating dynamic ‘ColdFusion‘ Facebook applications!
First: Thanks so much for posting that video — I recently bought two books about Facebook apps, and your video was MUCH better than the setup section in either of them. And yours was up-to-date. And yours was free!
(BTW: What software did you use to create that video?)