ブログに「App Store」「Google Play」の公式バッジ（アプリインストール用のボタンウィジェット）を設置する方法を備忘録的に書いていく。
ブログや公式サイトなどでよく見るこんな感じのボタンだ。（以下のボタンはそれぞれApp StoreとGoogle Playの公式サイトに飛ぶ）
App Storeの場合
App Storeの場合は以下の流れで作ることができる。
① Appleの公式サイトからインストール対象のアプリのHTMLコードを取得
② ブログなど公式バッジを設置したい場所にHTMLコードを埋め込む
③ ボタンの縦横幅や余白などを調整する
まずは「App Storeマーケティングツール」のページにいき、インストール対象のアプリを検索する。
今回は例として「タイムズカー」のアプリを検索して選択する。
遷移した先のページの下の方にバッジ作成の欄があるので、背景色や言語を設定して「Copy Embed（埋め込みコードをコピー）」でHTMLコードをコピーする。
コピーしたコードを「カスタムHTML」で貼り付け、<div>タグで全体を囲んで縦横幅（width, height）や余白（padding, margin）を調整すれば完成。（以下のボタンはタイムズカーのApp Storeページに飛ぶ）
Google Playの場合
Google Playの場合は公式リソースからそのままHTMLコードを取得できないため、ロゴファイルを取得する必要がある。
① Googleの公式サイトからGoogle Playのロゴファイルをダウンロードする
② ブログなど公式バッジを設置したい場所の画像ファイル置き場（メディアライブラリ等）にロゴファイルをアップロードする
③ ボタン表示用のHTMLコードを埋め込み、画像・リンク先のURLにロゴファイル・インストール対象のアプリのURLを指定する
④ ボタンの縦横幅や余白などを調整する
まずは「Google Play Partner Marketing Hub - Badge Guidelines」のページにいき、ページ一番下のDownloadsからGoogle Playのロゴファイルをダウンロードする。
WordPress等のブログに設置する場合、ダウンロードしたロゴファイルをメディアライブラリにアップロードし、URLをコピーしておく。
カスタムHTMLに以下のコードをコピーして貼り付け、<a>タグのhref属性にインストール対象アプリのページURLを、<img>タグのsrc属性にアップロードしたロゴファイルのURLをそれぞれ入力する。
<div>
<a href="★インストール対象のアプリのGoogle PlayのページURL★">
<img src="★コピーしたロゴファイルのURL★" alt="Google Playで手に入れよう" style="width: 310px; height: 80px; padding: 0px 20px" />
</a>
</div>
あとはApple Storeのバッジと同じように縦横幅や余白を微調整すれば完成。
ちなみに、同じカスタムHTML内にApp StoreとGoogle PlayのHTMLコードを埋め込めば、ボタンを並べて設置することができる。