Developing Facebook Connect Javascript API on localhost [closed]

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.

Mesics

I'm trying to do nearly the same thing, just using ASP MVC. Hope it turned out well for you! It's driving me pretty crazy so far :P – Quick

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.

Parapodium

Answer 2

The simplest way is to configure local DNS in such a way that for your production callback url localhost address will be returned. In windows you can easily achieve it with following entry in \windows\system32\drivers\etc\hosts "127.0.0.1 your_production_xd_receiver_callback_url". Of course you need to run your server on port 80. In windows its simple task since there is no security concenrs :) in UNIX system you need to configure it since it is port belowed 1024. This solution is tested and works for me.

Gregoire