読者です 読者をやめる 読者になる 読者になる

社会の狭間でニートを叫ぶ

最終学歴中卒、高等学校を2回中退。ゲーム暦20年、ニート暦4年。美しすぎる経歴のナウなヤングが送る雑記。

【はてなブログ】LinkMaker産iTunesアフィリンクを貼るのに試行錯誤した話

どうも、駆け出しブロガー、hkmです。

このご時世、スマホアプリについての言及は避けられない。

どうせ紹介するなら今のうちに、iTunesアフィリエイトに登録しておこう。

そんな調子で登録しまして、いざリンクを貼る段階になったんです。

はてなでリンクを貼る手段は主に二つ。

  • はてなブログで用意されたテンプレート
  • Apple側が用意した、LinkMakerというツール

Webサイト構築に精通していれば他にも色々あるでしょう。

ただ、こちとら初心者も初心者。

門外漢はhtmlタグを用意して貰う必要があります。

 

で、はてなブログで用意されたテンプレートではiOS版のリンクしか貼れません。

Android版アプリのリンクも貼りたいhkmさんは、LinkMakerでバナーを用意するしかあるまい。

……なんですが。するとどうでしょう。

バナーが表示されない、というか貼れない

結果、解決するまでに10時間ほど頭を悩ませる結果となりましたので、記事にしておきます。

画像多用のため注意

iTunesアフィリエイト

そもそもiTunesにアフィリエイトプログラムあったんだね、と。

iTunes - アフィリエイトプログラム - Apple(日本)

簡単に言えば、AmazonアソシエイトのiTunes版です。
クッキー保存して、課金が発生すれば報酬が発生するのかな?

実際どうなるかはちょっとウチのPV数じゃ調べようが無いんだけども。


今すぐ申し込む

f:id:hkmy:20170218185829p:plain


プログラムに申し込む

f:id:hkmy:20170218185856p:plain

 

ちなみに、ここでも当方ひっかかりまして
環境によってはWebサイトのレスポンスが無いようで。

f:id:hkmy:20170218185919p:plain

▲こんな画面が出ます

うちの場合はパソコンが原因でした。

タブレット(IpadAir2)からアクセスして事なきを得たよね。

 

登録申請して、数日待つと審査結果が送られてきます。

Proにもしてない、記事数少ない(20記事程度)当ブログでも承認されたので、よほどの事がなければ大丈夫でしょう。

リンクを貼る

さて、ここからが本題。

つかみの文で説明したように、簡単にリンクを貼るのであれば

  • はてなブログで用意されたテンプレート
  • Apple側が用意した、LinkMakerというツール

このどちらかを頼ることになります。

 

はてなブログで用意されたテンプレート

まず、はてなブログでiTunesアフィリエイトを利用しようと調べると、最初に見つかるであろうものがコレ。

 

ダッシュボードの「アカウント設定」からアフィリエイトトークンを設定すると、iTunes商品紹介機能のリンクが運営者のアフィリエイトリンクになるものです。

f:id:hkmy:20170218191513p:plain

▲どうせリンクにくっつくから隠す意味は無い

 

設定しないとはてな運営のアフィリエイトリンクになるとのこと。

 

アフィリエイトトークンは、承認時のメールの他、iTunesアフィリエイトのホーム画面右上にも表示されています。

f:id:hkmy:20170218223614p:plain

 

ここを設定すれば、あとは記事ページの右にある「追加」ボタンから「iTunes商品紹介」をオンにして、

f:id:hkmy:20170218191949p:plain

 検索窓にキーワードを入力。

 

プルダウンメニューからジャンル

(アプリの場合はApp Store - iPhone/iPod touchがオススメ)

を選び、貼りたいアプリを選択して「選択したアイテムを貼り付け」をクリック。

f:id:hkmy:20170218192413p:plain

 

これで、はてなの総力を結集したハイパーオシャンティリンクがアナタのものになります。

 

実際の表示は 

お尻太もも運動 無料

お尻太もも運動 無料

  • App And Away Studios LLP
  • ヘルスケア/フィットネス
  • 無料

こんな感じ。

 

シンプルでわかりやすいデザイン。

なるほど、どんな記事にもマッチするぜ!!!さすがはてな!!!!!!!

 

