Open Twitter App in Ionic 4

How to open twitter app from Ionic 4 application

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

  openTwitter(name) {
    let app;

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

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

Demo