Open facebook link in app from Ionic 4 not working in iOS (works in Android)

Question

The code attached is working fine for facebook and instagram on Android and also instagram on iOS but while it opens the facebook app on iOS it just opens to my feed not the expected link location.

Any ideas why this is not working? Do I need to change the below?

I am generating and opening this link using the code below:

fb://facewebmodal/f?href=https://www.facebook.com/AtlasQueenstown

Edit: I have also tried:

fb://profile/AtlasQueenstown
fb://page/AtlasQueenstown

Template:

<p *ngIf="partner.deal.link" class="deal-link-text" 
    (click)="openAppUrl('facebook', 'AtlasQueenstown')">CHECK OUT {{partner.name}}</p>

TS:

openAppUrl(app: string, name: string) {
    switch (app) {
        case 'facebook':
            this.launchApp('fb://', 'com.facebook.katana', 'fb://facewebmodal/f?href=https://www.facebook.com/' + name, 'https://www.facebook.com/' + name);
            break;
        case 'instagram':
            this.launchApp('instagram://', 'com.instagram.android', 'instagram://user?username=' + name, 'https://www.instagram.com/' + name);
            break;
        case 'twitter':
            this.launchApp('twitter://', 'com.twitter.android', 'twitter://user?screen_name=' + name, 'https://twitter.com/' + name);
            break;
        default:
            break;
      }
  }

private launchApp(iosApp: string, androidApp: string, appUrl: string, webUrl: string) {
    let app: string;
    // check if the platform is ios or android, else open the web url
    if (this.platform.is('ios')) {
      app = iosApp;
    } else if (this.platform.is('android')) {
      app = androidApp;
    } else {
      const browser: InAppBrowserObject = this.inAppBrowser.create(webUrl, '_system');
      return;
    }
    this.appAvailability.check(app).then(
        () => {
            // success callback, the app exists and we can open it
            console.log('success');
            console.log(appUrl);
            const browser: InAppBrowserObject = this.inAppBrowser.create(appUrl, '_system');
        },
        () => {
            console.log('fail');
            console.log(webUrl);
            // error callback, the app does not exist, open regular web url instead
            const browser: InAppBrowserObject = this.inAppBrowser.create(webUrl, '_system');
        }
    );
}

info.plist:

<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>fb</string>
        <string>fbapi</string>
        <string>fbauth2</string>
    </array>

Answer 1

Got it to work, do not use the name use the id. You can get this here: https://findmyfbid.com/

Android:

fb://profile/' + id

iOS:

fb://page/' + id


 openAppUrl(app: string, name: string, id?: string) {
    switch (app) {
        case 'facebook':
            this.launchApp(
              'fb://', 'com.facebook.katana',
              'fb://profile/' + id,
              'fb://page/' + id,
              'https://www.facebook.com/' + name);
            break;
        case 'instagram':
            this.launchApp(
              'instagram://',
              'com.instagram.android',
              'instagram://user?username=' + name,
              'instagram://user?username=' + name,
              'https://www.instagram.com/' + name);
            break;
        case 'twitter':
            this.launchApp(
              'twitter://', 'com.twitter.android',
              'twitter://user?screen_name=' + name,
              'twitter://user?screen_name=' + name,
              'https://twitter.com/' + name);
            break;
        default:
            break;
      }
  }

private launchApp(iosApp: string, androidApp: string, appUrlIOS: string, appUrlAndroid: string, webUrl: string) {
    let app: string;
    let appUrl: string;
    // check if the platform is ios or android, else open the web url
    if (this.platform.is('ios')) {
      app = iosApp;
      appUrl = appUrlIOS;
    } else if (this.platform.is('android')) {
      app = androidApp;
      appUrl = appUrlAndroid;
    } else {
      const browser: InAppBrowserObject = this.inAppBrowser.create(webUrl, '_system');
      return;
    }
    this.appAvailability.check(app).then(
        () => {
            // success callback, the app exists and we can open it
            const browser: InAppBrowserObject = this.inAppBrowser.create(appUrl, '_system');
        },
        () => {
            // error callback, the app does not exist, open regular web url instead
            const browser: InAppBrowserObject = this.inAppBrowser.create(webUrl, '_system');
        }
    );
}