Open Facebook App in Ionic 4

How to open Facebook app from Ionic 4 application and add follow option in your Ionic 4 application.

In this article, we will be learning how can we open Facebook app in Ionic 4 application. So let’s get started,

First, we need to install the necessary Ionic native plugin. We need two plugins to open external Facebook app one is – In App Browser and another one is – App Availability.

In App Browser

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

App Availability

ionic cordova plugin add cordova-plugin-appavailability
npm install @ionic-native/app-availability

After installing both the Ionic native plugin we should enlist the InAppBrowser and AppAvailability provider with the principle application module.

After inject two providers main app module are look like this.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AppAvailability } from '@ionic-native/app-availability/ngx';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    AppAvailability,
    InAppBrowser,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import this two modules in home.ts file and inject it in the constructor component. Here is the full implementation of home.ts file.

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { AppAvailability } from '@ionic-native/app-availability/ngx';
import { InAppBrowser, InAppBrowserObject } from '@ionic-native/in-app-browser/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    public platform: Platform,
    private appAvailability: AppAvailability,
    private inAppBrowser: InAppBrowser) { }

  openFacebook(name, url) {
    let app;

    if (this.platform.is('ios')) {
      app = 'fb://';
    } else if (this.platform.is('android')) {
      app = 'com.facebook.katana';
    } else {
      const browser: InAppBrowserObject = this.inAppBrowser.create('https://www.facebook.com/' + name);
      return;
    }

    this.appAvailability.check(app)
      .then(
        (yes: boolean) => {
          console.log(app + ' is available')
          // Success
          // App exists
          const browser: InAppBrowserObject = this.inAppBrowser.create('fb://facewebmodal/f?href=' + url, '_system');
        },
        (no: boolean) => {
          // Error
          // App does not exist
          // Open Web URL
          const browser: InAppBrowserObject = this.inAppBrowser.create('https://www.facebook.com/' + name, '_system');
        }
      );
  }
}

And add some buttons in home.html file.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item lines="full" (click)="openFacebook('ionicbucket', 'https://www.facebook.com/ionicbucket')">
    <ion-icon name="logo-facebook" slot="start" color="secondary"></ion-icon>
    Follow us on Facebook
  </ion-item>
</ion-content>

More Plugin Details –

In App Browser: https://ionicframework.com/docs/native/in-app-browser#installation
and App Availability: https://ionicframework.com/docs/native/app-availability