App Installs and Deep-Linking

Updated on Wed, 2014-06-25 17:14

English | 日本語

Introduction

One of the most important features in the new Cards is the ability to let users to download your app (if the user doesn't already have it installed), or deep-link into your own app (if the app is already installed on the user's mobile device). You can enable app installs and deep-linking on any kind of Twitter Card - you'll just need to add a new set of markup tags as shown below.

App Installs

You can enable cards for app installs by adding these new footer tags to your markup. They specify the download redirect for users who have not yet installed your app on their device. This will work across iPhone, iPad, and Android (Google Play). Please note that if you have an iPhone app, but no iPad-optimized app, you should include the iPhone app id, name, and url for both iPhone and iPad-related tags. If no value is provided, the Cards will simply render a "View on web" link pointing to website of the card.

Below is an example of what the prompt will look like if the user does not have the app installed:

Deep-Linking

If a user does have the application installed, you can specify a deep-link into the corresponding resource within your app. When a user clicks on the "Open in app" tap target, Twitter will send that user out into your app. This value is specified in the "twitter:app:name:(iphone|ipad|googleplay)" tags. The app url should be your app-specific URL Scheme (requires registration within your app) that launches your app on the appropriate client.

Here is example markup to enable app install prompts and deep-linking. Again, this metadata can be appended to any card type.

<meta name="twitter:app:country" content="US"/>

<meta name="twitter:app:name:iphone" content="Example App"/>

<meta name="twitter:app:id:iphone" content="306934135"/>

<meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef"/>

<meta name="twitter:app:name:ipad" content="Example App"/>

<meta name="twitter:app:id:ipad" content="306934135"/>

<meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef"/>

<meta name="twitter:app:name:googleplay" content="Example App"/>

<meta name="twitter:app:id:googleplay" content="com.example.app"/>

<meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef"/>

To app-enable your card, all you'll have to include is the app details: for iPhone and iPad, the App ID value for iPhone and iPad should be the numeric App Store ID; the App ID for Google Play should be the Android package name. Note: if your app is not listed in US app stores, you must set the "twitter:app:country" value to the two-letter country code for the App Store that contains your application.

The second component of deep linking is handling the incoming link inside your app. The "twitter:app:url:(iphone|ipad|googleplay)" value should be a descriptive URI that your app knows how to interpret, so that a user can be sent to the right content when they click on an app link from a card. You can set this up using the instructions below:

For iOS

In order for your app to respond to open URL requests correctly, you'll need to add a URL scheme into your app's .plist file. Common patterns for naming this scheme include reverse-DNS, or simply myappname://.

Next, look for the URL Types section in your app's .plist file. If it doesn't exist, you can add it yourself. If you haven't already edited URL Types, it should be an array with a single item, a dictionary with the key "URL Identifier". Click the + button associated with the dictionary to add a “URL Schemes” section, which is another array, and add your scheme to this array. You can add as many custom schemes as you like.

In your app delegate, you can add logic to the application:openURL:sourceApplication:annotation: method to take in the incoming URL (the one you specified in the card) and parse it within your app.

For Android

Deep link information is passed to your app as part of the Intent data. You can add an Intent filter to the relevant receiving Activities in your app. The intent filter might look something like this:

<intent-filter android:label="@string/filter_title_viewcardcontent">

         <action android:name="android.intent.action.VIEW" />

         <category android:name="android.intent.category.DEFAULT" />

         <category android:name="android.intent.category.BROWSABLE" />

         <!-- Accepts URIs that begin with "example://action" -->

```
         <data android:scheme="example"
```
```
               android:host="action" />
```
```
     </intent-filter>
```

A more complete explanation can be found in Google's developer docs.