TIS ENGINEER NOTE

27才文系出身フリーランスエンジニアのブログ

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/1/13

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

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

続きを読む

エンジニア独立

2018/1/13

エンジニア派遣でキャリアを積んで高収入を目指す

エンジニアとして採用面談を受けたことのある人なら分かると思うのですが、面談の時に最も重要視されるポイントは業務経験です。 もちろん普段の個人学習や、技術への関心などでフォローできる面もありますが、一番見られるのはどんな技術を使って、どんな業務を行ってきたかという点なんですよね。 採用する側もプロダクトの正否を左右する立場として責任を負っているわけですから当然です。 そんな時、良質な職務経験をどのように積むことができるか、というのがポイントになってきます。 今回はキャリア構築のための、派遣エンジニアという選 ...

続きを読む

エンジニア独立

2018/7/24

フリーランスエンジニアとして働くことの実情

こんにちは、フリーランスエンジニアのてぃすです。 最近は本業が忙しくブログの更新が滞っておりました。更新を楽しみにしてくださった方々、申し訳ありませんでした。 今後もエンジニアにとって有益な情報を提供できるよう更新を再開していこうと思いますので、引き続きよろしくお願いいたします。 フリーランスエンジニアの実情 このブログではフリーランスエンジニアとして働くことの利点や、実際にどのようなステップでフリーランスエンジニアになるかについての記事をなんども書いてきました。 しかし実際にフリーランスエンジニアとして ...

続きを読む

エンジニア独立

2018/1/27

エンジニア歴2年の僕がギークスジョブでフリーランスを目指してみた

ぼちぼちの偏差値の文系大学を卒業後、パッケージ運用系のIT企業に就職。9か月で退職。 その後特定派遣会社の正社員として働いてきた僕がなぜフリーランスを目指す気になったのか。 一番の理由はズバリ、お金が稼ぎたかったから。 正確にはもっと効率よくお金を稼ぎたかったからです。 こんな会社もう嫌だ・・・ 現在僕は正社員として2年以上継続して現場に赴き、プログラミングの業務に従事してきましたが、全く給料が上がらない。 ぶっちゃけると手取りが20万円に届かないレベル。ボーナスもお小遣い程度なので年収も悲惨。 給与明細 ...

続きを読む

エンジニア独立

2018/2/25

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

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

続きを読む

-WordPress

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