Facebook used to let a developer specify the Callback URL to be localhost (e.g., http://localhost:56570/MyApp/) for an IFrame-canvas app such that as you develop your app, you can just test it on your local machine before pushing it out to your hoster. That's no longer the case: you cannot specify a callback URL containing "localhost" anymore. So how do you keep using localhost for debugging purposes during development?
Here's what I did:
1. You need to have another Facebook app, say "My App Dev", registered for development purpose (you'll need one anyways once you've released your app and need to develop incremental features).
2. In this app have settings that parallel the production Facebook app except the "Post-Authorize Redirect URL". Have the "Post-Authorize Redirect URL" point to a small HTML file (say "TestPage.htm") on your hoster that redirects back to localhost :). Create TestPage.htm like the following:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head> <body>
<script type="text/javascript">
var newWindowLocation = "http://localhost:56570/ThePageIWantPostAuthorize.aspx" + window.location.search; // get the query string that FB tags on, including "?"
window.location = newWindowLocation; // redirect to localhost
</script>
</body> </html>
So your "Post-Authorize Redirect URL" would be http://apps.facebook.com/myapp_dev/TestPage.htm", for example.
3. Make sure in your code use the right Facebook APIKey and Secret for the right release, since now that we have 2 "Facebook apps" for the same app. With .NET for example, you can have the following in web.config:
<add key="APIKey" value ="My App's key"/> <add key="Secret" value ="My App's secret"/>
<add key="APIKey.debug" value ="My App Dev's key"/> <add key="Secret.debug" value ="My App Dev's secret"/>
and use compile-time macro to determine which set of values to use in your code:
#if(DEBUG)
var apiKey = WebConfigurationManager.AppSettings["APIKey.debug"]; var secret = WebConfigurationManager.AppSettings["Secret.debug"];
#else
var apiKey = WebConfigurationManager.AppSettings["APIKey"];
var secret = WebConfigurationManager.AppSettings["Secret"];
#endif
The same compile-time macro can help you pick the right set of other properties like db connection strings, since you'll probably want to use a local database instead of the one on your hoster during development.
With the above trick, with just one additional HTML file (TestPage.htm) uploaded to your hoster and an additional Facebook app registration, you are back to your happy self debugging on your local machine :).
P.S. Obviously this trick won't work for FBML-based canvas.
Subscribe