で、Androidは?

 

そう、何を隠そう、アンドロイドアプリへのリンクを貼る機能がありません。

 

どうしても商業開発のマンガアプリだとか、ゲームアプリだとかを紹介したい。

そうなるとAppStoreだけ、というのは気になる。

 

僕も実際タブレットはiOSなものの、スマホはAndroidおじさんなのです。

 

となると、もう一つ。

appleが用意してくれた、LinkMakerなるツールを使ってバナーリンクを貼ろう。

playストアにもどうせ似たようなのあるだろ。

バナー並べとこう。

 

hkmさんはそう考えました。

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

▲理想はこういう形

LinkMaker

さて、ようやく本題

 

LinkMakerとはappleが用意しているツールで、その名の通りリンクをメイクしてくれるものです。

 

利用するには、iTunesアフィリエイトプログラムへログイン後、

上部メニューのツールから「Apple Music Toolbox」を選択。

f:id:hkmy:20170218195226p:plain

 

音楽を紹介する「Apple Music マーケティングツール」のページが開くので、

右上リンクより「LinkMaker」へジャンプします。

f:id:hkmy:20170218200550p:plain

 

直リンク

iTunes Link Maker

からでも飛べます。

 

で、LinkMakerまでたどりついたら、

Media Typeを適当なものに。(アプリならApp)

ストア国を「日本」に。

検索窓に、アプリ名を入力して、該当アプリのアイコンをクリックします。

 

f:id:hkmy:20170218201222p:plain

 

すると、紹介用のhtmlコードが表示されます。

ここで、大きいバッジ(バナー)だったり、テキストだったり、小さいバッジだったり。

キャンペーン・トークンの入力だったり、といった設定も行えます。

 

あとはここから埋め込みコードを記事にコピーペーストすれば貼り付け完了!

お疲れ様でした!

 

のはずだったんですよ。

 

ここからが問題です。

 

というのもこのLinkMaker産のリンク、

今回のお尻なんちゃらってアプリですと、

<a href="https://itunes.apple.com/jp/app/%E3%81%8A%E5%B0%BB%E5%A4%AA%E3%82%82%E3%82%82%E9%81%8B%E5%8B%95-%E7%84%A1%E6%96%99/id545256645?mt=8&at=1000lumt" style="display:inline-block;overflow:hidden;background:url(//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg) no-repeat;width:135px;height:40px;background-size:contain;"></a>

こういうソースでして。

 

<前者></後者>の間に何も無く、前者に情報を付与してバナーを表示させるものなんです。

 

普通ならこれでいいんですよ。多分貼れるんですよ。

 

でも、はてなブログ。

 

何にも適用されてないから掃除しておくわよ!ありがたく思いなさいよね!

 

といわんばかりに、勝手に消去します。このコード。

ソースにゴミが残りにくい非常にありがたい機能なのですが、ことこのコードを貼る場合に限って言えばウ○コ機能な訳ですよ。

 

なのでこのコードを弄る必要がある。

 

ただこちとら初心者さんで、使えるコードには限界がある。

 

結果として普通に、<リンク><バナー></リンク>の形でとりあえずお茶を濁す、というのがこの記事の趣旨です。

 

ここまでで3000文字。ごめん。

でもこの結論に至るまで、5時間くらいかかったからゆるして。

 

貼れる形に改変する

さて、上記の<リンク><バナー></リンク>という形にしたい。

 

取っ掛かりを作るためにも、コードを無理やり読んでみましょう。

<a href="https://itunes.apple.com/jp/app/%E3%81%8A%E5%B0%BB%E5%A4%AA%E3%82%82%E3%82%82%E9%81%8B%E5%8B%95-%E7%84%A1%E6%96%99/id545256645?mt=8&at=1000lumt" style="display:inline-block;overflow:hidden;background:url(//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg) no-repeat;width:135px;height:40px;background-size:contain;"></a>

専門知識なんて無いので、とりあえず英単語から意味を拾っていくと

 

サイズが

width:135px;height:40px

http://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg

に対して

https://itunes.apple.com/jp/app/%E3%81%8A%E5%B0%BB%E5%A4%AA%E3%
82%82%E3%82%82%E9%81%8B%E5%8B%95%E7%84%A1%E6%96%99/
id545256645?mt=8&at=1000lumt

