40代ママのブログの始め方
記事を書く

WordPressブログでスマホアプリを紹介したらiPhone/androidへのリンクを埋め込もう!

スマホアプリ

ブログってスマホで読む人が多いですよね?(私はいまだにPCですが)

スマホアプリを紹介すること、ありますよね?(私は今日初めてしました)

 

そんな時、AppleやGoogleが提供している『リンクバッジ』が便利です。

 

この記事では、WordPressブログでスマホアプリを紹介するときに、iPhoneアプリやandroidアプリへのリンクを埋め込む方法をご紹介します。

あなたのブログをまた1歩、使いやすいものにグレードアップさせましょう。

ここでは、子供が長く遊んでいた『妖怪ウォッチぷにぷに』のリンクをWordPressブログに貼るという前提で説明を行います。

iPhoneアプリへのリンクを埋め込む方法

iPhoneアプリへのリンクを貼る場合、Appleが提供している『iTunes Link Maker』からリンクを取得します。

①iTunes Link Makerを開く

はじめに、『iTunes Link Maker』のサイトを開きます。

 

②ストア国『日本』、メディアタイプ『App』を選択

図の赤枠の部分で、『日本』『App』を選択してください。

国名・メディアタイプ名(青字の部分)をクリックすると選択肢が表示されます。

LinkMakerサイトを開く

 

③検索ボックスに『妖怪ウォッチぷにぷに』と入力する

検索語句を入力する

特に、『検索』ボタンはないので、入力後『Enter』キーを押すと検索してくれ、結果が表示されます。

検索結果

一瞬、2段表示されているように見えますが、上は『iPad』下は『iPhone』です。スマホアプリとして紹介するなら『iPhone』を選びましょう。

④iPhoneAppの『妖怪ウォッチぷにぷに』を選びます

『バッジ』・『テキストリンク』・『スモール・バッジ』が選べるようになっているので、『バッジ』を選びます。

表示された埋め込みコードをコピーして、埋め込みたい場所に貼り付けるだけで、バッジが表示されるはずなのですが、どうもうまくいきません。

そこで、『直リンク』のところに表示されているリンクをコピーしてください。

バッチを選んで

コピーした『直リンク』を↓の「***」の部分に置き換えて、それから貼り付けてください。

<a href=”***” target=”_blank” rel=”noopener”><img class=”aligncenter” src=”https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg” alt=”App Storeからダウンロード” width=”135″ height=”40″ /></a>

妖怪ウォッチぷにぷにの場合、こんな感じ↓になります。

赤字にしたところが、埋め込みコードの下にある『直リンク』をコピーした部分です。

<a href=”https://itunes.apple.com/jp/app/%E5%A6%96%E6%80%AA%E3%82%A6%E3%82%A9%E3%83%83%E3%83%81-%E3%81%B7%E3%81%AB%E3%81%B7%E3%81%AB/id1032346221?mt=8” target=”_blank” rel=”noopener”><img class=”aligncenter” src=”https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg” alt=”App Storeからダウンロード” width=”135″ height=”40″ /></a>

⑤プレビューで表示を確認してみてください

私も、『妖怪ウォッチぷにぷに』のリンクバッチを埋め込んでみました。

App Storeからダウンロード

 

androidアプリへのリンクを埋め込む方法

androidアプリへのリンクは、Googleから提供されている『Googleバッジのページ』で作成することができます。

①iTunes Link Makerを開く

はじめに、『Googleバッジのページ』のサイトを開きます。

推奨事項と禁止事項をしっかり読んでおきましょう

②『バッジを入手する』を表示

ページをスクロールするか、メニューの『バッジ作成ツール』をクリックすると、『バッジを入手する』が表示されます。

googleバッジ

③PlayストアURLを入力する

GooglePlayストアで対象のアプリを検索し、URLを取得しておきます。

②の画面の『PlayストアURL』に入力します。

今回は、妖怪ウォッチぷにぷにを埋め込むつもりなので、次のURLをPlayストアURLに入力してみましょう。

https://play.google.com/store/apps/details?id=com.Level5.YWP

↓このように、「マーケティングにこのHTMLバッジを含めます」という欄にリンクコードが表示されます。

googleバッジ2

④③で表示されたコードを埋め込む

表示されたコードはこちらです。

<a href=”https://play.google.com/store/apps/details?id=com.Level5.YWP&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1″><img alt=”Google Play で手に入れよう” src=”https://play.google.com/intl/ja/badges/images/generic/ja_badge_web_generic.png”/></a>

 

⑤プレビューで表示を確認してみてください

私も表示してみましたが、ちょっと(?)サイズが大きいので、iPhone用とサイズをそろえるために、imgタグにサイズを記載しておきましょう。

Google Play で手に入れよう
修正したタグ

<a href=”https://play.google.com/store/apps/details?id=com.Level5.YWP&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1″><img alt=”Google Play で手に入れよう” src=”https://play.google.com/intl/ja/badges/images/generic/ja_badge_web_generic.png”  width=”155″/></a>

 

修正後のイメージ

Google Play で手に入れよう

まとめ

せっかく誰かのためになる情報を提供するなら、少しでも使いやすい方が良いですよね。

リンクを貼るだけでなく、QRコードをつけるとか、より分かりやすいリンクにするとか。

 

これからも色々調べて、わかりやすいブログを作っていきたいです。

 

私がWordPessを勉強し始めたころから、愛用している本はこちらです。