Integrate FB to Ionic Project

integrate-fb-to-ionic.md

Integrate FB to Ionic 2

1. Setup FB App on https://developers.facebook.com/
2. Create ionic project

# example
$ ionic start myApp tabs

3. Add cordova-plugin-facebook4

$ cordova plugin add cordova-plugin-facebook4 --variable APP_ID="<app_id>" --variable APP_NAME="<app_name>"

4. Link config.xml widget id to facebook developer
5. Define provider codes on your myApp
6. Run command ionic cordova run browser on your myApp directory to solve issue below. (Issue below will possibly occur when you just run your app using ionic serve)

Error logging into Facebook cordova_not_available

7. Try logging in (if you're not that lucky, you will meet this issue below)

Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.

Solution:

Add platform Website on your fb app (https://developers.facebook.com/apps/) Example: http://localhost:8000/ for local testing (ionic cordova run browser)

8. Try again, it should work. You will see example response if success.

{
  "authResponse": {
    "userID": "12345678912345",
    "accessToken": "kgkh3g42kh4g23kh4g2kh34g2kg4k2h4gkh3g4k2h4gk23h4gk2h34gk234gk2h34AndSoOn",
    "session_Key": true,
    "expiresIn": "5183738",
    "sig": "..."
  },
  "status": "connected"
}

Resources:

• https://ionicframework.com/docs/native/facebook/