One of the new features of iOS 6 is the ability to display a smart app banner if you have an iOS app in addition to a web app or website. A smart app banner is a 156 pixel banner that loads at the top of your browser window to notify users that the site that they are on also has a native app that they can download. In the past, we would have created this using HTML. Apple has made the process for notifying users dead simple.
In fact, we can get smart app banners running in just a couple minutes.
About the Smart App Banner
The information displayed in the banner depends on whether a user has the app installed or not. If the app is installed, the banner will display the app name, icon, publisher and an open button giving the user the option to open the app. If the app is not installed, the banner will show the app name, publisher, star rating, cost and a view link to direct the user to the app in the app store. There is also a close button to hide the banner. note - See screen captures below.
To add the banner we will need to grab the app ID from Apple. We can use the iTunes Link Maker to easily find the app ID. In this example, we’ll use the ITPWV app which I will connect with the InThePanhandle.com website.
Searching for the app name gave me the link to the app, http://itunes.apple.com/us/app/itpwv/id384904457?mt=8&uo=4 which I used to find the ID (384904457).
We will then use a meta tag and the app ID to connect the site to the app using the smart banner.
<meta name="apple-itunes-app" content="app-id=384904457">
Add that meta tag to the head section of any pages within your site website that you want the banner to be displayed on. That’s it. Because installation is so simple, I think we’ll see a lot of websites / apps taking advantage of this.
- iTunes Link Maker: http://itunes.apple.com/linkmaker/
- iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers
- InThePanhandle.com: http://inthepanhandle.com