App Installs and Deep-Linking

Updated on Mon, 2014-02-17 19:27

English | 日本語

Introduction

One of the most important features in the new Cards is the ability to allow 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). The ability to enable app installs and deep-linking is globally available across all Twitter Card types - you'll just need to add a new set of markup tags as detailed below.

App Installs

By adding these new footer tags to your markup, you'll be able to specify downloads for users who've 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. When 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 correlated resource within your own application. When a user clicks on the "Open in app" tap target, Twitter will send that user out into your application. 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, and note that this metadata can be appended to any card type. Additionally the App ID value for iPhone and iPad should be the numeric App Store ID, while the App ID for Google Play should be the Android package name.

  1. <meta name="twitter:app:name:iphone" content="Example App"/>
  2. <meta name="twitter:app:id:iphone" content="306934135"/>
  3. <meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef"/>
  4. <meta name="twitter:app:name:ipad" content="Example App"/>
  5. <meta name="twitter:app:id:ipad" content="306934135"/>
  6. <meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef"/>
  7. <meta name="twitter:app:name:googleplay" content="Example App"/>
  8. <meta name="twitter:app:id:googleplay" content="com.example.app"/>
  9. <meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef"/>