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

2017/12/07[公開] 2019/06/23[最終更新]

linkmaker1

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

(2019/06/23更新)コードが変わっていたのに対応した内容に修正。ブロックエディターの場合を追記

スポンサー リンク

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; の数字を変更します。

(追記)現行のコードでは、widthとheightの数値を変えるだけではダメでした。さらにbackground-size: contain; を追加。

 AndroidのPlayストアのバッジと並べる場合は、margin:16px; も追加します。

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

まとめると、

width:135px; height:40px;

 ここの部分を、以下のように書き換えます。

width:218px; height:65px; margin:16px; background-size:contain;

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” をコードに追記します。場所は下記画像の位置に挿入します。

赤字の部分を追記
赤字の部分を追記

完成

 以上でバッジのボタンの設定は完了です。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” /></a> の前に追加して貼り付け

App Store

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

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

ブロックエディタでは

(2019/06/23追記)gutenbergのブロックエディターでは、カスタムHTMLブロックを追加して上記コードを貼り付けます。または、段落ブロックに直接コードを貼り付けても大丈夫です。

 以下は、2カラムブロックに左右にカスタムHTMLブロックを入れた例です。

<a href="https://apps.apple.com/jp/app/firefox-%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC/id989804926?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2015-11-12&kind=iossoftware&bubble=ios_apps) no-repeat;width:218px; height:65px; margin:16px; background-size:contain;">​</a>
<a href='https://play.google.com/store/apps/details?id=org.mozilla.firefox&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Google Play で手に入れよう' src='https://play.google.com/intl/us-en/badges/images/generic/ja_badge_web_generic.png'width="250px" height="97px"/></a>
Google Play で手に入れよう

(追記おわり)

スポンサー リンク

コメントを残す

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