Here’s what I’ve done to get this all working…
First create a FB app just for testing if you haven’t already.
Then on the Facebook dev page do this:
-
In IOS section, fill out only the Bundle ID. Make it the same as the id value you have in your config.xml file under <widget id="com.whatever.you.have.here"> (Sorry, I haven’t tried Android yet)
-
For desktop testing, add a Website section. Enter your development url (http://localhost.com:8000/) or whatever it is. I also entered “localhost.com” in App Domains above, although I’m not sure if this is really needed.
At this point, FB apis to sign in/out and make graph queries should hopefully work on the phone and in the emulator.
If you also want to test on your desktop browser, there’s one more trick that took me quite some time to figure out. The version of facebook-js-sdk.js that comes with the cordova plugin is old or custom or something.
It seems to work natively and play nice with the cdv-plugin-fb-connect.js plugin file, but it won’t work correctly on your desktop browser. When using it, I consistently got an error back from FB about an invalid url that wasn’t authorized in my app settings (even though it was).
To solve this for desktop testing, I had to use the latest fb js file. I haven’t yet managed to get this working with “one codebase”, but by slightly altering my index.html file depending on whether I’m deploying to the device or testing in my browser, I managed to get both scenarios working well.
The relevant section of index.html looks like this:
<script src="lib/js/cdv-plugin-fb-connect.js"></script>
<!-- For native
<script src="lib/js/facebook-js-sdk.js"></script>
-->
<!-- For webapp
-->
<script src="http://connect.facebook.net/en_US/all.js"></script>
Comment out whichever one you aren’t using, depending on your target environment.
Last step, is to run different FB.init() code depending on the environment. Like this:
ionic.Platform.ready(function() {
var appID = "[ your app id here ]";
var device = ionic.Platform.device();
try {
if(device && device.model) {
console.log("doing Native fb init");
FB.init({ appId: appID, nativeInterface: CDV.FB, useCachedDialogs: false, status: true });
} else {
console.log("doing non-native fb init");
FB.init({ appId: appID, status: true});
}
} catch (e) {
console.log("fb init error"+e);
}
});
I’m still curious if there’s a nicer way to do this without having to have different includes for different environments. If anyone knows of a way, please share. Thanks.