This tutorial explains, how to use the facebook plugin in Ionic 2 Framework. And how to do a basic login example with facebook plugin.

 

Create the Ionic 2 project using

ionic start fbapp blank --v2

Then go to the project

cd fbapp

First, you have to install the facebook plugin. To install the facebook use the below command

ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"

The above command requires facebook app id. So you must create a facebook application and have to use the application id. To create a facebook application

1. Go to developer.facebook.com

2. Register yourself as a developer in facebook by clicking the Register button. It will ask your mobile number to validate you and your account password to authorize.

3. Then click the Add a new app to create a new facebook application

4. Once you created the application, it will show the app id. You can use this app id to install the facebook plugin. However, you have to add the platform to this application.

5. Open your Ionic project and you can find the project id in the widget tag of the config.xml file


 
6. In the facebook application, under settings, you can find the add platform option. Click and choose the either Android or iOS.

7.Then paste the Ionic project id in the Google Play Package Name for android or Bundle ID for iOS. Save the changes.

That's all. You are ready to install the facebook plugin using the app id.

ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"

Add inappbrowser, if your app is used on a phone without the Facebook app, authorization will happen in a browser.

cordova plugin add --save cordova-plugin-inappbrowser

Add the Cordova whitelist to make sure your app can talk to other sites.

cordova plugin add --save cordova-plugin-whitelist

After installing the plugins, Create a button with click event in the home.html file

<button ion-button (click)="login()">login with Facebook</button>

Then open your home.ts file, import the facebook class first using

import { Facebook } from 'ionic-native'; //for version 2.x native
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook'; //for version 3.x native

To login with facebook, the plugin uses syntax

login(permissions)

permissions is the parameter, which is the array of string (string[])

Get the list of permissions using

https://developers.facebook.com/docs/facebook-login/permissions

Inside the HomePage class create a login function using   

login() {


              if(this.platform.is('cordova')) {
            Facebook.login([ 'email']).then( (success) => {
                    alert(JSON.stringify(success));
                    this.id=JSON.stringify(success);

                },(err) => {
                    alert(JSON.stringify(err));
                    
                });
            
            } else {
                alert("Please run me on a device");
                
            }

        
    }


In the above code, we just requesting to access the email of facebook users, who logging-in using our application. And assigns the returned response from the facebook server to the id variable.

You can get the full source code using

https://github.com/bharathirasa/ionic-2-facebook-plugin