App StoreとGoogle Playのアプリ公式リンクボタンを出す方法

2017/12/07[公開] 2017/12/08[最終更新]

 iPhoneなどiOSのアプリや、Google Androidのアプリのボタン(バッジ)のようなリンクを出す方法を最近覚えました。App Store、Google Play ストアともに、公式のバッジ生成ページを用意してくれています。

スポンサー リンク

App StoreのLink Maker

 Apple公式のLink Makerです。App Store以外にも、Apple Music、iTunes Store、iBooks Store、および Mac App Storeなどの商品バッジを生成することができます。

サイトはコチラになります。

iTunes|Link Maker

 

コードを生成

 プルダウンメニューから、ストア国を「日本」、メディアタイプを「App」にして、アプリ名を入力して検索します。

 検索結果のアプリ一覧から、目的のアプリを選択して、バッジサイズを選択した下に出ているコードをコピーして利用します。

linkmaker2
検索してアプリを選びます
linkmaker3
バッジ用のコードをコピーします

コードに空白を追加(自動整形対策)

 コピーしたコードですが、そのまま張り付けるだけだと、何もないところにスタイルを指定しただけのコードになるので、WordPressの場合は自動整形機能により自動消去されてしまいます。テキストモードとビジュアルモードを切り替えるとコードが消去されます。

 それを防ぐために、ゼロ幅スペース  ​  を挿入することにより、テキストモードとビジュアルモードを切り替えてもバッジが表示されたままになります。

  この ​  を追加したコードを、WordPressの管理画面の投稿の編集画面でテキストモードで挿入したいところで貼り付けます。

linkmaker4
ゼロ幅スペースを追加して貼り付け

サイズ調整

 バッジのサイズは135×40 pxになっています。サイズを変更したい場合はコードの width:135px;height:40px; の数字を変更します。

 幅と高さの比率はそのままになるように計算して変えたほうが良いでしょう。また、スマートフォンでの閲覧を考えると、せいぜい幅250pxまでにするのが無難でしょうか。

Google PlayのBadge Generator

 Google Playの公式Badge Generatorです。下記サイトに行き、ページを下にスクロールしたところにあります。

Google Play|Badge Generator

コードを生成

 プルダウンメニューでLaunguageに「Japanese」を選択、Google Playのサイトで目的のアプリページのURLをコピーしてきてPlay Store URL欄に張り付けて、生成されたコードをコピーして利用します。

linkmaker5
生成されたコードをコピーします

サイズ調整

 生成されたコードをそのままテキストモードで投稿に張り付けると、バッジの画像サイズが646px × 250pxなので大きすぎます。

linkmaker6
元画像は余白も入れて646×250px

 例えば、幅を250pxくらいにするなら、 縦横の比率そのままの width="250px" height="97px" をコードに追記します。

linkmaker7
幅と高さ指定を追加する

完成

 以上でバッジのボタンの設定は完了です。AndroidとiOS用のアプリのリンクを出してみました。Firefoxアプリのダウンロードページが開きます。

 アプリのアフェリエイトはやってないので安心して押して試してください。

Google Play で手に入れよう

 Google Playはバッジの余白込みで250×97pxにしています。それに合わせてApp Storeのサイズは幅218px、高さ65pxに変更して、左余白を16px追加しています。

自分用まとめ

最後に、上記サンプルを出す方法の要点だけまとめたクイック手順です。

Google Play

  1. Google Play でアプリURLをコピー
  2. Badge Generator でバッジのコード生成
  3. width="250px" height="97px"  を<img の後ろに追加して貼り付け

App Store

  1. Link Maker でバッジのコード生成
  2. ゼロ幅スペース &#x200B;  を挿入
  3. width:218px; height:65px; margin-left:16px; に書き換えて貼り付け

このサイトは、自分の備忘録でもあるのです。

スポンサー リンク

こちらの記事もどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です