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アソシエイトに参加している場合、是非導入してみてください。

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

よく読まれている記事

エンジニア入門

2018/8/19

プログラミング初心者にRubyを強くオススメする理由

こんにちは、フリーエンジニアのてぃすです。 プログラミングを始めようと思った時にまず立ちはだかるのが、 どのプログラミング言語を選択するか という問題です。 Googleで『プログラミング おすすめ』や『プログラミング 初心者』などと調べてみても、 オススメプログラミング言語○選といった類の記事やサイトばかりで 結局何を勉強すればいいの? となってしまっていることでしょう。 そこで今回は、現在プログラマーとして働いている私から、これからプログラムを勉強したいという方に向け、国産プログラミング言語であるRu ...

続きを読む

エンジニア独立

2019/4/15

他のエンジニアと差をつけるための面談前の下準備

こんにちは、フリーエンジニアのてぃすです。 僕は正社員から派遣、フリーランスへと転身する際に、絶対に妥協したくないという意志の元、半年ほどの間に10件近くの面談を体験してきました。 今日はその時の体験を元に、エンジニアが面談を受ける前に下調べしておくべきコンテンツについて紹介していこうと思います。 なぜ下調べが必要か エンジニアって面談を軽視している人が多いんですよね。 ある程度の経歴があるエンジニアは、売り手市場であることも手伝い、まあまあ満足できる就業先を得られるのでそこまで面談対策をじっくりしている ...

続きを読む

エンジニア入門

2018/1/2

プログラマになるために資格は必要か

ここ最近のエンジニア需要増大に伴って、プログラマやエンジニアになりたいと考え始める人が周りにも増えてきました。 そんな時によく聞かれるのが「プログラマになろうとしたら、資格とか取ったほうがいいの?」という内容。 確かに、真っ黒な画面に向かってカタカタ英語や記号を打ち込んでいるTHE 専門職であるプログラマという職業には、何かしら資格が必要に思えるかもしれません。 今日はそんなプログラマ・エンジニアを目指していて、最初の一歩として資格取得を検討している人に向けてプログラマになるのに資格が必要かという疑問に応 ...

続きを読む

エンジニア入門

2018/8/19

プログラミング初心者に贈る挫折しない為の3つの心構え

こんにちは、フリーエンジニアのてぃすです。 最近では未経験者からプログラマー・エンジニアへの転身を志しプログラミングを学習を始めている人が増えていますね。 しかし理解出来ない部分が出てきたり、モチベーションを保てずに学習途中で挫折していまうという話も多く耳に入ってきます。 そこで今回は文系出身から職業プログラマーへ進んだ僕が、挫折しないプログラミング学習の進め方・心構えについてお話していこうと思います。 目的が具体的にイメージできる教材を使用する プログラミングの学習を始めて間もないときに、 変数に値を代 ...

続きを読む

エンジニア独立

2019/5/30

SIer・SESからWEB系エンジニアにキャリアチェンジする現実的な方法

エクセルで作らされる誰が読むかも分からないドキュメント 月に1回の帰社日 枯れた技術を言われた通りに扱うだけの毎日 スーツ勤務で下級労働者扱い SIer・SES系エンジニアとしての業務経験があり、かつ外の世界を知ったエンジニアから見たSIer・SES系のイメージってこんな感じですよね。 ここで言う外の世界の代表格と言えばWEB系ベンチャーやフリーランス。 カテゴライズの厳密さについては色々と意見はありますが、いわゆる自社サービスで利益を立てている企業と言えば分かりやすいでしょう。 最近ではエンジニアの待遇 ...

続きを読む

-WordPress

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