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

2016年11月17日

Wordpress テクノロジー 日記

Amazonアフェリエイトの商品リンクをブログに載せる時に、画像のみだと情報量が少なく、せめて商品名と値段ぐらいは見せたい。 そんな場合、どうしても縦長のiframeが生成されてしまう。 ↓こんな感じ。

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プラグイン風にカッコよく紹介する方法を考えてみた【サンプルつき】

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。