Open Instagram App in Ionic 4

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

In this article, we will be learning how can we open Instagram 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 Instagram 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) { }

  openInstagram(name) {
    let app;

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

    this.appAvailability.check(app)
      .then(
        (yes: boolean) => {
          console.log(app + ' is available')
          // Success
          // App exists
          const browser: InAppBrowserObject = this.inAppBrowser.create('instagram://user?username=' + name, '_system');
        },
        (no: boolean) => {
          // Error
          // App does not exist
          // Open Web URL
          const browser: InAppBrowserObject = this.inAppBrowser.create('https://www.instagram.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)="openInstagram('apps.places')">
    <ion-icon name="logo-instagram" slot="start" color="warning"></ion-icon>
    Follow us on Instagram
  </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