AppStoreとGooglePlayのダウンロードボタンの設置方法!

AppStoreとGooglePlayのダウンロードボタンの設置方法!

takato(@n8takato)です!

アプリのダウンロードページへ遷移させるために、AppStoreとGooglePlayのバッチを表示したい。。。

このような課題に向けて記事を作成しています。

この記事を読むと、下記のバッチを表示出来るようになりますよ!

AppStoreで入手 GooglePlayで手に入れよう

バッチを表示することで読者の警戒軽減につながります。

コピペ可能なコードと合わせて説明していますので、急ぎの方はコードをコピーして作業を進めてください。

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人
目次

AppStoreのダウンロードボタンを作成する方法

AppStoreのダウンロードボタンを作成する方法
AppStoreのダウンロードボタンを作成する方法

まずはAppStoreのダウンロードボタンを表示させる方法を紹介します。

ボタンの表示手順は下記の流れになります。

  1. アプリのダウンロードURLを取得する
  2. コードを貼る

アプリのダウンロードURLを取得する

アプリのダウンロードURLを取得します。

アプリのダウンロードURLを取得する理由は、ボタンをクリックするとアプリのダウンロード画面に遷移させるためです。

AppStoreでのダウンロードURLを取得するには、Appleサービスマーケティングツールを使います。

アプリを検索する

上記リンクからAppleのツールを開きます。

検索ボックスに表示したいアプリ名を入力します。

今回は「Uber Eats」のアプリを表示したいと思います。

Apple Services Marketing Tools
Apple Services Marketing Tools

URLを取得する

検索したアプリのURLを取得します。

下の方にスクロールすると「Apps」という項目があり、そこにアプリが表示されます。

アプリ検索結果画面
アプリ検索結果画面

アプリを選択したら「Content Link」という部分にURLが表示されています。

このリンクをコピーしてください。

ダウンロードリンク
ダウンロードリンク

取得したリンクはAppStoreのUber Eatsダウンロード画面のものになります。

コードを貼る

続いてバッチを表示するコードを貼ります。

使用するコードはこちらです。

<a href="ここにダウンロードするアプリのURLを入力する">
<img src="https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt=”AppStoreで入手”>
</a>

「ここにダウンロードするアプリのURLを入力する」の部分に先ほどコピーしたURLを貼ります。

このコードは下記のように表示されます。

”AppStoreで入手”

クリックするとUberEatsのダウンロード画面に遷移しましたね。

これで完成です!

GooglePlayのダウンロードボタンを作成する方法

GooglePlayのダウンロードボタンを作成する方法
GooglePlayのダウンロードボタンを作成する方法

続いてGooglePlayでダウンロードボタンを表示する方法を紹介します。

手順は先ほどのAppStoreとほとんど同じです。

  1. アプリのダウンロードURLを取得する
  2. コードを貼る

アプリのダウンロードURLを取得する

GooglePlayのURL取得はGooglePlayから出来ます。

アプリを検索する

右上にある虫眼鏡マークからアプリを検索します。

先ほど同様「Uber Eats」と検索します。

GooglePlay
GooglePlay

URLを取得する

アプリのインストール画面が表示されます。

この画面のURLをコピーしてください。これでURLの取得が完了です。

URLをコピーする
URLをコピーする

コードを貼る

続いてコードを貼ります。

GooglePlayで使用するコードは下記のものになります。

<a href="ここにダウンロードするアプリのURLを入力する">
<img src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" alt="GooglePlayで手に入れよう">
</a>

「ここにダウンロードするアプリのURLを入力する」の部分に先ほどコピーしたURLを貼ります。

以上で完成です。下記のように表示されます。

GooglePlayで手に入れよう

クリックするとGooglePlayでUber Eatsが表示されましたね。

2つのボタンを綺麗に横並びにする方法

2つのボタンを綺麗に横並びにする方法
2つのボタンを綺麗に横並びにする方法

AppStoreとGooglePlayのボタンは横並びにすると高さがずれてしまいます。

実際に並べたものがこちらです↓

”AppStoreで入手” Google Play で手に入れよう

GooglePlayは余白こみで作成されている

高さがずれてしまう原因はGooglePlayにあります。

GooglePlayのボタンは余白こみで作成されています。AppStoreのボタンには余白が存在していません。そのため横並びにした時に高さがずれてしまうのです。

AppStoreボタンに余白を作る

高さを合わせるために、AppStoreのボタンに余白を作ります。

AppStoreのimgタグの中に下記のコードを追加します。

style="margin:10px 10px;"

これでAppStoreボタンにも同じように余白を作ることが出来ました。

AppStoreで入手 GooglePlayで手に入れよう

上記のコードはこちら↓

<!---AppStore--->
<a href="https://apps.apple.com/us/app/uber-eats-food-delivery/id1058959277?itsct=apps_box_link&itscg=30200">
<img src="https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="AppStoreで入手" height="40" style="margin:10px 10px;"/>
</a>

<!---GooglePlay--->
<a href="https://play.google.com/store/apps/details?id=com.ubercab.eats">
<img src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" alt="GooglePlayで手に入れよう" width="153"/>
</a>

【最後に】横並びにする場合は余白を作る!

この記事ではAppStoreとGooglePlayのダウンロードバッチを表示させる方法を説明しました。

そこまで難しい内容では無いと思います。

他にも業務で覚えたことがあったら発信しますね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる