How to share a link within ionic app that links back to the app

Question

I am trying to implement social sharing within ionic app, I was able to successfully share links through native share sheet. When the link is clicked by the person whom the link is shared with it is meant to link back to the item within the app, If the the user have the app installed, otherwise, it prompt the user to install the app. But it is not work that way, rather it asks if you want to open with PlayStore or browser.

Below is the first thing I did which shares the link successfully after installing cordova social share

.controller('myCtrl', function($state, $cordovaContacts, $ionicActionSheet, $cordovaSocialSharing ) {
  $scope.share = function(id) {
    $cordovaSocialSharing
      .share("my Link Description", null, null,"https://play.google.com/store/apps/deatils?com.ionicframework.myapp/app/item/"+id) //    Share via native share sheet
      .then(function(result) {
        // Success!
      }, function(err) {
        // An error occured. Show a message to the user
      });
    }
  }
})

and the view is like this

<a ng-click="share(id)"><i class="ion ion-share"></i> </a>

When the link refused to work as I expected, I did a further research, and I found Custom URL scheme PhoneGap Plugin which is a cool plugin for Cordova that is designed to allow to launch apps by clicking on a link in an email or on a web page

after installing the plug , the link is meant to be used like this;

<a href="mycoolapp://">Open my app</a>
<a href="mycoolapp://somepath">Open my app</a>
<a href="mycoolapp://somepath?foo=bar">Open my app</a>
<a href="mycoolapp://?foo=bar">Open my app</a>

but if I put any of this raw into the social sharing implementation, it shared it as it is written, so the link cannot be clicked.

I'm just trying to do exactly the same. Did you find any solution? — DevStarlight, Jul 21 '16 at 11:25

DevStarlight · Accepted Answer · 2016-07-27T11:50:15.610

Okay. Let's go step by step.

First of all, you need to install, not only the plugin you use for the URL scheme (I use this one), but also a universal-link plugin which links the http URL http://example.com to your app example://. After all the process, your config.xml file should be like that:

<plugin name="cordova-plugin-customurlscheme" spec="~4.2.0">
  <variable name="URL_SCHEME" value="example" />
  <variable name="ANDROID_SCHEME" value=" " />
  <variable name="ANDROID_HOST" value=" " />
  <variable name="ANDROID_PATHPREFIX" value="/" />
</plugin>

<plugin name="cordova-universal-links-plugin" spec="~1.1.2" />
<universal-links>
  <ios-team-id value="xxxxxx" />
  <host name="angular.example.com" scheme="https">
    <path event="openUrl1Page" url="/url1/*" />
    <path event="openUrl2Page" url="/url2/*" />
  </host>
</universal-links>

Note: You'll see that a folder called ul_web_hooks is created. Copy also the <link> elements to your main .html file (Actually for me It works without that, but in the documentation, they say it's necesary).

After you have done that 2 things, you should be able to open your app throught console typing something like:

adb shell am start -W -a android.intent.action.VIEW -d "http://angular.example.com/url1/x"

It should also work if you use the URL scheme:

adb shell am start -W -a android.intent.action.VIEW -d "example://url1/x"

Next, you'll need to manually bootstrap your app, so cordova decides bootstrapping depending of the way the app was loaded (common loading opening the app or because someone clicked the link) (note that here you'll have to handle the resume and pause possible status of your up with their respectives addeventListener.

Pay attention since it's a nice trick to use your $urlRouterProvider.otherwise() since you can set over there the right path.

Our last step should be to create a website for those who open a link for the first time and the app is not installed yet (They will successfully open the URL).

Hope it helps!

Thanks, But were you able to figure out how to redirect to the actual page within the app based on the url param? I followed the step in the documentation, but I couldnt get it to work — kplus, Jul 30 '16 at 14:42
I wasn't able to do it following the documentation way, so I found my own way declaring in the `index.js` `var path = "/home";` and using it later in my `$urlRouterProvider.otherwise(path)`. I also followed the way http://stackoverflow.com/questions/21842276/manually-bootstrapping-angularjs-from-cordova-deviceready-event bootstrap. Hope it helps! — DevStarlight, Jul 30 '16 at 15:20

score 0 · Answer 2 · edited Dec 12 '16 at 11:59

0

window.open('https://www.facebook.com/sharer/sharer.php?u={{YOUR URL}}, '_system', 'location=yes');

and

window.open('https://www.twitter.com/share?url={{YOUR URL}}, '_system', 'location=yes');

edited Dec 12 '16 at 11:59

Wai Ha Lee

8,598
83
57
92

answered Dec 12 '16 at 10:22

sunny chauhan

31
3

4

Welcome to Stack Overflow! While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – kayess Dec 12 '16 at 11:18

How to share a link within ionic app that links back to the app

2 Answers2