TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

WordPress

WordPressにAmazonJSプラグインを導入

更新日:

AmazonJSプラグインはブログ内にAmazonアソシエイトの広告を配置する際の

手順を簡略化してくれて、さらに見た目もスタイリッシュに変更してくれるプラグインです。

ちなみに見た目はこれが

こうなります。

 

今回はそんなAmazonJSの導入までの手順を解説させていただきます。

ちょっと長くなりますが、よろしければお付き合いください。

 

前提となるAmazonアソシエイトへの登録については

https://tisnote.com/wordpress-amazon-affiliate/

をご覧ください。

 

1.Amazon Product Advertising APIへのアカウント登録

AmazonJSを使用するにはAmazon Product Advertising APIへのアカウント登録が必要となります。

※こちらのアカウントはAmazonアソシエイトのアカウントとは別物になります。

 

下記リンクにアクセスすると

Product Advertising API

このような画面が表示されますので、『アカウント作成』をクリックしてください。

Amazon-Product-Advertising-API-Top

 

アカウント作成をクリックすると、Amazonのログイン画面に遷移します。

 

ちょっとこの辺りのアカウントの関わりがややこしいです。

ログインページの『E-mail or mobile number:』に

Amazonアソシエイトで使用したメールアドレスを入力し

I am a new customerを選択し、

『Sign in using our secure server』ボタンをクリックしましょう。

amazon-login

 

アカウント情報を入力していきます。

入力内容は下記の通りです。

My name is:⇒英語サイトですので名・姓の順で自身の名前を入力してください。(例:Taro Suzuki)

My e-mail address is:⇒ここは初期入力で前の画面で入力したメールアドレスが表示されているのでそのままで。

Type it again:⇒上で入力したものと同じメールアドレスを入力してください。

Enter a new password:⇒任意のパスワードを入力してください。

Type it again:⇒上で入力したパスワードを再入力してください。

 

入力が完了したら、『Create account』をクリックしましょう。

create-account

引き続きアカウント情報を入力していきましょう。

赤枠の部分を入力すればOKです。各入力内容は下記の通りです。

いずれも英語で入力する必要があるので、住所の英語変換サービスなどを使用して進めていってください。

Address Line 1⇒自分の住所の市町村より後の部分を入力してください。(例:1-XX-1, Ebisu)

City⇒自分の住所の市区町村を入力してください。

ZIP or Postal Codeya⇒郵便番号をハイフン入りで入力してください。

Country⇒国を選択してください。

Phone Number⇒電話番号を入力してください。こちらはハイフン不要のようです。

Website or Application Description⇒Webサイトの情報を入力するそうですが、私は『AmazonJS』とだけ入力し、先に進めました。

account-info-name

 

下のほうにスクロールし、

ライセンス契約を読み、同意できれば

規約の下にあるチェックボックスを選択し、

セキュリティチェックの文字を入力し、

『Complete Registration』をクリックしてください。

 

complete-registration

 

以上でアカウントの登録が完了となります。

そのまま完了画面から『Manage Your Account』をクリックしましょう。

complete-account

完了ページを一度閉じた場合、

Product Advertising APIトップページ

の『リソース内』の『アカウント設定』をクリックすることでも同様の画面に移動できます。

setting-account

 

移動したページ内の『アクセスキー情報』の『こちらのリンク』をクリックしてください。

this-link

 

ログイン画面が表示されますので、これまでの手順で作成したアカウントでログインしてください。

login

 

セキュリティに関するポップアップが出ますので、『セキュリティ認証情報に進む』をクリックしましょう。

security-check

 

『アクセスキー(アクセスキー ID とシークレットアクセスキー)』をクリックし、

accesskey-info

 

すると下記のように画面が変化しますので、『新しいアクセスキーの作成』をクリックしてください。

create-accesskey

 

するとアクセスキー作成完了のポップアップが表示されます。

このポップアップにおいてキーファイルのダウンロードをしておきましょう。『キーファイルのダウンロード』をクリック。

ここでダウンロードした『rootkey.csv』というファイルは以降の設定で必要となります。

download-key

 

2.AmazonJSのインストール/有効化

アカウントの登録とアクセスキーの取得が完了しましたので、

AmazonJSプラグインのインストールと有効化を行います。

 

WordPressのダッシュボードのプラグインを選択し

side-plugin

『新規追加』をクリック。

add-plugin

検索ワードに『Amazon JS』を入力し、Enterキーを押しましょう。

search-plugin

一番上におめあてのAmazon JSが表示されますので、『インストール』をクリックしてください。

plugin-install

インストールが完了したら、『プラグインを有効化』をクリック。

activation

 

3.AmazonJSの設定

AmazonJSプラグインの有効化を行うと、

WordPressダッシュボードの設定の中に『AmazonJS』という項目が追加されていますので、こちらをクリックしてください。

side-amazonjs

 

AmazonJSの設定画面に移動しますので必要な設定項目を入力していきます。

Amazon Product Advertising APIへのアカウント登録の手順の最後でダウンロードしたキーファイルを開くと

AWSAccessKeyId=XXXXXXXXXXXXXXXX

AWSSecretKey=XXXXXXXXXXXXX

という記述があると思います。

それぞれ入力項目の

アクセスキーIDにAWSAccessKeyIdの=以降を

シークレットアクセスキーにAWSSecretKeyの=以降を

入力してください。

そしてAmazon.co.jpの入力箇所に

