tontotakumi.com

web制作、Wordpress、料理、書評などを中心に、web制作初心者「tontotakumi」が作るブログ

「AmazonJS」プラグインの設置・使い方(画像で説明)

   

このブログでも「AmazonJS」というプラグインを使って、Amazonアソシエイトの商品広告を掲載してアフィリエイトをしているのですが、改めて別のブログに設定しようと思ったらやり方を忘れてしまったので、また調べ直しています。。。

結構時間の無駄な感じがするので、やっぱり自分でも「AmazonJS」の設置から商品画像を貼るところまで記事にしておこうかと思います。

参考にしているサイトは、すごく詳しく書いてくれているので必要ないといえばないのですが、自分で記事にすることでしっかり覚えられるし、誰かに説明するときも一旦整理できてるだけで違うので。

こういうブログの使い方も必要ですねぇ〜。

AmazonJSで出来ること

まずは、なんで「AmazonJS」のプラグインを使うか?ってところですね。

Amazonアソシエイト(アフィリエイト)をやっていると、Amazonアソシエイトの管理画面から掲載したい商品を検索して、掲載するためのソースコードを記事に貼りつける流れになります。

そのために新しいタブを開いて、Amazonアソシエイトの管理画面にログインして、商品を検索して、見た目をどうするか決めて、専用のソースコードを取得して、Wordpressの管理画面に戻ってソースコードを貼り付ける・・・、、ぶっちゃけ面倒です。そして見た目も残念です。

Amazonアソシエイトの管理画面からソースコードを取ってきて表示するとこんな感じ・・・

なんか見にくいし、いかにも商品を販売したいです!ッて感じが全面に出ちゃってますよね、

ですが「AmazonJS」のプラグインをWordpressに入れると、ワードプレスの管理画面から商品を検索して、直接ソースコードを貼付け出来ちゃうっていうすぐれものです!

なので、Amazonアソシエイトを使ってブログに貼り付けるのもいいのですが、「AmazonJS」のプラグインを使ったほうが楽して商品を紹介することができちゃいます!

また、商品とかの画像を使いたい時に、著作権を気にすることなく使えるところも便利ですよ!!

AmazonJSで挿入した見た目

表示もしっかりしているので、見やすいかもです。例えばこんな感じ。全然見た目が違うし分かりやすいですよね!!

せっかくなので、Amazonアソシエイト(アフィリエイト)に関する本です。

これをクリックすると、Amazonの商品ページに飛んで購入してもらえると少しずつですがチャリンチャリンします。

このブログでも少し貼っているのですが、月々のサーバー代ぐらいはチャリンチャリンしてくれるようになりました。ちゃんとした記事を書いてそのために必要があるものだと買ってくれる方もいらっしゃいます!(感謝感謝です)

Amazonだと本だけじゃなく日用品だったり、神輿用品とか結構いろいろなものがあるので記事に関連していれば効果がありますよ!

AmazonJS設定の参考サイト

とりあえず、情報がほしいので「AmazonJS 使い方」とかでググると良いサイトがトップページに出てきます。

いくつか見てみたのですが、シンプルで分かりやすいのはNETAONEさんのサイトですね。
Amazon JS – アマゾンのアフィリエイト商品紹介リンクを掲載できるWordPressプラグイン

AmazonJS公式サイト

AmazonJSの作者「makoto_kw」さんのサイトで日本語で詳しく説明がされています。公式サイトなだけあって、高度な使い方やトラブルシューティングなども掲載されているのですが、内部のソースコードとかもでているので、ざっと見ると「うっ!!」ッて感じがしちゃうかも知れません。

AmazonJS (WordPress Plugin)

AmazonJSのプラグインをインストールする

それでは早速AmazonJSのプラグインをインストールしちゃいましょう!

インストールはいつもと同じように管理画面「プラグイン」の「新規追加」から追加します。

プラグイン > 新規追加

プラグイン > 新規追加

新規追加画面の検索ボックスに「AmazonJS」と入力してエンターを押します。

AmazonJSを検索

AmazonJSを検索

一番最初に「AmazonJS」が出てくると思うので、「いますぐインストール」をクリックしましょう!

いますぐインストール

いますぐインストール

インストールができたら「プラグインの有効化」をクリックします。

プラグインの有効化

プラグインの有効化

そうすると管理画面の「設定」の中に「AmazonJS」が表示されるようになります。

管理画面>設定>AmazonJS

管理画面>設定>AmazonJS

これでインストールが完了です。

AmazonJSの設定をする

プラグイン「AmazonJS」がインストールできたら、実際に使えるようにするための設定をしていきます。

先ほどのメニューからAmazonJSを開くとこんなかんじです。赤枠の部分に必要な情報を入力する必要があります。

AmazonJSの設定画面

AmazonJSの設定画面

