Cordova/Phonegap: Can't get Facebook Phonegap plugin to work

Question

I tried creating a Cordova/Phonegap app and adding the Facebook plugin, but alert(typeof facebookConnectPlugin); shows undefined:

sudo npm install -g cordova
cordova create hello com.example.hello HelloWorld
cd hello
cordova platform add ios
cordova -d plugin add https://github.com/phonegap/phonegap-facebook-plugin --variable APP_ID="1415347585409217" --variable APP_NAME="Test"
vi www/index.html  # Add: alert(typeof facebookConnectPlugin); to the last <script>
cordova emulate ios

Expected: The emulator shows "Object" in the alert dialog.

Actual: The emulator shows "undefined" in the alert dialog.

Anyone know what I am doing wrong?

---

UPDATE: Thanks to Devgeeks for his answer below.

Here are a couple of other things I needed to do to get it working:

1) Install the newer "develop" branch of the plugin:

cordova -d plugin add "https://github.com/phonegap/phonegap-facebook-plugin#develop" --variable APP_ID="1415347585409217" --variable APP_NAME="Test"

2) Add the following below the opening tag:

<!-- fb-root is needed by the FB API. -->
<div id="fb-root"></div>

3) If you want FB login to work in the browser (for testing), copy www/js/facebookConnectPlugin.js into your app. Then include it before the closing tag:

<script src="facebookConnectPlugin.js"></script>

Then add the following to your section:

<script>
  window.fbAsyncInit = function () {
      if (!window.cordova) {
        // Initialize - only executed when testing in the browser.
        facebookConnectPlugin.browserInit(308939305080);
      }
  }
</script>

If you get "Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.", edit facebookConnectPlugin.js and change sdk.js to sdk/debug.js .

4) If you get the following while building the app for Android:

sdk.dir is missing. Make sure to generate local.properties using 'android update project' or to inject it through an env var

try running the following (from Issue 432):

cp platforms/android/local.properties platforms/android/FacebookLib

Answer 1

Add: alert(typeof facebookConnectPlugin); to the last <script>

That is behaving as expected, believe it or not.

Plugins are not available till the deviceready event has fired: http://docs.phonegap.com/en/3.5.0/cordova_events_events.md.html#deviceready

Try checking for the facebookConnectPlugin in the onDeviceReady of the generated www/js/index.js instead of an immediately fired tag?

Answer 2

Hello guys i have found something new for Facebook integration in phone gap application, Without any Facebook plugins you can use Facebook functionality,for that use phonegap.facebook.inappbrowser.js using this js you can easily access all Facebook functionality for more information visit this URL : Facebook Integration Step without any plugins