Implement Facebook-connenct on a Cordova iOS App

tl;dr

  • The post lists the necessary steps to setup Facebook-connect for iOS app using Cordova
  • Warning: Everything works until user tries to logout (Still trying to figure out why)
  • This post is basically a compilation of links I went through

requirements

  • Cordova 3.3.1
  • AngularJs
  • Assuming you've already reached to this point:

Here come the steps

1 Setup yout App at developers.facebook.com
* make sure to have Bundle ID, and Single Sign On turned on 1

2 Type this command:

cordova plugin add https://github.com/phonegap/phonegap-facebook-plugin --variable APP_ID=your_facebook_app_id --variable APP_NAME=your_facebook_app_name 2 And before you blink, the magic should have already happened.

  • Now check under Info tab in Xcode, the FacebookAppID should be the same as what you wanted.

3 Make sure in your index.html you src the two files.

<script src="cdv-plugin-fb-connect.js"></script> <script src="facebook-js-sdk.js"></script>

  • They should be located where cordova.js is.

4 Call FB.init() on device ready.

window.document.addEventListener('deviceready', function() { try { console.log('Device is ready! Initializing FB app Id your_facebook_app_id'); FB.init({ appId: "your_facebook_app_id", nativeInterface: CDV.FB, useCachedDialogs: false, status : true, // check the login status upon init? cookie : true, // set sessions cookies to allow your server to access the session? xfbml : true }); document.getElementById('data').innerHTML = ""; } catch (e) { console.log(e); } }, false);

  • Since angularJs calls .run() right away, I leave them inside .run()

5 Time to implement your own integration. Example here

1. Using the official Facebook plugin |

2. FaceBook Login Logout using cordova 3.3.0 cli. |

One of the most commonly asked question. If you ever run into this problem, that means you did not specify nativeInterface: CDV.FB on initializing.
Phonegap Facebook connect plugin settings

For android:
FaceBook Login Logout using cordova 3.3.0 cli.

A angularJs service that wraps on top of the library, so that you don't have to do step 4. But it is for web app.
angular-easyfb

Official github page:
phonegap-facebook-plugin

AngularJs implementation example
Facebook authentication in your AngularJS web app

FB.logout() problem:
Facebook JS SDK FB.logout() doesn't terminate user session

ignore these links to save you some time

Facebook Connect + jQuery Mobile + Phonegap Build (solved by step 2)

Cordova Facebook Plugin(just outdated, and noone uses it on newer version of Cordova)

comments powered by Disqus