How to add Facebook SDK into Meteor+Cordova

Recently I got the Facebook SDK working with my Meteor+Cordova app, and I wanted to share a “How To” so others looking to do this have all the info in one place.

TL;DR ver: Make sure to downgrade cordova-plugin-facebook to 1.7.4, and generate key hashes for Android using keytool.

You need the FB SDK obviously to use it as a login mechanism (among other features), but you’ll also need to add it if you want something as simple as knowing how many of your paid FB ads resulted in users downloading and opening your app.

Part One: Set up Facebook

  1. Set up a Facebook business account (if you plan on ad buying).
  2. Sign up for a Facebook developer account - https://developers.facebook.com/
    a. Create a new App
    b. My apps - Add a new app
    c. Add in an email. Create.
    d. Once FB creates a new app, copy down the app id. E.g.: 322350000000000
  3. Configure the Facebook App page > Settings (Basic)
    a. Set iOS “Bundle ID” (found in Xcode) and “iOS iPhone Store ID” (found in iTunes Connect)
    b. Android - set “Google Play Package Name” (found in Google Play)
    c. You will come back to “Key Hashes” later
  4. Configure Facebook App page > Settings (Advanced)
    a. Enter the ID of your advertising account # from your business account in "Authorized Ad Account IDs"
    b. Set app to live
  5. In “App Review” toggle button to make “[your app]” public

Part Two: Install Facebook SDK
There are several plugins to choose from, I went with cordova-plugin-facebook4. NOTE: The current version (1.9.1) is incompatible with Meteor because of this issue. You must downgrade to 1.7.4 (or follow one of the other fixes listed in GitHub)

  1. In your project, meteor add cordova:cordova-plugin-facebook4@1.7.4
  2. In your router (for me, React Router, but wherever your startup block exists), in Meteor.startup(), add the command to activate the app:
    if(Meteor.isCordova && facebookConnectPlugin) { 
      facebookConnectPlugin.activateApp(function(success) 
       {console.log(success)},function(error) { console.log(error)} );
    }

Obviously that’s just a minimalist version, your success event is probably different.

  1. Next, add the config variables to mobile-config.js in the root of your project:
    App.configurePlugin('cordova-plugin-facebook4', {
       APP_ID: '322350000000000',
       APP_NAME: 'MyAppName'
     });
  1. This is enough to get iOS version working, but Android requires an extra step.

Part Three: Android Key Hashes
As the Meteor docs outline, you need to sign your Android apk with an RSA key. Great.

Your Android tools should come with a default debug key as well. You’ll want to generate hash codes from both your custom-generated key and the default debug key.

  1. Find your debug and production keystores.
    a. On a Windows machine, the Android default key is typically located at %HOMEPATH%.android\debug.keystore.
    b. And for me, my custom generated key was in %HOMEPATH%.keystore. But just search your machine for *.keystore files.
  2. Install OpenSSL.
    a. For Windows, try http://gnuwin32.sourceforge.net/packages/openssl.htm
    b. For Windows, open CMD.exe and add an environment variable for the location of your OpenSSL config file:
    c. set OPENSSL_CONF=C:\Program Files (x86)\GnuWin32\share\openssl.cnf
  3. Generate a hash code of your debug key. From CMD on Windows:
    a. keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64
  4. Generate a hash code of your production key, replacing YOUR_ALIAS and KEYSTORE_LOCATION with your values.
    a. keytool -exportcert -alias YOUR_ALIAS -keystore KEYSTORE_LOCATION | openssl sha1 -binary | openssl base64
  5. Also consider routing that output to a file using > myfile.txt, then copy and paste both 28-character values into your Facebook app Settings page.

Then make sure you release both apps again.

This information is available piecemeal in other places but it’s just helpful to have it all in one location. Hope this saves other Meteor devs some time.

2 Likes