Amazonアソシエイトの管理画面で確認できるトラッキングIDを入力してください。

setting-amazonjs

 

必要な場合、オプションのチェックボックスを選択し、『変更を保存』をクリックしてください。

save-amazonjs

 

以上で設定が完了となります。

 

4.Amazon JSを使用する。

では実際にAmazon JSを使用して、投稿記事内にAmazonアソシエイトのリンクを表示させてみましょう。

Amazon JSの設定が完了すると、記事投稿画面にAmazonのアイコンを模したボタンが追加されているかと思います。

using-amazonjs

 

リンクを追加したい箇所でこのボタンをクリックしましょう。

するとAmazonリンクの設定用ポップアップが表示されます。

リンクを表示したい商品に関するキーワードを入力し、『検索』ボタンをクリックしてください。

search-amazonjs

 

表示させたい商品がヒットしたらその商品の『選択』ボタンをクリックしてください。

choice-amazonjs

 

設定が完了したら、『挿入』ボタンをクリックしましょう。今回はデフォルトで進めていきます。

insert-amazonjs

 

こんな感じでリンクが表示されます。

こちら投稿モードは『テキスト』でも『ビジュアル』のどちらでも大丈夫なようです。

 

AmazonJS導入前のリンクと比べるとかなり素敵な感じになりましたね。

 

これまでの手順は下記のサイトを参考にさせていただきました。ありがとうございます!

WordPressでアマゾン・アソシエイトを簡単設定!Amazon JSプラグイン

 

まとめ

 

いかがだったでしょうか。

登録や設定は結構手間がかかりますが、

一度それらが完了すれば、記事内に綺麗な商品リンクを簡単に配置することができるようになります。

Amazonアソシエイトに参加している場合、是非導入してみてください。

ありがとうございました。

よく読まれている記事

エンジニア独立

2019/5/29

プログラマーという働き方を見限る前に見ておくべき記事

プログラマーとかSEってちょっと前まで最先端の働き方って感じで世間でもてはやされていましたが、今ではブラック業界の代表格と言われるようになっていますよね。エリート社畜の巣窟とか。 実際SIer系の案件であったり、システム会社を名乗る派遣企業によって希望を持って入ってきた若者が食いつぶされてきたわけですから、当然の帰結ともいえます。 実際僕がこれまで正社員として働いてきた会社も、みなし残業という名の残業未払いであったり、都内にも関わらず勤続2年目で手取り17万円とかいう扱いを平気でやってきました。鬼畜の所業 ...

続きを読む

エンジニア独立

2019/4/15

自分の市場価値を把握しようとしないエンジニアは搾取される

こんにちは。フリーランスエンジニアのてぃすです。 エンジニア需要の高まり、待遇の向上からエンジニア・プログラマを目指す人が急増してきている昨今。 確かにエンジニアという職業はこれから高収入・柔軟な働き方を目指そうとした時に、最も適切な選択肢です。 そんな高収入かつ将来性のある職業であるエンジニアですが、自分のエンジニアとしての市場価値を知っておかないと、本来得られるはずの収入よりも少ない額で働くことになる可能性があります。それでも中小企業のサラリーマンよりは稼げますが。 今回は何故市場価値を把握しようとし ...

続きを読む

エンジニア独立

2019/5/29

エンジニアの強い味方、フリーランスエージェントとは?

このブログで度々登場する単語であるフリーランスエージェント。 これまで正社員として企業に所属してきたエンジニアにとっては馴染みのない単語だと思います。 なんとなく案件を紹介してくれるサービスだろう。 食べログの飲食店が案件に変わったようなものだろう。 派遣の意識高い系なのだろう。 くらいの印象の方もいらっしゃるかも知れません。 そこで今回はエンジニアにとって、フリーランスエージェントとは何者なのか、利用することによってどんなメリットがあるのかについて説明していこうと思います。 理屈はいいからどのエージェン ...

続きを読む

エンジニア独立

2018/1/27

エンジニアは報酬・やりがい・成長機会の全てを求めるべき

こんにちは。フリーエンジニアのてぃすです。 僕は働く上で大事な要素となるのは以下の3つであると考えています。 報酬(給与)の額 やりがい 成長機会 で、これは僕のようなエンジニアという職業だと更に重要度が増します。 人手不足・需要拡大の影響もあり、事務や営業などといった非専門的な職業と比べて、選択次第で高収入を目指しやすくなっていますし、キャリア構築の重要性も他の職業よりも高いですからね。 自分の貢献した結果にふさわしい報酬を受け取りたい。 1日8時間、人生の大部分を働くことに費やすことがほとんどのわけで ...

続きを読む

エンジニア入門

2019/4/15

エンジニアは勉強し続けなければいけない職業なのか

こんにちは。フリーランスエンジニアのてぃすです。 最近は就職・転職する際にエンジニアを選択肢に含める人が増えてきています。 しかしエンジニアという職業を候補にあげるにあたって、 エンジニアは働きながら勉強し続けなければいけないのではないか? という疑問もよく見聞きします。 そこで今回はフリーランスエンジニアとして活動している僕の視点からこの疑問についての答えを説明していこうと思います。 結論 先に結論を述べると、 エンジニアは勉強し続けなければいけないのか? という疑問の答えはNOです。 決してエンジニア ...

続きを読む

-WordPress

Copyright© TIS ENGINEER NOTE , 2019 All Rights Reserved Powered by AFFINGER5.