LoginSignup
40

More than 5 years have passed since last update.

スマホサイトにアプリダウンロードのバナーを表示させる

Posted at

備忘録です。

img.jpg
こういうやつを表示させる。

iOSの場合

iOS版はMobileSafari用のmetaタグが用意されているのでめちゃ簡単。

<meta name="apple-itunes-app" content="app-id=表示させたいアプリのID">

これだけで上画像のように表示される。

Androidの場合

AndroidはjQuery Smart Bannerで対応。
jQuery Smart Banner - http://jasny.github.io/jquery.smartbanner/

<meta name="google-play-app" content="app-id=表示させたいアプリのID">
<link rel="apple-touch-icon" href="アプリアイコンのパス">
<link rel="stylesheet" type="text/css" href="jquery.smartbanner.css"> 
<script type="text/javascript" src="jquery.smartbanner.js"></script>

必要な設定を行い、

$.smartbanner();

実行!
jQuery Smart BannerはiOSにも対応しているため、iOS版GoogleChromeはこっちで表示される。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40