Developing Facebook Applications locally

Hosts File [C:\Windows\System32\drivers\etc]
1. Edit the windows hosts file

2. Add an entry to map to localhost (127.0.0.1). This url name can be anything, it’s so that when you re-direct your browser to this url, it will forward directly to localhost. This matches the Facebook canvas URL schema that is required.

Example: "127.0.0.1 bigblunts.com" (without quotes)

3. Save and close the hosts file. If you do not have permissions to do this, open Notepad (or any other text editor) as an Administrator, and try again.

4. Open your web browser and go to the url you have just added, the browser should be displaying the same as if your went to http://localhost (This should usually be the IIS homepage).


Web Server Configuration
I personally use .NET and IIS, but you can really use which ever development tools and web servers you like. Just ensure that the application is accessible through the localhost.

So for example, if you access your application via. http://localhost/FacebookApp (Where 'FacebookApp' is the application configured within your webserver) Then using the settings in your hosts file, this will also work for you: http://bigblunts.com/FacebookApp. This will be the URL that you will be adding within your Facebook application settings.


Facebook Settings
1. I usually create a new Facebook application and append "staging" to the name. This saves me having to change canvas urls and other things to point to different environments each time I want to deploy something.


The Facebook settings are as follows [as of May 2011]:
Replace the vales with the name of your webserver path...
[Web Site] > [Site URL] > http://bigblunts.com/FacebookApp/
[Web Site] > [Site Domain] > bigblunts.com
[Facebook Integration] > [Canvas URL] > http://bigblunts.com/FacebookApp/
[Facebook Integration] > [Tab URL] > http://bigblunts.com/FacebookApp/ [When integrating with pages, it'll use this as the menu item/tab name]
[Advanced] > [Sandbox Mode] > Enable [Note: Must only use developer accounts to test with! or you will get errors]


Some of the settings may be irrelevant for your application requirements, but this is where to specify the URLs when these features are required.



!!!!UPDATE!!!!
You can also use the visual studio development server to get around this problem (or any other server, just use port 8080!)

Make sure you run the server on port "8080"... Facebook won't argue with this. (Note: If you use any other port, other than the standard web traffic ports [80/8080], then Facebook will throw a blank proxy dialog at you, with no kind of helpful error messages! The URL will contain something like "xd_proxy"...so make sure it's set at 8080!

The settings you can use are as follows...
[Web Site] > [Site URL] > http://localhost:8080/
[Web Site] > [Site Domain] > localhost
[Facebook Integration] > [Canvas URL] > http://localhost:8080/
[Facebook Integration] > [Tab URL] > http://localhost:8080/
[Advanced] > [Sandbox Mode] > Enable [Note: Must only use developer accounts to test with! or you will get errors]