Search code examples
angularjsionic-frameworkionic3inappbrowser

Check app facebook works but twitter & instagram doesnt?


I currently have an Ionic app that opens a website inside InAppBrowser.

Every time you move to another URL it checks the domain and if it is a Facebook, Twitter or Instagram URL it will - 1. Check if the phone has the app installed 2. If it does, open the URL in the app.

My problem is, my Facebook code is working however, Instagram and Twitter do not work, any ideas? Thanks in advance.

home.ts

//check if link is for social media
  CheckSocialMediaLinks(url: string){

      //get the domain
        var parser = document.createElement('a');
        parser.href = url;
        var domain = parser.host; 


      if (domain === "m.facebook.com")
      {
          this.OpenFacebook(url);
          this.navCtrl.pop();
      } 
      else if (domain === "instagram.com")
      {
          this.OpenInstagram(url);
          this.navCtrl.pop();
      } 
      else if (domain === "twitter.com")
      {
          this.OpenTwitter(url);
          this.navCtrl.pop();
      }
  }

  OpenFacebook(url: string){
          let app;

            if (this.platform.is('ios')) {
            app = 'fb://';

            } else if (this.platform.is('android')) {
            app = 'com.facebook.katana';
            }

        this.appAvailability.check(app)
        .then(
            (yes: boolean) => window.open("fb://"+url, '_system'), //IF AVALIABLE
            (no: boolean) => window.open("https://"+url, '_system')
        );
    }

    OpenInstagram(url: string){
          let app;

            if (this.platform.is('ios')) {
            app = 'instagram://';

            } else if (this.platform.is('android')) {
            app = 'com.instagram.android';
            }

        this.appAvailability.check(app)
        .then(
        (yes: boolean) => window.open("instagram://"+url, '_system'), //Not working
        (no: boolean) => window.open("https://"+url, '_system')
        );

    }

    OpenTwitter(url: string){
          let app;

            if (this.platform.is('ios')) {
            app = 'twitter://';

            } else if (this.platform.is('android')) {
            app = 'com.twitter.android';
            }

        this.appAvailability.check(app)
        .then(
            (yes: boolean) => window.open("twitter://"+url, '_system'), //Not working
            (no: boolean) => window.open("https://"+url, '_system')
        );
    }

EDIT

Did some debugging, all the functions do execute, I found that where it doesn't execute or doesn't work is if the app for Instagram or Twitter is available. (Facebook works fine)

I have tried some variations and the code looks fine to me, any ideas?

Instagram - should open the link inside the app:

(yes: boolean) => window.open("instagram://"+url, '_system')

Twitter should open the link inside the app:

(yes: boolean) => window.open("twitter://"+url, '_system')

Solution

  • so I figured out the problem. The Twitter and Instagram must use a format.

    Instagram:

    window.open("instagram://user?username=whateverusername", '_system')
    

    Twitter:

    window.open('twitter://user?screen_name=whateverusername', '_system')