[Wordpress] プラグイン「AmazonJS」を使ってアフェリエイトのUIデザイン向上

【注意】 Amazonアフェリエイトリンクの画像付きは、2023年１２月末で終了しました。 Amazonアフェリエイトの商品リンクをブログに載せる時に、画像のみだと情報量が少なく、せめて商品名と値段ぐらいは見せたい。 そんな場合、どうしても縦長のｉｆｒａｍｅが生成されてしまう。 ↓こんな感じ。 ※画像リンクは終了しました。

WordPressプラグイン「AmazonJS」を使用

WordPressのプラグインで検索するとすぐに表示されるので、インストールは簡単だ。 インストール後、すぐにプラグインを有効にする。 ここまでは、何も考えていなくてもすぐにできてしまう。 電車の中でスマホででもできてしまう。 ただ、これだけでは、何の変更もされないので、以下の作業をしなくてはいけない。

設定方法

amazonjsフォルダを作成

wordpress管理画面サーバーにsshログインして以下のコマンドを実行 $mkdir %wordpress%/wp-contents/cache/amazonjs $chmod 777 %wordpress%/wp-contents/cache/amazonjs %wordpress%は各自の環境に合わせてください。

AmazonAPIアカウントの作成

通常のAmazonアカウントと違うので、AmazonAPIのアカウントを作成※新規登録が必要かもしれません。 Product Advertising API サイト名またはドメインなどを入力 規約承認の為のチェックボックスをクリック セキュリティテキスト入力 文中にあるリンクをクリックして、

wordpress管理画面操作

設定 - AmazonJS　を開く。 ※各種エラーが出ていたら画面の指示に従ってください。 「アクセスキーID」と「シークレットアクセスキー」をAWS管理画面から取得して入力 「Amazon.co.jp」にアフェリエイトIDを入力 これで保存すると初期設定は完了。

記事内操作

記事作成の画面に上部にAmazonボタンが表示されています。 ボタンをクリックして商品検索したり、URLを入力すると、下記のようなバナーになる。

[amazonjs asin="B00LIZD8N2" locale="JP" title="【国内正規品】 PLANTRONICS Bluetooth スポーツ用ワイヤレスヘッドセット(ステレオイヤホンタイプ) BackBeat Fit Blue BACKBEATFIT-BL"]

※スミマセン・・・2022年の現在このプラグインは仕様していません。

参考リンク

ここのページに図入りで書かれていたので非常によく理解できた。非常にThanks!! http://easyramble.com/wordpress-amazon-js-plugin.html 今までAmazonのリンクがイケてなかったので、かなりゲンナリしていたのだ・・・！！！ ほかにもググっていたら下記のようなページがあった。 こちらも興味ありですな。 CSSだけでAmazon商品をAmazonJSプラグイン風にカッコよく紹介する方法を考えてみた【サンプルつき】