App Card

App Card

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 text of the Tweet:

Web Mobile
image2 image3

This Card type is currently available on the twitter.com website, as well as iOS and Android mobile clients. It is not 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:

<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@TwitterDev">
<meta name="twitter:description" content="Cannonball is the fun way to create and share stories and poems on your phone. Start with a beautiful image from the gallery, then choose words to complete the story and share it with friends.">
<meta name="twitter:app:country" content="US">
<meta name="twitter:app:name:iphone" content="Cannonball">
<meta name="twitter:app:id:iphone" content="929750075">
<meta name="twitter:app:url:iphone" content="cannonball://poem/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:ipad" content="Cannonball">
<meta name="twitter:app:id:ipad" content="929750075">
<meta name="twitter:app:url:ipad" content="cannonball://poem/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:googleplay" content="Cannonball">
<meta name="twitter:app:id:googleplay" content="io.fabric.samples.cannonball">
<meta name="twitter:app:url:googleplay" content="http://cannonball.fabric.io/poem/5149e249222f9e600a7540ef">

Note

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.

Note

If you have an iPhone app, but no iPad-optimized app, you may want to 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.

How it works

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

When testing your App Card, make sure that the app is publicly available in an app store, otherwise we will not be able to pull its information. By default we search the US store, so if your app is in a different country, be sure to define this with the twitter:app:country meta tag.

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 Cards for Mobile Developers.

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:

image4

Reference

Define the App Card with these properties:

Card Property Required
twitter:card

Must be set to a value of “app”

Yes
twitter:site

The Twitter @username the card should be attributed to.

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.