WordPressにiOSアプリのアイコン付きアフィリエイトバナーを表示するスクリプトを作ってみたよ

WordPressに、iOSアプリのアフィリエイトバナーを貼る場合、以下のようなAppStoreのバッジリンクならば簡単に貼ることができますが、アイコン付きのバナーを貼ろうとすると苦労します。

 ← これは簡単に貼れる(アプリのアイコン無し)

道案内さん ← これを貼りたい(難しい)

iTunesアフィリエイトプログラムの Bunner Builder で出力されるアイコン付きのバナーは、JavaScriptで動的にiframeを差し込む方法で実装されています。Wordpressの記事にJavaScriptのコードを張り付けても動作しないため、残念ながらアイコン付きのバナーは表示されません。

そこで今回は、Wordpressでも簡単にアイコン付きのバナーを表示できるJavaScriptを書いてみましたよ。

AppStoreバッジ形式のバナーを、JavaScriptでアイコン付きのバナーに書き換える

まずは、iTunesアフィリエイトプログラムにログインして、ツールメニュー → Link Maker へと進みます。

紹介したいアプリを検索してアイコンをクリックすると、アフィリエイト用のバナーが表示されますので、そのバナーをWordpressの記事に貼り付けます。

Link Maker

赤枠内のコードを記事欄にコピペすれば、以下のようなバナーが表示されるようになります。このコードにはJavaScriptは含まれていませんので、Wordpressでも問題なく表示されます。

このアフィリエイトバナーには、アイコン付きバナーを表示するために必要な情報がすべて含まれていますので、JavaScriptを使ってアイコン付きのバナーに差し替えることにします。

作り方の詳細ははしょりまして、いきなりスクリプトを提示させていただきますが、以下のコードを実行すればアイコン付きバナーに切り替わります。
(スマホとパソコンで、バナーのサイズが自動的に変わるようになっています。)

※2016/12/18修正済

WordPressのテンプレートにこのスクリプトを追加しても良いのですが、今回は簡単に済ませるために、任意のJavascriptコードを追加できる「Enhancing JavaScript」というプラグインを使用してみました。

「Enhancing JavaScript」プラグインをインストールすると、外観メニューに「拡張javaScript」というメニューが追加されますので、それをクリックします。

編集ボックスに、上記のスクリプトをコピペして、「変更を保存」ボタンを押せば完了です。すべてのページにこのスクリプトが自動的に挿入されるようになります。

さて、先程のバナーを貼ったページを再読み込みすると、なんということでしょう、AppStoreの黒いバナーがアイコン付きに変わったではありませんか。(しかも日本語表記!)

 道案内さん

あ、このアプリ(道案内さん↑)は僕が作りましたのでご贔屓に(笑)

このスクリプトを使って、サクサクとアプリ紹介の記事を書いてくださいね。
お役に立てましたら幸いです。

スポンサーリンク
広告(大)
広告(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
広告(大)

コメント

  1. みなみ より:

    はじめまして質問ですが
    「Enhancing JavaScript」をインストールし上記のスクリプトをコピペし、
    「変更を保存」致しましたが記事下に表示するようにしたのですが
    (アプリのアイコン無し)でした。
    ご教授頂けましたら幸いです、宜しくお願いいたします。

    • bagooon より:

      ご質問くださいましてありがとうございます。
      LinkMakerが出力するURLの形式が変わったみたいです。
      15行目を以下のように書き換えてみてください。

      if (/https\:\/\/itunes\.apple\.com\/us\/app\//.test(url)) {
       ↓
      if (/https\:\/\/geo\.itunes\.apple\.com\/(jp|us)\/app\//.test(url)) {

      ※当ページのソースも書き換えました。

  2. みなみ より:

    ありがとうございました。
    無事に表示されるようになりました。