AmazonアソシエイトAmazon Product Advertising APIのアカウントが必須になるので、それぞれを取得します。ちなみに両方、無料で取得することができちゃいます!

Amazonアソシエイトのアソシエイトタグを取得する

Amazonアソシエイトのアカウントをすでに持っている場合には、下記のようにトラッキングIDを追加してもらえればアソシエイトタグを取得することができます。
(※Amazonアソシエイトの新規アカウント作成する場合の記事はいずれあげるので、今はぐぐってみてくださいm(__)m)

Amazonアソシエイトの管理画面トップに「アソシエイトアカウントの管理」というところがあるのでクリック

アソシエイトアカウントの管理

アソシエイトアカウントの管理

アカウント情報の中に「トラッキングIDの管理」があるので、これをクリックして専用のIDを追加します。

トラッキングIDの管理

トラッキングIDの管理

「トラッキングIDの管理」を開くと、すでに取得しているIDの一覧と「トラッキングIDを追加」というボタンがあるのでクリック

トラッキングIDを追加

トラッキングIDを追加

トラッキングIDを追加するための入力画面が出てくるので、任意の文字列を入れましょう!

トラッキングID入力画面

トラッキングID入力画面

ちなみに、トラッキングIDの後ろの数字は、国ごとの識別コードだそうです。知らなかった。

なぜトラッキングIDの末尾に「-22」が付加されるのですか?
トラッキングIDは世界に数百万存在するため、当プログラムではそれらを個別に識別する必要があります。また、国ごとの識別も必要になるため、IDの末尾に国ごとの識別コードを付加しています。「-22」は日本のアソシエイト・プログラムのアソシエイトであることを示しています。

任意のトラッキングIDが取得できたら、AmazonJSの管理画面に戻って「Amazon.co.jp」の部分にトラッキングIDを入力しましょう!

Amazon.co.jpにトラッキングIDを入力する

Amazon.co.jpにトラッキングIDを入力する

これでAmazonアソシエイトのアソシエイトタグは設定出来ました。

Amazon Product Advertising APIの「アクセスキーID」と「シークレットアクセスキー」を取得する

次にAmazon Product Advertising APIの「アクセスキーID」と「シークレットアクセスキー」を取得します。Amazonアソシエイトとは違うサービスのようなので、アカウントを持っていない場合は新規で取得することになってきます。

WordPressの管理画面で、AmazonJSの設定を見ると、「Amazon Product Advertising APIアカウントの作成は ここから作成することができます。」って記載しているので、『ここ』の部分をクリックしましょう!

Amazon Product Advertising APIアカウントの作成

Amazon Product Advertising APIアカウントの作成

そうするとAmazon Product Advertising APIのサイトにリンクするので、アカウントの作成をクリック!

Product Advertising API(リンク作成用API)

Product Advertising API(リンク作成用API)

サインインのページにリンクするのですが、ここから少し英語ページになります。

サインイン

サインイン

なんとなく見ればわかると思うので、それぞれ入力して「I am a returning customer, and my password is:」のほうにチェックして、パスワードを入力してサインインをします。

初めてサインインする際には新しいパスワードを登録する必要があるので、先ほど登録したAmazonアソシエイトのメアドを入力して、「I am a new customer.」の方を選択して、進んでください。
ざっくりですが、下記の画面が出てくるので「名前」「メアド」「パスワード」を入力しましょう!

新規で登録するとき

新規で登録するとき

サインインができると下記の画面が表示されるので、「Manage Your Account」のところをクリックします。

Manage Your Account

Manage Your Account

そうするとここからは日本語の表示に戻るので、ちょっと安心ですwww

アカウントサービスのページには、「アクセスキー情報」という項目が表示されているので、その中の「こちらのリンク」をクリック

アクセスキー情報

アクセスキー情報

今度はAWS(amazon web services)にサインインするようになります。
僕はすでに登録しちゃっているので先ほどと同じように「I am a returning customer, and my password is:」にチェックを入れてパスワードを入力するのですが、初めての場合は「I am a new customer.」の方を選択して、登録をして下さい。

サインインができると「セキュリティ認証情報」のページになるので、「アクセスキー(アクセスキーIDとシークレットアクセスキー)」をクリックすると、中身が表示されます。

「セキュリティ認証情報」のページ

「セキュリティ認証情報」のページ

「アクセスキー(アクセスキーIDとシークレットアクセスキー)」の中に「新しいアクセスキーの作成」と青いボタンがあるのでそこをクリックします。

新しいアクセスキーの作成

新しいアクセスキーの作成

クリックするとアクセスキーが作成され、「アクセスキーIDとシークレットアクセスキー」が表示されるので、この情報を最初に見てもらったAmazonJSの設定画面に入力します。

作成されたアクセスキー

作成されたアクセスキー

入力後に一番下にある「変更を保存」をすると、「設定を保存しました」の表示が出てくるはずです。

