The problem is that facebookConnectPlugin is only available in v0.5.1 of the plugin, and we were running v0.4.0 when building with PhoneGap build while having accidentally installed v0.5.1 locally.
The large confusion put straight:
- The latest version of the plugin is 0.5.1 and that is what we installed locally
- PhoneGap build only has up to 0.4.0
- The document links to the code/tree at 962eb0a1c07935ff813e28aa9eaa5581f2e10416 instead of the 0.4.0 tag - it was not clear that these were the same
- Between 0.4.0 and 0.5.1 the way to embed and use the plugin changed dramatically
Version 0.4.0:
You should include the following in your html to make it work on your device:
<script src="cdv-plugin-fb-connect.js"></script>
<script src="facebook-js-sdk.js"></script>
If you have a codebase that is both for PhoneGap and as a web app in the browser, be sure to only include the above when building for PhoneGap. To make it work when running the web page as an ordinary web page, follow the ordinary Facebook JS SDK instructions from Facebook. Run that code within if (!window.cordova) {}.
Example usage:
if (typeof CDV === 'undefined') {
alert('CDV variable does not exist. Check that you have included cdv-plugin-fb-connect.js correctly');
}
if (typeof FB === 'undefined') {
alert('FB variable does not exist. Check that you have included the Facebook JS SDK file.');
}
// Initialize the Facebook SDK
FB.init({
appId: 'yourappid',
nativeInterface: CDV.FB,
useCachedDialogs: false
});
FB.getLoginStatus(handleStatusChange);
Where handleStatusChange is a callback that receives the information about if the user is logged in or not.
To prompt a login, use FB.login() according to official docs. The examples in the 0.4.0 tree are very helpful: https://github.com/phonegap-build/FacebookConnect/tree/962eb0a1c07935ff813e28aa9eaa5581f2e10416/example
Version 0.5.1:
The plugin exposes window.facebookConnectPlugin when run on the device without you having to include any js manually. You are supposed to copy https://github.com/phonegap/phonegap-facebook-plugin/blob/master/www/js/facebookConnectPlugin.js into your project and include it in your html in order to get a similar API for when running the web page as an ordinary web page.
Example usage:
var fbLoginSuccess = function (userData) {
alert("UserInfo: " + JSON.stringify(userData));
}
facebookConnectPlugin.login(["basic_info"],
fbLoginSuccess,
function (error) { alert("" + error) }
);
PS Some debugging tips for PhoneGap builds:
- Use the console log in XCode Organizer for the device to see output to console.log() in your PhoneGap code (only outputs messages after deviceready)
- Use try/catch-blocks in the JavaScript in order to catch and see js errors in the code.
To install v0.4.0 locally:
cd ~/tmp/
wget https://github.com/phonegap/phonegap-facebook-plugin/archive/0.4.0.tar.gz --no-check-certificate
tar -xvf 0.4.0.tar.gz
cordova plugin add ~/tmp/phonegap-facebook-plugin-0.4.0/ --variable APP_ID="yourfbappid" --variable APP_NAME="fb app name"