へジャンプするリンクを貼り付けるよ

 

って所でしょうか。

1000lumt」がうちのアフィリエイトトークンですね。

 

実際に

http://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg

を開くと

▲指定しなくても縦40っぽい

こんな感じ。

 

 

日本語のバナーですが、「ja-jp」とかいういかにも日本語っぽい場所を弄れば言語は変えられるはず。

どうせ英語は「en-us」とかだろ。多分。

 ▲en-usとかだった

 

ここさえわかれば、これにリンクを貼るだけです。

LinkMakerのコード表示ページから「テキストリンク」を選択して、文字部分を変更するとか。

「直リンク」のURLをコピーして、エディタでリンクを貼り付けるとか。

 

こうすることで、なんとかAppStoreへのアフィリンクをバッジで貼る事ができます。

 

いやー、よかったよかった。一件落着。

 

とは行きませんでした

もうちょっとだけ続くんじゃ。

 

googleさん?そのバナーは何かしら?

そもそもの動機として、Androidのプレイストアからのバナーを横に並べて表示したかったんですよ。

 

そうでもなければ

お尻太もも運動 無料

お尻太もも運動 無料

  • App And Away Studios LLP
  • ヘルスケア/フィットネス
  • 無料

コレでいい訳ですし。

 

楽だし早いしオシャンティ。

 

ということで、googleさんの同じようなバナーを貼るわけですよ。

 

こちらに関してはアフィリエイトプログラムもないので、

Google Play Badges – Google

こちらのGoogle Play Badgesなるツールを使うんですね。

日本語版は見つかりませんでしたので、英語版で。

 

下の方へスクロールすると、Get your badgeの表記と共に入力画面があります。

そこへ、

Language:(言語)
Deliverable Type:(使うメディア?英語わからんからデフォルトで)
File Type:(ファイルの種類、PNGしか知らないのでPNGで)
UTM Source:(アナリティクスの奴?)
UTM Campaign:(同上)
Play Store URL:(アプリや検索結果のURL)

を入力、

Include this HTML badge in your marketing:

に出てきたhtmlコードをコピーします。

すると、こんな感じ。

Google Play で手に入れよう

 

▲デカい 

おい、気は確かか。

サイズの統一

今のままでは

Google Play で手に入れよう
こうなってしまいますので、最後の締めとしてサイズを統一していきます。

 

といっても、先ほどのコードから 

width:135px;height:40px

であることは判っていますので、横に並べるならheight揃えとけばいいでしょう。

 

いやあ、長かった。

これでようやくアプリの紹介ができますね。

 

Google Play で手に入れよう

 

 

画像に余白が含まれてるんだよな~~

これな~~

 

で、色々試行錯誤すると、プレイストアの方を

height:60 にすると丁度良さそう。

 

Google Play で手に入れよう

このままではgoogle側の余白で上下左右にズレるので、

AppStore側の画像に「hspace="10" vspace="10"」と追記。

 

つまり画像を表すコードは

<img src="http://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="[画像の説明]" hspace="10" vspace="10"/>

こんな感じ。

 

デフォルトでの説明は

<img src="http://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="AppStoreで入手" height="40" hspace="10" vspace="10" />

多分こう。

 

 

画像の上下左右に10pxスペース作りますよー!って事ですね。

(60-40)/2=10ってことで。

 

ここまで設定するとようやく、

Google Play で手に入れよう

 

こんな感じになります。

 

いやー、長かった。

まとめ

AppStore

<img src="http://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="AppStoreで入手" height="40" hspace="10" vspace="10" />

に対して、

iTunes Link Makerで作ったアドレスでリンクを貼る。

GooglePlay

Google Play Badges – Google

で作ったリンクに、

height="60"

属性を付与する。

例:

<a href='https://play.google.com/store?pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Google Play で手に入れよう' src='https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png'/  height="60"  /></a>

 

以上、hkmさんの試行錯誤の記録でした。

 

多分もっとスマートな方法があるんだろうけど、新規さんにはこれが精一杯。

 

あと関係ないんだけどさ、はてなさん、URLへ勝手にリンク貼るのもやめて欲しいよね。

社会の狭間でニートを叫ぶ