iOS 6 and iPhone 5 Smart App Banners for native app in Web site

iOS 6 (iPhone 5) comes with more HTML 5 features in this post I am going to explain about “how to brand your Native iOS application in your Web site” .  When iOS users open your web site in iPhone or iPad you will show some popups saying we have a native app for you and App store link to install your application.

Apple made this process more easy  you no need to write more number of lines to brand you native application in your mobile web site. This feature will work from  iOS 6. it gives more power to web developers to open native application from web site. We just need to add one meta tag in head of your web page. Then it will automatically. Add a Banner in your web page saying you have an application for this and Install  link. If application is already installed it will show open instead of install. Lets see in what meta tag we need to add and how…

For in Web page we need to add one line meta tag:
<meta name=”apple-itunes-app” content=”app-id=YOUR APP ID“>

How to get app id of my application?

Open your application in itunes web site then you can see you app id in that URL or else you can also get in itunes connection.

For example :- facebook application app URL and you can see app id in the URL http://itunes.apple.com/us/app/facebook/id284882215?mt=8
HTML code sample using facebook app id:-

<!DOCTYPE html>
<html>
<head>
<meta name=”apple-itunes-app” content=”app-id=284882215″>

</head>
<body>
<h1>Page content</h1>
</body>
</html>

If application not installed, the smart app banner look like this (with view)

iOS6 iPhone5 smart app banner view

iOS6 iPhone5 smart app banner view – Brand your Application

If application installed, the smart app banner look like this (with open)

iOS6 iPhone5 smart app banner open

iOS6 iPhone5 smart app banner open – Brand your application in Web site

We can provide a string value for arguments using app-argument in same meta tag

<meta name=”apple-itunes-app” content=”app-id=YOUR APP ID,app-argument=xxxxxx”>

The banners shows a “Loading…” image while it verifying the app, is valid to the current user’s device and App Store. If it’s not valid, the banner hides automatically; for example, it’s an iPad-only app and you are viewing an iPhone web browser or the app is available only in US App Store and your account is INDIA.