• HOME
  • BLOG
  • Web制作
  • WordPressでAmazonアソシエイトリンクを記事内にかんたんに設置できるプラグイン「AmazonJS」

WordPressでAmazonアソシエイトリンクを記事内にかんたんに設置できるプラグイン「AmazonJS」

WordPressで作っているブログの中にAmazonアソシエイトのリンクを貼ろうとすると、商品を探してきてリンクを生成するのがちょっとめんどうだったり、Amazonアソシエイトで用意されているリンクウィジェットが「いかにも」でちょっとなぁと思っていたのですが、それを解決できる便利なプラグインがあったので設置してみました。設置や設定をメモしておきます(FTPソフト使ったりするので、ちょっと難しめです)。

設置できるリンクのイメージ

このプラグインを使うと、こんな感じのリンクが設置できるようになります。
10-11-2013_cap-11

使用するプラグイン

こちらのプラグインを使います。

Amazon JS

WordPress › Amazon JS « WordPress Plugins
[browser-shot url=”http://wordpress.org/plugins/amazonjs/” width=”610px”]

まず、プラグインを使えるようにします。
プラグインをWordPressにインストールして、
10 11 2013 cap 20
10 11 2013 cap 19

有効化します。
10 11 2013 cap 18

WordPressの管理画面の[設定]>[AmazonJS]を開いて、設定画面を開きます。
10 11 2013 cap 07

10 11 2013 cap 08

キャッシュディレクトリを作成する

そのAmazonJSの設定画面の一番上に「警告」が表示されているので、まずこれを解決します。
10 11 2013 cap 03

プラグイン開発者の方のサイトに書いてある手順で進めていきます。
AmazonJS (WordPress Plugin) | kwLog

プラグインのインストール
2. キャッシュディレクトリの作成
wp-content/cache/amazonjsディレクトリを作成して、権限を0777にします。
FTPソフトなどをお使いください。
10 11 2013 cap 02

これで解決です。

Product Advertising APIの設定

次に、「AmazonJS」の設定画面にある「Product Advertising API」の設定をします。
10 11 2013 cap 06

ここに入力するためのアクセスキーIDと秘密アクセスキーを取得します。

まず、Amazonの「Product Advertising API」のページを開いて、「アカウントを作成」ボタンをクリックします。
Product Advertising API

10 11 2013 cap 28

アカウントの作成手順はこちらに書いてあるので、このとおりに進めていきます。
Amazon アソシエイト(アフィリエイト) – ヘルプ

Amazon.com(Amazon.co.jpのアカウントは使えないようです)のアカウントを持っていない場合は新規で作成し、持っている場合はサインインします(Amazon.comアカウント新規作成の手順はここでは省略します)。
10 11 2013 cap 01

アカウント情報を聞かれるので、入力します。
10 11 2013 cap 14

登録が完了したら、「Manage Your Account」リンクをクリックして、アカウント管理画面を開きます。
10 11 2013 cap 13

アカウント管理画面が開いたら、「アクセスキー情報」の「こちらのリンク」をクリックします。
10 11 2013 cap 12

amazon web servicesの画面が開くので、「アクセス証明書」をクリック。
10 11 2013 cap 15

アクセスキーIDが表示されるので、これを一旦どこかにコピペしてメモっておきます。そして、シークレットアクセスキーの「表示」をクリックします。
10 11 2013 cap 16

シークレットアクセスキー(秘密アクセスキー)が表示されるので、これもコピペしてメモっておきます。
10 11 2013 cap 29

先ほどメモっておいたアクセスキーIDとシークレットアクセスキーを、AmazonJS設定画面の該当開所に入力して「変更を保存」ボタンをクリックします。
10 11 2013 cap 06

これでProduct Advertising APIの設定は完了です。

アソシエイトタグの設定

設定画面を開いたついでに、Amazonアソシエイトタグの設定もしておきます。
「アソシエイトタグの設定」の「Amazon.co.jp」のところに、アソシエイトタグを入力すればOKです。
10 11 2013 cap 05

Amazonアソシエイトのアカウントを持っていない場合は、下記ページの「無料アカウント作成」から作成できます。
Amazonアソシエイト(アフィリエイト)プログラムに参加しよう!

投稿画面での使いかた

次に、実際に記事内にAmazonリンクを掲載します。
投稿画面を開くとAnazonアイコンが表示されるようになるので、これをクリックします。
10 11 2013 cap 27

ポップアップで「Amazonリンクを追加」画面が開くので、掲載したい商品のキーワードを入力して、「検索」をクリックします。
10 11 2013 cap 26

検索結果が表示されるので、掲載したい商品の「選択」ボタンをクリック。
10 11 2013 cap 25

掲載するテンプレートを選んで、「挿入」ボタンをクリックします。下の方にプレビューとショートコードも表示されます。
10 11 2013 cap 23

すると、ショートコードが記事内に入りますので、あとは普通に記事を投稿すればOKです。
10 11 2013 cap 21

こんな感じで、記事の中に掲載できます。
10 11 2013 cap 11

テンプレートの種類

「デフォルト」テンプレートを使うと商品の画像や商品名などのいろいろな情報が掲載できますが、商品名だけ、とか、商品画像だけ、とかも挿入できます。

たとえば、「タイトル」を選ぶとリンク付きの商品名だけ、
10 11 2013 cap 24

画像を選ぶと、商品画像+リンクで記事の中に掲載できます。
10 11 2013 cap 22

スタイルの変更方法

テンプレートの見ためを調整したいときは、CSSを書き換えることもできます。

[AmazonJS]の管理画面で「カスタムCSSを使用する」にチェックを入れて、「変更を保存」ボタンをクリックし、
10 11 2013 cap 04

そこに書いてあるパス(使用しているWordPressテーマディレクトリの直下)にFTPで「amazonjs.css(空のCSSファイル)」をアップします。
10 11 2013 cap 10

そうすると、WordPressの管理画面の[外観]>[テーマ編集]から「amazonjs.css」を開いてスタイルを編集できるようになります。
10 11 2013 cap 17

参考にさせていただきました

こちらのページも参考にさせていただきました。ありがとうございます!
WordPressでAmazonのアソシエイトリンクを設置する | Webクリエイターネット
WordPressプラグインでAmazonアフィリエイトを簡単に設置する – ハナモゲラボ / 試行錯誤のPC人生

まとめ

Amazonアソシエイトのウィジェットの見ためがちょっと好みじゃなかったことや、Amazonのページを開いて商品を探すのがちょっとめんどうだったので、これで記事の中に掲載しやすくなってよかったです。WordPressはプラグインを使うと大抵のことは解決できて便利だなぁと、つくづく思いました(プラグイン開発者の方のおかげです、ありがとうございます!)。

WEB制作・開発、iPhoneアプリ、DTMなどのTipsやメモを書いています。

関連記事