In this blog post, lets learn how to integrate Apache Cordova’s official Facebook plugin in to a project.
Create Facebook app and add key hash:
First you need to create Facebook app at Facebook Developer, from which you will get an APP_ID.
Make sure that your app is available for public in status tab.
Add Android platform in Facebook app.
Now add key hash generated from your system using following command.
[source]
keytool -exportcert -alias androiddebugkey -keystore Keystore-path | openssl sha1 -binary | openssl base64
[/source]
It will generate the keystore file at your home directory, for me it is at home/praveen/.android/debug.keystore (check inside .android folder).
It will ask for keystore password, type “android”. Key hash will be generated, add it to your facebook app. Key hash of the system from which app is going to build must be added to facebook app otherwise it will show error. It is good to add key hash of all developer in project.
Install plugin:
Run following commands in your cordova project root directory.
[source]
cordova plugin add https://github.com/phonegap/phonegap-facebook-plugin.git –variable APP_ID=”123456789″ –variable APP_NAME="myApplication"
android update project –subprojects –path platforms/android –target android-19 –library
android update project –subprojects –path –target android-19 –library FacebookLib
cd platforms/android/
ant clean
cd FacebookLib
ant clean
ant release
[/source]
You can create a shell script to run all command at once. 😉
Plugin size is around 14MB, it is better to download, extract and use your local directory instead git repository in case of using it in multiple projects. Example:
[source]
cordova plugin add /home/praveen/phonegap-facebook-plugin-master –variable APP_ID=”123456789″ –variable APP_NAME=”myApplication”
[/source]
Once you add facebook plugin successfully, you can use facebookConnectPlugin object in your javascript.
Now lets make use of this plugin to fetch username and email.
Simple application to fetch username, email:
On success of facebook login, you will receive a response containing userID, auth_token, from which we can fetch user info using graph api.
Here is a simple example to display user name,email on deviceready event. Try it by pasting below code in your index.html or such html file.
[source]
document.addEventListener(deviceready, onDeviceReady, false);
var onDeviceReady = function() {
facebookConnectPlugin.login([public_profile], fbLoginSuccess, fbLoginError);
}
var fbLoginSuccess = function (userData) {
facebookConnectPlugin.api(userData.authResponse.userID+/?fields=id,name,email, [public_profile], function(data) {
alert(“Name: “+data.name+”, email: “+data.email);
//you may store name, id, email in sessionstorage or process it here.
}, function(error) {
alert(error);
});
};
var fbLoginError = function (error) {
alert(error);
};
[/source]
You can do more with cordova’s facebook connect plugin like get access token, birthday, status, post on wall.
Some useful links on this topic :
https://github.com/PraveenVignesh/simple-facebook-connect-cordova
https://github.com/Wizcorp/phonegap-facebook-plugin
https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/android/README.md
https://developers.facebook.com/docs/graph-api/using-graph-api/v2.1
Hope you enjoyed my blog post and let me know via comments if you have any questions on this topic.
