Google PlayとAppStoreのダウンロードリンクの作成方法

ブログ内でアプリを紹介するにあたり、よくある

Get it on Google Play
こんなダウンロードリンクを設置したいなと思い調べてみました。
ちなみにこのボタンみないなものはGoogle Play バッジ、AppStoreバッジと言うらしいです。
このページではバッジの作成方法のみに言及しています。位置を揃える方法やWordPressでソースコードが消えてしまう場合の対処法などは以下の記事を読んでみてください。

Google Appバッジの作成方法

Play Storeでバッジにしたいアプリを検索します。アプリを見つけたらクリックし、URLをコピーします。

②次にGoogle Play バッジのページを開いてください。下の方までスクロールすると左側に大きく「バッジを入手する」と書かれたエリアが出てきます。

PlayストアURLと書かれた部分に、先ほどコピーしたURLを貼り付けます。そうすると上の画像の黄色い部部に埋め込みコードが生成されて表示されるのでコピーしましょう。

④バッジを設置したい部分にコピーしたコードを貼り付ければ完成です!

AppStoreバッジの作成方法

こちらのリンク先「Link Maker」で、バッジにしたいアプリを検索します。

その際に上の画像のようにメディアタイプを「App(英語版であればiOS Apps)」に、ストア圏を「日本」に変更して検索してください。

検索後、バッジにしたいアプリが見つかったらクリックしてください。

②クリック後のページの下部に埋め込みコード(英語表記:Embed Code)が書かれているので、その部分をコピーし、バッジを設置したい部分へ貼り付けましょう。そうするとバッジが表示されるはずです!

バッジの大きさを変更したい

Google Playバッジの大きさを変える


<a style=”display: inline-block;” href=”https://play.google.com/store/apps/details?id=in.redbus.android&amp;pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1″><img src=”https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png” alt=”Get it on Google Play” width=”横幅” height=”縦幅”/></a>

上記の黄色部分を付け加えることでバッジのサイズを変更できます。widthとheight、両方を指定してもいいですし、どちらか一方のみを指定した場合は、もう一方は自動でサイズを合わせてくれます。

Google Playバッジは黒い背景部分だけでなく、左の画像のようにマージンがとられた形で一枚の画像になっています。それなので、その透明な部分も考慮して大きさを設定しないといけないのが厄介です。

AppStoreバッジの大きさを変える


<a href=”https://apps.apple.com/us/app/redbus-rpool/id733712604?mt=8″ style=”display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2013-11-04&kind=iossoftware&bubble=ios_apps) no-repeat;width:135px;height:40px;“></a>

AppStoreバッジは初期から縦横幅が設定されています。黄色の部分を変更し、好みの大きさにしてみましょう。

Google PlayバッジとAppStoreバッジを横並びにする

こちらは別記事としてまとめてあります!

関連記事

今回はGoogle PlayとApp Storeのダウンロードリンク(バッジ)を横並びに揃える方法をご紹介します。 wordpressのテキストエディタに、生成した埋め込みコードをそのまま貼ると、 こんな感じにGoogle Pl[…]