設定を保存しました。の状態

設定を保存しました。の状態

これでAmazonJSの設定が完了です!

AmazonJSで商品のリンクを設置する方法

AmazonJSで商品のリンクを設置する方法はとっても簡単です。

新規投稿画面を見てみると今までになかったAmazonのマークが表示されるようになっています。

Amazonのマーク

Amazonのマーク

写真等を差し込む「メディアの挿入」と同じように、商品の情報を入力したい場所で「Amazonのマーク」をクリックしてみてください。
Amazonの商品検索画面が表示されると思います。

Amazonの商品検索画面

Amazonの商品検索画面

ここで商品名を入れると検索できます。例えば「アフィリエイト」で検索するとこんな感じ。

「アフィリエイト」で検索

「アフィリエイト」で検索

Amazonで検索する感覚で探すことができます。

ただ、今やってみたら下記のエラー表示が出たのですが、もう一度検索を行ったら大丈夫でした。

Amazon Product Advertising APIのエラー

Amazon Product Advertising APIのエラー

さて、商品を入力するときは、検索結果画面の右下にある「選択」のボタンをクリックすると、「テンプレートの選択」画面が出てきます。これで好きなようにある程度いじることはできるのですが、基本はデフォルトで大丈夫かと思います。

テンプレートの選択

テンプレートの選択

なので、そのまま「挿入」をクリックしましょう!
本文の中にショートタグが入力されます。

AmazonJSのショートタグ

AmazonJSのショートタグ

実際に表示させるとこんなかんじになります。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

「AmazonJS」プラグインの設置・使い方(画像で説明)のまとめ

「AmazonJS」の設置・使い方を画像で説明してきたのですが、これでWordpressにかなり簡単にしかもユーザーから見やすい形で、Amazonの商品を表示して、アフィリエイトリンクを設置することができたようになったかと思います。

Amazonだと、本だけでなくかなりたくさんの商品を表示できるようになるので、副業としてもチャリンチャリンするし、著作権上表示するのが難しい物も商品紹介の形をとって画像を使うことができるので、なんだかんだで使えます!

これでチョットできることの幅が増えるので、さらにサイト制作を頑張っていきたいものですね!!

 - 備忘録(wordpress)

広告

広告

Comment

  1. […] 実際に、詳しい説明はこちら様のブログを確認してみてください。 http://tontotakumi.com/web-seisaku/wordpress/amazonjs/ […]

  2. […] アの挿入」と同じように、商品の情報を入力したい場所で「Amazonのマーク」をクリックしてみてください。 [紹介元] 「AmazonJS」プラグインの設置・使い方(画像で説明)tontotakumi.com […]

  3. […] 実際に、詳しい説明はこちら様のブログを確認してみてください。 http://tontotakumi.com/web-seisaku/wordpress/amazonjs/ […]

  4. […] 「AmazonJS」プラグインの設置・使い方(画像で説明) […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

デフォルトのアイキャッチ
wordpressのアイキャッチ画像をリサイズする方法(初心者向け)

これも前から気になっていたものの一つで、トップページに表示されるアイキャッチ画像 …

no image
ナビメニューに投稿で作成したカテゴリーを任意で選択して表示(追加)する方法

ヘッダー下のナビメニューにカテゴリーを入れる方法 ある程度ページの制作が進んでく …

Advanced Custom Fields
Advanced Custom Fieldsを使って、wordpressの記事入力項目を作り替える

前回の記事(WordPressで複数の会員が独自のページを作成し、内容を管理・更 …

アコーディオンメニュー
WordPressで、CSS3とhtmlだけでアコーディオンメニューを作る方法

アコーディオンのように、クリックするとコンテンツが開いて表示される「アコーディオ …

WordPressに投稿した記事をFacebookに自動で投稿するプラグイン「Wordbooker」

WordPressに新しい記事を投稿した後に、記事の拡散をする際Facebook …

no image
wordpressの各記事に、公開日と最終更新日を表示する方法

前から気になっていたwordpressの各記事に、公開日と最終更新日を入れてみる …

Poeditの使い方 [WordPressのテーマやプラグインを日本語化(多言語)する方法]

WordPressを使っていると、様々なテーマやプラグインを使うことになると思う …

BackWPupがメニューに追加
WordPressで作ったブログをDBごと自動でDropboxにバックアップするプラグイン「BackWPup」

WordPressでブログを作り始めてから半年以上経ってきたんですが、そういえば …

Adsense
WordPressのmoreタグの直後に、Adsenseのレスポンシブ広告を出す方法

自分用の備忘録として、「WordPressのmoreタグの直後に、Adsense …

表示設定
htmlで作られているサイトをWordPressに作り変える時、index.htmlを残したまま裏で制作する方法

htmlで運営しているサイトをWordpressに作り変える際に、サイトの運営を …