Welcome

how would you rate The Holy Qura'an - Arabic ver?

Wednesday, February 19, 2014

Step by step on how to add Facebook plugin on Phonegap

I have posted an answer on stackoverflow on how to do it and here is more:

Using CLI add the APP_ID and APP_NAME variables to your command. Something like this:

C:\myProject>cordova plugin add https://github.com/phonegap/phonegap-facebook-plugin --variable APP_ID=your_facebook_app_id --variable APP_NAME=your_facebook_app_name
I got it installed this way but not sure if the app is functional or not. Something to test.
I had an issue with phonegap build giving me the error One of your plugins requires a parameter: APP_ID, APP_NAME. That was because I didn't add those variables to the config.xml file.
This solved it


<gap:plugin name="com.phonegap.plugins.facebookconnect">
  <param name="APP_ID" value="your_facebook_app_id" />
  <param name="APP_NAME" value="your_facebook_app_name" />
</gap:plugin>

Please remember to modify the plugin.xml file under root/plugins/com.phonegap.plugins.facebookconnect/plugin.xml
<preference name="APP_ID" />
<preference name="APP_NAME" />

Also, I had issue with facebook failing to initial and it was because my config.xml had this
<widget id="com.app.xxx" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://cordova.apache.org/ns/1.0">

and solved it by changing it to this:
<widget id="com.app.xxx" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">

This should get the app to work.

After you start using it you will notice when you do login facebook will through at you errors like "invalid android_key parameter". This means that you haven't register the app platform on Facebook.

Go to your app facebook page: https://developers.facebook.com/x/apps/app_id/settings/
Under Settings -> Basic -> click on add platform

Now you need to sign your app using command line on windows, for this to work you will need to have java keytool installed and i'm not going through that here, PLEASE KEEP IN MIND TO AVOID ADDING SPACES, SPECIAL CHARACTERS AND ALL LOWER CASE [I had issues with phonegap not recognizing my alias because of that].

C:\mykeystorebox>keytool -genkey -v -keystore mynewkey.keystore -alias mykeyalias -keyalg rsa -keysize 2048 -validity 10000
Enter keystore password:
Re-enter new password:
What is your first and last name?
[Unknown]: sean
What is the name of your organizational unit?
[Unknown]:
What is the name of your organization?
[Unknown]: testcompany
What is the name of your City or Locality?
[Unknown]: london
What is the name of your State or Province?
[Unknown]: on
What is the two-letter country code for this unit?
[Unknown]: ca
Is CN=sean, OU=Unknown, O=testcompany, L=london, ST=on, C=ca correct?
[no]: yes

Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA) with a validity of 10,000 days
for: CN=sean, OU=Unknown, O=testcompany, L=london, ST=on, C=ca
Enter key password for
(RETURN if same as keystore password):
[Storing mynewkey.keystore]

C:\mykeystorebox>keytool -exportcert -alias mykeyalias -keystore mynewkey.keystore | openssl sha1 -binary | openssl base64
Enter keystore password: *************
Abikekw4k3lfmK23kvJl32Ljflw301=

Now go back to facebook page and take Abikekw4k3lfmK23kvJl32Ljflw301= and put it under Key Hashes. You will need to add your app class in there too.

Save that.

Now go to Phonegap and upload your keystore as a key for your android and sign your APK with it. It will ask for a title and could be anything, alias and in this case should be mykeyalias.