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/4/15

【2019年版】現役フリーランスエンジニアがオススメするフリーランスエージェント4選

どうも、フリーランスエンジニアのてぃすです。 僕は正社員時代の月収は20万円を切るくらいだったのですが、独立したことで同じ労働時間で月100万円をキープできるようになりました。 現在はちょっと働く時間を減らして週3リモートで月70万円で働いていますが、このくらいのバランスもストレスが少なく、快適な日々を過ごすことができています。 そんな感じで独立から1年以上が経過し、わかったことがあります。 ITエンジニアは今の相場から考えれば、フリーランスになった方が圧倒的に得だなということです。 もちろん正社員ディス ...

続きを読む

エンジニア独立

2019/5/29

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

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

続きを読む

エンジニア独立

2019/4/26

プログラマー・エンジニアが情報発信をするべき2つの理由

こんにちは。フリーエンジニアのてぃすです。 プログラマー・ITエンジニアとして働いている人が、SNSやブログで積極的に技術的なTipsや働き方に関する考え方を発信しているのをよく見ると思います。 情報発信をしたことのない人からすると、なんでそんな一銭の得にもならない行為をやっているのか、という疑問も湧いてくるでしょう。 知っている人は知っていることですが、エンジニアにとって情報発信ってすごいメリットがある行為なんです。 そこで今日はプログラマー・ITエンジニアが今すぐにでも情報発信を始めるべき2つの理由を ...

続きを読む

エンジニア独立

2019/4/15

エンジニアがキャリアアップするための3つのテクニック

こんにちは、フリーランスエンジニアのてぃすです。 エンジニアという職業の中でも高収入とライフワークバランスを実現して充実した人生を送っている人もいれば、低い給料と長時間労働で疲弊しきっている人もいます。 僕も半年前まではエンジニアという職業を見限ってしまおうかと真剣に考えるほど、残念な状況にいました。 しかしこのまま終わってしまうのは悔しいと思い一念発起して行動を起こし、半年の間に月収を3倍以上あげることに成功しました。自分言ってて胡散臭い話ですが、実体験です。 キャリア向上を目指した行動の中には、意識し ...

続きを読む

エンジニア独立

2019/5/30

中小SESに入社するなら、派遣エンジニアになった方が100倍幸せになれるというお話

こんにちは。フリーランスエンジニアのてぃすです。 僕はこれまで、 中小SES正社員 派遣エンジニア フリーランスエンジニア として活動してきましたが、その中で中小SESで正社員として働いていたときが、最も得るものが少なかった期間であったと確信しております。 給与・自分の時間・キャリア・経験のどれを取っても得られるものが少なく、エンジニアとして働く中で第三者に搾取される割合が最も多い働き方です。 そこで今回は僕がこれまでキャリアを積む中で確信した中小SESに入社するなら、派遣エンジニアになった方が幸せになれ ...

続きを読む

-WordPress

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