Amazonの商品情報をブログに表示させるプラグインは皆さん色々なものをお使いのようで、コレといった決め手がないようである。
このブログでも、amazonアソシエイトから直接取得したリンクコードを貼り付けているが、イマイチ野暮ったい表示となってしまう。
そこで以前からインストールしていたが使っていなかったwp-tmkm-amazonと、今回検索して使いやすそうだったAmazonJSを使ってみた。
インストール
wp-tmkm-amazonは以前インストールしたのだが、今はアップデートされていなかった。

図1:wp-tmkm-amazon 1.13ja
別の人が引き継いでアップデートしているようなので、インストールされていたwp-tmkm-amazon 1.13ja を削除して、最新のwp-tmkm-amazon 1.5bをインストールした。

図2:wp-tmkm-amazon-1.5b
いずれも『プラグイン』→『新規追加』から検索して、『いますぐインストール』から、そのまま簡単にインストールが出来る。

図3:AmazonJS
但し、AmazonJSのほうは、インストール後にwordpress/wp-content/cache/amazonjsディレクトリを作成して、権限を0777にする必要がある。
もし、上記のディレクトリを作成せずにAmazonJSの設定画面に行くと以下のような警告が表示される。

図4:AmazonJSのエラー表示
詳しくは、以下のAmazonJSの作者のブログを参照のこと。
『AmazonJS (WordPress Plugin) | kwLog』
設定項目
いずれも設定に必須なものは、以下の3つだ。
wp-tmkm-amazon | AmazonJS | 説明 |
アソシエイト ID | アソシエイトタグ | amazonアソシエイトのトラッキングID |
Access Key ID | アクセスキーID | amazonアソシエイトのProduct Advertising APIから取得するアクセスキー ID |
Secret Access Key | 秘密アクセスキー | amazonアソシエイトのProduct Advertising APIから取得するシークレットアクセスキー |
amazonアソシエイトのProduct Advertising APIから取得するアクセスキー IDとシークレットアクセスキーの取得方法は以下のブログで詳しく紹介されている。
『Access Key IDとSecret Access Keyの取得 – Amazon Web サービス』
設定項目で異なるのは、以下の点だ。
wp-tmkm-amazonではAmazon.co.jp専用で、決められた書式で表示される。

図5:wp-tmkm-amazon設定画面
AmazonJSではAmazon.co.jp以外にも対応しており、各サイトで取得したアソシエイトタグを設定できる。
また、AmazonJSでは『カスタムCSS』と『カスタムスクリプト』が選択できる。
それぞれ、以下のファイルを作成することで表示を変更することが出来る。
カスタムCSS | : | wordpress/wp-content/themes/twentyeleven/amazonjs.css |
カスタムスクリプト | : | wordpress/wp-content/themes/twentyeleven/amazonjs.js |

図6:AmazonJS設定画面
使用方法
wp-tmkm-amazonは『投稿の編集』ページの下のほうに検索フォームが表示されている。
そこでAmazonの商品を検索することが出来る。
検索結果にブログでAmazonの商品を表示させるためのタグ([tmkm-amazon]~[/tmkm-amazon])が表示されているので、このタグをコピーして、表示させたい箇所にペーストすればいい。

図7:wp-tmkm-amazon検索フォーム
AmazonJSは『投稿の編集』ページの上のほうに検索フォームへのアイコンが表示されている。
このアイコンをクリックすると検索フォームが表示される。

図8:AmazonJS検索フォームへのアイコン
この検索フォームでAmazonの商品を検索することが出来る。
検索結果から好きな商品の選択ボタンを押す。

図9:AmazonJS検索フォーム
すると、商品情報とブログでAmazonの商品を表示させるためのタグ([ amazonjs asin= ~ ])が表示されるので、挿入ボタンを押すとブログに表示コードが挿入される。

図10:AmazonJS検索結果と表示コード
表示結果
wp-tmkm-amazonは以下のように表示される。
[tmkm-amazon]479736758X[/tmkm-amazon]
AmazonJSは以下のように表示される。
普通にAmazonから取得したコードで表示すると以下のように表示される。
Categories: WordPress