How to add deep linking

When users share your posts on social media, deep linking ensures that the app is opened after a link to your blog is clicked. Here I will explain how to add deep linking to your app.

The Holigo App makes sharing posts from the app to social media incredibly simple. But what to do after users see the shared post and click the link to check it out? The answer is that two things could happen:

  • when the user has the app installed, the app opens automatically with the shared post in view.

  • when the user does not have the app installed, they will be directed to a page on your blog with information on how to install the application on their device.

The technology behind this two-way redirecting depends on a third-party service (branch.io - Free plan). Below are the steps to install the feature for your app.

Step 1: Sign up for a branch.io account

Let's begin by signing up for a Free plan Branch account. Once your account has been confirmed, the first you will be asked to do is to 'Brand your link'. The Name you pick here is important, because it is what people will see when sharing posts from your app on social media:

Next, you will be asked where to redirect people who click on your app's shared links on social media. You may add your website information for now. Perhaps you want to create a special page dedicated to your app and its benefits where to users can be redirected:

Note: it is possible to change this information at a later stage with your actual app store listing urls for iOS and Android app stores once your apps have been listed.

You should now have your new branch link displayed to you. Go ahead and press the 'Finish Later' button for now:

... because most of the remaining setup has already been added to your application.

We do, however, need to make some modifications to your current setup.

Step 2: Configuring your branch app settings

Let's start by giving the app in your branch account a name by clicking the 'Account Settings' tab on the left-hand side menu (do make sure to use a name relevant to your situation) and Save:

Next, open up the 'Configuration' panel by pressing the Configuration tab inside the left-hand menu. Once inside, there are a number of fields that need updating:

Android Redirects

  • Check the 'I have an Android App' checkbox.

  • Android URI Scheme for the 'Yes' section: create your own scheme (i.e. yourappname://).

  • Custom URL for the 'No' section: make sure your 'Android Package Name' is matches the one you set up for your app project (i.e. com.yourcompanyname.yourappname).

iOS Redirects

  • iOS URI Scheme for the 'Yes' section: create your own scheme (i.e. yourappname://).

  • Custom URL for the 'No' section (if not already filled in correctly).

  • Bundle Identifiers: check the Certificates, Identifiers & Profiles section (Identifiers tab) of your Apple Developer account in case you forgot (do make sure to use the same values for 'Android Package Name' and 'iOS Bundle Identifier').

  • Apple App Prefix: also visible under the Identifiers tab of your Certificates, Identifiers & Profiles section (See second screenshot below):

Scrolling further down to 'Social Media Preview', make sure to add your unique share link information:

Let's save our changes before we move on the the 'Link Domain' section. Once here, it's time to re-open our Xcode project again and navigate to the 'Signing & Capabilities' view.

Once opened, replace both fields inside the 'Associated Domains' section with your own two unique values from your branch Dashboard. (One named Default Link Domain and one named Alternate Link Domain.)

Note: Make sure that both your domains begin with the applinks pre-fix or your branch links will not be recognised by your app.

Step 3: Configuring Xcode info.plist

The next step is to update three values that need to be set inside your project's info.plist file. So go ahead and open your info.plist view and look for these three values:

  • URL types -> Item 0-> URL Schemes -> Item 0

  • branch_app_domain

  • branch_key

Let's replace each value with your own unique strings:

  • URL types -> Item 0-> URL Schemes -> Item 0: add your unique scheme string.

  • branch_app_domain: add your unique Default Link Domain string.

  • branch_key: add your unique Branch Key string.

Your iOS setup is now complete and active. Before you do any testing (see Step 5), do make sure to re-build your project by pressing the 'play' button in Xcode or by building your project form the command line:

$ yarn run ios

Step 4: Configuring AndroidManifest.xml

Now that your iOS project has been set, let's modify our Android document with your own unique values.

For this, open up your code editor and look for the /android/app/src/main/AndroidManifest.xml file.

Tip: For a quick file search with Visual Studio Code, press 'CTRL/Command + P' and enter the file name.

Once you've found the correct file, there are three value that need changing:

  • android:scheme: add your unique android scheme (the same as your iOS info.plist scheme string, but without the :// post-fix).

  • android:host: add your unique Default Link Domain string (same as for iOS info.plist).

  • android:value: add your unique Branch Key string (same as for iOS info.plist).

Your Android setup is now complete and active. Before you do any testing (see next step), do make sure to re-build your project by pressing the 'play' button in Android Studio or by building your project form the command line:

$ yarn run android

Step 5: Testing your deep-linking setup

Assuming that you have successfully re-compiled your project, you should now be able to test your setup. For this you have two options:

  • Test on a real device by connecting your device by USB cable to Xcode or Android Studio (do make sure to activate developer mode on Android), re-build your project and share one of your posts on your Facebook wall.

  • Test on Simulator/Emulator by using the command line:

iOS

$ npx uri-scheme open https://your_branch_app_domain --ios

Android

$ npx uri-scheme open https://your_branch_app_domain --android

If running the above commands automatically starts up your application you can be sure that you have completed the setup successfully.

Last updated