App Card

Updated on Mon, 2014-06-23 14:58

The App Card is a great way to represent mobile applications on Twitter and to drive installs. We designed the App Card to allow for a name, description and icon, and also to highlight attributes such as the rating and the price.

The Tweet below from Jason Stark (@jaysonst) shows an App Card (photo and text) below the 140 characters:

Web
Mobile

This Card type is currently available on the twitter.com website, as well as iOS and Android mobile clients. It is not yet available on mobile web.

Our system recognizes when URLs are included in a tweet, and crawls your site to fetch the Card type and content. To learn more about how our Card system works, read our Getting Started Guide.

Sample Code

Adding an App Card to your tweets is as simple as adding the below meta tags to your site:

  1. <meta name="twitter:card" content="app">
  2. <meta name="twitter:description" content="The perfect for grabbing a nearby taxi. Try it by downloading today.">
  3. <meta name="twitter:app:country" content="US">
  4. <meta name="twitter:app:name:iphone" content="Example App">
  5. <meta name="twitter:app:id:iphone" content="306934135">
  6. <meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef">
  7. <meta name="twitter:app:name:ipad" content="Example App">
  8. <meta name="twitter:app:id:ipad" content="306934135">
  9. <meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef">
  10. <meta name="twitter:app:name:googleplay" content="Example App">
  11. <meta name="twitter:app:id:googleplay" content="com.example.app">
  12. <meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef">

Note that the platform-specific URLs are deep links into your app. If you do not support a particular platform, omit tags for that platform from your website.

How it works

The App Card is unique, as we use each of the respective app stores (Apple iTunes, Google Play) to proxy the pertinent Card data. If you specify the Card type, and each of the corresponding App IDs to the respective app stores, our system will proxy the rest for you (# of reviews, # of stars for the app, etc.). You also can optionally specify a more concise description of your app.

The image for the App Card is also downloaded directly from the app store on which your app resides. To ensure your App Card works properly, the image uploaded to the iTunes/Google Play store must be less than 1MB in size.

App Downloads and Deep Linking

In addition to driving downloads, the App Card can allow you to deep-link from this Card into your mobile app. Learn more by reading App Installs and Deep-Linking.

Special treatment for App Store and Google Play links

Twitter auto-creates App Cards for Tweets which contain a link to either the App Store or Google Play. This means that you can create an App Card experience just by sharing links directly to the download page for your application.

For example, tweeting out the ESPN App directly (https://itunes.apple.com/us/app/espn-sportscenter/id317469184?mt=8) will result in the below App Card appearing in the tweet:

Reference

Define the App Card with these properties:

Card Property Description Required
twitter:card Must be set to a value of "app" Yes
twitter:description You can use this as a more concise description than what you may have on the app store. This field has a maximum of 200 characters. No
twitter:app:id:iphone String value, and should be the numeric representation of your app ID in the App Store (.i.e. "307234931"). Yes
twitter:app:id:ipad String value, should be the numeric representation of your app ID in the App Store (.i.e. "307234931"). Yes
twitter:app:id:googleplay String value, and should be the numeric representation of your app ID in Google Play (.i.e. "com.android.app"). Yes
twitter:app:url:iphone Your app's custom URL scheme (you must include "://" after your scheme name) No
twitter:app:url:ipad Your app's custom URL scheme No
twitter:app:country If your application is not available in the US App Store, you must set this value to the two-letter country code for the App Store that contains your application. No
twitter:app:url:googleplay Your app's custom URL scheme No
For a full list of supported tags, please see the Cards Markup Tag Reference.