WordPress

AppStoreとGooglePlayのダウンロードロゴ(バッジ)の埋め込み・貼り付け方法!

2018-08-03

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

 ⇑  このマーク    

これ、Web業界だと バッジ って言うらしいですよ。

 

このバッジをブログやホームページのサイト内に貼り付け・埋め込む方法を記載していきますよ~

 

このバッジを貼り付けするだけなら画像コピーして、貼り付けりゃ終了だけど、貼るからにはリンクを記載してクリックしたら所定の場所に飛ばしたいって人向けの記事です。

 

Google PlayApp Storeの両方ともやり方は、そんな変わらないので簡単です。

初心者でも楽勝に出来ちゃいます!

ただ、WordPressを利用している方はApp Storeのバッジだけ、ひと手間加えないとイケないので、その手順も解説しちゃうゾ!

 

 

アイコン画像も一緒に追加したい場合は、こっちがオススメ!

♥ アプリーチを使った貼り付け方法

便利
アプリーチの使い方
ブログ記事でアプリを紹介【アプリーチの使い方】スマホでアフィリエイト

続きを見る

 

スポンサードサーチ

Google Playの貼り付け方法

まずは、簡単な方からヤっつけちゃぃましょ!

Google Play マークのバッジを利用する場合は、アプリ以外の「映画」「マンガ」「音楽」どのページでも貼り付け可能なので、色々と試してみてね。

アプリ以外でも、手順は全く一緒です。

 

最初にGoogle Playのページから、貼り付けしたいページを開きます。

Google Play 公式サイト

 

開いたページの「URL」をコピーします。

バッジのアドレス

 

 

次に「Google Play バッジ」にアクセスします。

グーグルプレイバッジ

 

下の方までスクロールしていくと「バッジ作成ツール」があります。

この「バッジ作成ツール」を使用します。

 

バッジ作成

設定箇所はデフォルト(初期設定)のままで大丈夫です。

赤枠で囲んでいる「言語」の表記を変更すると、バッジ内の文字も変更されるので、日本語以外の表示が良い人は、ここを変更してください。

言語を変更すると「バッジ」と表記されているプレビュー画面が変更されるので、確認しながら作成してね。

 

もう少し下にスクロールして「Play ストア URL」の項目があるので、そこに先程コピーした URL を貼り付けします。

 

バッジ作成2

 

すると、左側の「マーケティングにこのHTMLバッジを含めます」の箇所にコードが表示されます。

こんな感じね ⇓  ⇓ ⇓ 

バッジ作成4

 

この赤枠内のコードをコピーして、表記したい自分のサイト内に貼り付けて完了です!

WordPressの人は「投稿」から「テキスト」エディタ内に貼り付けして下さい。

 

 

Google Play バッジのサイズ変更

作成したコードに「width="数字"」を入れます。

<a href="https://play ~~~~~ alt="Google Play で手に入れよう" width="153" /></a>

これでサイズが変更されます!

この記事に記載のバッジは「153」で設定してますが、好みで変更してね!

 

 

 

App Store の貼り付け方法

続いて App Store バッジの貼り付け手順です。

2つの貼り付け方法を説明していきます!

 

1つ目はApp Developer」からバッジがダウンロードできます。

ここからダウンロードして使用が可能です。

App Developer

 

 

2つ目はiTunes Link Maker」からダウンロードする手順

iTunes Link Maker」にアクセスします。

linkmaker

貼り付けしたい「アプリ名」を検索します。

ストア国日本

メディアタイプApp

 

アプリが表示されたら、クリックします!

linkmaker2

クリックすると、埋め込みコード直リンクが表示されます。

赤枠内の埋め込みコードをコピーして、表記したい自分のサイト内に貼り付けて完了!!

 

WordPressを利用している場合は、この埋め込みコードを貼り付けしても表示されません。

このコードを埋め込むと、コード自体が削除されてしまいます。

WordPressの仕様上、この埋め込みコードは読み込まれないので、このコードにひと手間加えていきます。

 

これが実際に、この記事で埋め込んでいるコードです。

<a href="https://itunes.apple.com/jp/app/instagram/id389801252?mt=8"><img style="margin: 10px;" src="https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="AppStoreで入手" height="40" /></a>

 

 

<a href="〇〇〇〇〇"><img style=~~~~~~</a>

このコードの〇〇〇の箇所(赤文字の箇所)に、上記の画像の所の「直リンク」と記載してある URL を貼り付けしてください。

こちらも「テキスト」エディタに貼り付けして下さい!

以上で App Store バッジの貼り付けが完了です!

 

 

WordPress利用中の人は、他の画像と同様にセンター寄せや、背景の設定が可能なのでサイトに合ったデザインにカスタムして貼り付けしてみて下さい!

 

ガイドラインを読んでから利用して下さい

ガイドラインにAppバッジに関しての利用方法が記載されています。角度の変更やアニメーションにしたりするカスタマイズは禁止されています。

App ガイドライン

 

 

こちらの貼り付け方法も可能!

♥ アプリーチを使った貼り付け方法

便利
アプリーチの使い方
ブログ記事でアプリを紹介【アプリーチの使い方】スマホでアフィリエイト

続きを見る

 

急上昇の記事

トークライバー画像

アプリ

【マシェLIVE・トークアプリ】配信用ライバーで気軽にお小遣い稼ぎ!

【女性必見】 お小遣い稼ぎが出来ちゃう。マシェLIVEトークアプリをご紹介!   ライブ配信で、報酬ゲット! ってゆーアプリです。   使い方や、どんなアプリなのかを徹底解説してい ...

ライブアプリ

アプリ 比較・まとめ

【2020年】最新の稼げるライブ配信アプリはどれ?

2020年11月現在、コロナ禍の影響もあり、自宅にいながらお小遣い稼ぎが可能なライブ配信アプリが物凄い勢いで普及しています。お小遣い稼ぎや副業としてアプリに参加している『ライバー』増えている一方で、自 ...

ビゴライブロゴ

アプリ

【BIGO LIVE】ビゴライブとは?稼げるライブ配信アプリの使い方を徹底攻略!

2020/11/27    , ,

ライブ配信アプリの中でも 稼げるライブ配信優秀なアプリ使いやすい操作が簡単 などと評判の良い 【BIGO LIVE】(ビゴライブ)   最近とにかくビゴライブの噂を耳にするので、どんなライブ ...

ショッピファイの公式サイト

インターネット

最近噂のShopify(ショッピファイ)とは…?使い方から費用まで

最近話題の『Shopify(ショッピファイ)』   皆様ご存じですか?   名前は聞いた事があるけど、細かいことまで知っているって人はまだまだ少ないのではないでしょうか・・・ &n ...

イリアムのロゴ

アプリ

人気でハマる人が続出…?ライブ配信アプリの【IRIAM】イリアム

2020/12/2    ,

誰でもキャラクターになってライブ配信を行うコトができる   【IRIAM】イリアム   一般的なよくあるライブ配信アプリでは、ライブ配信者が自分の顔をスマートフォンにかざして、テレ ...

よく読まれている記事

-WordPress
-,

© 2020 wright BLOG