たった1行でiPhoneサイトのヘッダーにアプリバナーを表示させる方法

このエントリーをはてなブックマークに追加


App Storeと連動したiPhoneアプリのダウンロードバナーを表示

アプリのダウンロードへ誘導する方法としてダウロードボタンを用意しますが、iOS6のSafariで表示すると自動でApp Storeと連動したiPhoneアプリのダウンロードバナーを表示させる方法があるので紹介。
実装はすごい簡単にできます。アプリを紹介するページでこれを使えばダウンロードへスムーズに誘導することができます。また、インストール済みの場合はアプリが起動します。
結構目立つのでボタンの画像よりもインパクトはあります。

アプリバナーを表示させたデモはこちら
※iPhoneのiOS6のSafariで見て下さい

ヘッダーにiPhoneアプリバナーを表示させる方法

実装はすごい簡単です。メタタグのapple-itunes-appを使うと自動でヘッダーに表示されます。
<meta name="apple-itunes-app" content="app-id=464840291">

app-idにアプリのIDを指定します。IDを確認する場合は、アプリの紹介ページのURLで確認するすることができます。
私が作った胎動10カウントアプリの場合は下記の 464840291 になります。https://itunes.apple.com/jp/app/fetal-movement-10count/id464840291?l=ja&mt=8

アプリバナーを表示させたデモはこちら
※iPhoneのiOS6のSafariで見て下さい

このエントリーをはてなブックマークに追加


他のスマートフォンサイトに関する記事

Web制作で役に立つテクニック情報を配信!