How to Add App Banners to Your Mobile Site

app banner links

If you have a mobile application for your products or services, you know how expensive it can be to promote and distribute it for mass adoption. Did you know that, with a simple header snippet, that you can promote the application within a mobile browser?

Apple App Store Smart App Banners for iOS

Apple supports smart app banners and it's a great tool to increase adoption of your mobile application. When a mobile user visits your site using Safari on iOS, a banner is visible at the top of the browser window that links directly to your mobile application.

Apple Smart App Banner

If you'd like to search for and create your own meta tag, you can use iTunes Link Maker

Launch iTunes Link Maker

Interestingly, Google Android and Microsoft have not released a similar solution for their native browsers.

Google Play App Banners for Android?

That doesn't mean that you can't do it, though. There's a jQuery script that you can add to your site that will not only set the iTunes Smart Banner, it will also create a banner for Google Android or Microsoft users to download the appropriate application if you've got those as well.

If your site is built on WordPress, the folks at E-Moxie have written a nice little App Banners WordPress plugin for you to fill in all your details and even add some settings for how it appears and how often using cookies.

App Banners WordPress Plugin

jQuery Smart Banner for iOS or Android

If you're not on WordPress, no worries. You can apply a Smart Banner for Android or iOS using the jQuery Smart Banner script. The code is quite simple and very robust, here's the example from Arnold Daniel's site:

title: null, // What the title of the app should be in the banner (defaults to )
author: null, // What the author of the app should be in the banner (defaults to <meta name="author"> or hostname) <br /> price: 'FREE', // Price of the app
appStoreLanguage: 'us', // Language code for App Store
inAppStore: 'On the App Store', // Text of price for iOS
inGooglePlay: 'In Google Play', // Text of price for Android
icon: null, // The URL of the icon (defaults to <link>)
iconGloss: null, // Force gloss effect for iOS even for precomposed (true or false)
button: 'VIEW', // Text on the install button
scale: 'auto', // Scale based on viewport size (set to 1 to disable)
speedIn: 300, // Show animation speed of the banner
speedOut: 400, // Close animation speed of the banner
daysHidden: 15, // Duration to hide the banner after being closed (0 = always show banner)
daysReminder: 90, // Duration to hide the banner after "VIEW" is clicked (0 = always show banner)
force: null // Choose 'ios' or 'android'. Don't do a browser check, just always show this banner

Side note, you can also utilize this methodology to promote your podcast on a Smart App Banner! Check out this page on Safari and you'll see that we're promoting our podcasts.

One comment

  1. 1

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.