Developing Facebook Connect Javascript API on localhost

Question

I'm trying to write some javascript functions to integrate with the Facebook stream. However they only seem to work if you are developing them directly on the live server so that Facebook can access the xd_receiver.htm file that they ask me to place at www.mydomain.com/xd_receiver.htm. However you all can probably agree that it's really important not to develop on the live servers.

Here's what I've tried so far:

1. Placing xd_receiver.htm on the live server and running my scripts on my dev server hoping that the API Key would tell the Facebook server to look for xd_receiver.htm on my live server...no luck
2. Signing up for two API Keys with Facebook: a dev key pointing to 127.0.0.1 and a live one pointing to my live site. The theory here was that if xd_receiver.htm was only needed locally then it would find it via 127.0.0.1...no luck

Has anyone figured out a way to do this? They can't expect us to develop our Facebook Apps purely live without a dev sandbox.

Some background info for what it's worth: Using ASP.NET with VB but hoping to use purely Javascript.

Answer 1

It's definitely possible to use local xd_receiver.htm files. I'm a Facebook app developer by trade, and I have dozens of them set up.

You're closest to the correct answer with your #2 above. The way to do it is create two versions of your app. If I was making "MyApp", I might have two Canvas Page urls of "myapp" and "myapp-dev", and corresponding Canvas Callback URLs of "www.myapp.com" and "192.168.1.1". Each one is a separate Facebook app, with their own API key, etc.

apps.facebook.com/myapp would go to my live server, and apps.facebook.com/myapp-dev would go to my local development machine. You have to make sure Facebook can get to your development machine of course.

However, things should work just fine from there. You don't even need different versions of the xd_receiver.htm file, as the file contents are always the same for every app. AS long as your FB.XdComm.Server.init("/xd_receiver.htm"); line points to the right file, it should work.

I manage API keys and paths and such in a configuration file, and have one configuration file per application, whether it be a dev or production app. That makes it easy to output correct keys and paths on the app pages.

You can keep your development app in sandbox mode and do all the work on your local machine.

Answer 2

Hi Zombat,

How do you make sure that FB server sees your local dev machine? I have a Ubuntu laptop and run/develop multiple projects using apache vhosts. I keep moving from network to network, i.e. from a corporate network to a home network. all Wifi. Can you share the knowledge how you do it?