Facebook Connect with PhoneGap Build - ReferenceError: Can't find variable: facebookConnectPlugin

Question

Here's a self-answered Q&A that hopefully clears out some confusion. After following the official readme for the Facebook Connect plugin v0.4.0 found at https://github.com/phonegap-build/FacebookConnect/blob/962eb0a1c07935ff813e28aa9eaa5581f2e10416/README.md, it did not work immediately, so we installed the plugin locally.

Since the above is a fork specifically for PhoneGap Build, we installed the plugin using instructions from the official plugin repo at https://github.com/phonegap/phonegap-facebook-plugin

There is so much misinformation and advice not stating version of PhoneGap, the plugin, if PhoneGap build is used etc etc that it is hard to understand how to actually get it to work.

Some guides / tips we followed: PhoneGap add Facebook Connect plugin http://pjsdev.blogspot.com/2013/03/phonegap-build-facebook-connect-part-2.html http://informatico.hol.es/blog/instalar-phonegap-facebook-plugin/ http://excellencemagentoblog.com/cordova-3-5-0-facebook-login-0-5-1-using-command-line-android

Despite getting it to kind of work (the console log in XCode Organizer for the device stated Cordova Facebook Connect plugin initialized successfully.), we ran into the problem of ReferenceError: Can't find variable: facebookConnectPlugin whenever trying to run the PhoneGap build version.

Answer 1

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"