AmazonJSを使ってアフィリエイトタグを設置する方法

前回の記事でも書いたのですが、別のサイトにアマゾンアソシエイトのリンクタグを設置してみようかと。
ただ、リンクタグそのままだと、チョット「いかにも」な感じがしたので、何かないかな…
と、探してみました。

結構あるようですね。
こういう類のツールって。

amazletヨメレバなんかが、結構有名みたいです。
が、設置してみようと思っているのがワードプレスで作ったサイトなので、プラグインでなんとかならないかと再度探してみました。

結果、今のところ「AmazonJS」っていうプラグインがベストなようなので、これを使わせていただくことに。
まずは、このプラグインを使えるようにする準備からです。

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

アマゾンアソシエイトにログインします。

アソシエイト管理画面

管理画面右上の「Product Advertising API」タグをクリックします。

Product Advertising API

Amazon Product Advertising APIの画面が表示されます。
右側にある「アカウント作成」をクリックします。
上記のページにも記載されていますが、「アソシエイトに登録したときに使ったメールアドレス」でアカウントを作成します。

amazon.com sing in

amazon.comのサインイン画面が表示されます。
すでに持っているアソシエイトのアカウントは、amazon.co.jpのアカウントなので、新たにamazon.comでアカウントを作成することになります。
「I am a new Customer.」にチェックを入れ、「My e-mail address is:」の欄にメールアドレスを入力します。
ここで入力するメールアドレスは先ほども書きましたが、「アソシエイトに登録したときに使ったメールアドレス」です。
入力が完了したら「Sign in using our secure server」をクリックします。

amazon.com registration

登録画面が表示されます。

「My name is:」に氏名を英語で入力します。
「My e-mail address is:」には、先ほど入力したメールアドレスが自動で入力されています。
そのアドレスに誤りがないか確認して、「Type it again:」にもう一度メールアドレスを入力します。
「Enter a new password:」にパスワードを入力します。
このパスワードは、アソシエイトのパスワードとは別のものでも大丈夫です。
「Type it again:」にもう一度パスワードを入力します。
入力が完了したら、「Create account」をクリックします。

contact information

住所などの登録画面が表示されます。

「Address Line 1」に番地と町名などを英語で入力します。
「Address Line 2」は、マンションなど場合に建物名と室番号などを英語で入力します。
「City」に市区町村名を英語で入力します。
「State, Province or Region」に都道府県名を英語で入力します。
「ZIP or Postal Code」に郵便番号を入力します。
「Phone Number」に電話番号を入力します。入力する際には、国番号から入力し市外局番のはじめの0は省きます。
例(東京の場合):81-3-××××-××××
「Website or Application Description」にサイトやAPIを使ったアプリケーションの簡単な説明を英語で入力します。
例文はコチラに記載されているので、自分のサイトに合わせてアレンジすればよいかもです。

Amazon.co.jp Product Advertising API ライセンス契約を確認したら、下にある契約同意のチェックボックスにチェックを入れます。

Security Checkの「Type the characters in the above image」に上に表示されている文字を半角で入力します。
読みにくい場合は、「Try a different image」をクリックすると別の文字が表示されます。

入力が完了したら、「Complete Registration」をクリックします。

success

登録に成功すると完了画面が表示されます。
これで、Amazon Product Advertising APIのアカウント作成が完了しました。

次にAmazonJSを起動する際に必要となる、アクセスキーとシークレットアクセスキー(秘密キー)を取得します。

アクセスキーとシークレットアクセスキーを取得する

先ほどのアカウント作成完了画面に表示されている「Manage Your Account」をクリックします。

アカウントサービス

アカウントサービス画面が表示されます。
アクセスキー情報欄の「こちらのリンク」をクリックします。

AWSサインイン

Amazon Web Servicesのログイン画面が表示されます。
Amazon Product Advertising APIのアクセスキーは、Amazon Web Services(AWS)のアクセスキーを使用することになるので、AWSでキーの発行を行います。

「My e-mail address is:」に、先ほど登録したメールアドレスを入力します。
「I am a returning user and my password is:」にチェックを入れ、先ほどProduct Advertising APIのアカウントを作成したときに使ったパスワードを入力します。
入力が完了したら、「Sign in using our secure server」をクリックします。

IAM window

IAMユーザーを使った方が安全だよー、みたいなことを書いたウィンドウが表示されます。
が、今回はそのまま「Continue to Security Credentials」をクリックしました。
セキュリティ面のことを考えるとIAMを使った方がよいかと思いますが、確か費用がかかるんじゃなかったかな…

セキュリティ証明書

セキュリティ証明書の画面が表示されるので、「Access Keys (Access Key ID and Secret Access Key)」をクリックします。

アクセスキー取得

アコーディオンが開きます。
この段階ですでに一つアクセスキーが生成されていますが、このキーではシークレットアクセスキー(秘密キー)が取得できません。
ですので、「Create New Access Key」をクリックして、新たにアクセスキーを生成します。

New Access Key

アクセスキー生成の完了ウィンドウが表示されます。
「Download Key File」をクリックしてファイルをダウンロードしておきます。
ファイルは、「rootkey」という名前のcsvファイルでダウンロードされます。
このファイルにアクセスキーとシークレットアクセスキー(秘密キー)が記載されていますので、分かりやすい場所に保存しておきましょう。
ダウンロードが完了したら、「Close」をクリックしてウィンドウを閉じます。

アクセスキー

これで新しいアクセスキーが追加されました。
アカウントの作成時に登録したメールアドレスに「Product Advertising API Team」からメールが届いていますが、とくになにもする必要はありません。

以上でアマゾンでの作業は終了です。
ひとまず、お疲れさまでした。
次はワードプレスの設定に入っていきます。

ワードプレスにAmazonJSプラグインを追加する

プラグインを設置するワードプレスサイトにログインします。

ダッシュボード

管理画面左サイドバーにある「プラグイン」から「新規追加」をクリックします。

プラグイン追加画面

プラグインの追加画面が表示されます。
右上側にプラグインの検索窓があるので、「AmazonJS」と入力して、エンターキー(改行キー)を押します。

検索結果

プラグインの検索結果が表示されます。
Amazon JSの枠内にある「いますぐインストール」をクリックします。

確認ウィンドウ

インストールの確認ウィンドウが表示されるので「OK」をクリックします。

インストール画面

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

プラグイン一覧

プラグインの一覧画面が表示されます。
この時点でAmazonJS欄の中にある「設定」をクリックすると、警告が表示されます。

警告表示画面

「書き込み可能なディレクトリを○○○/○○○/○○○/wp-content/cache/amazonjs/に作成してください」と警告文が表示されます。
「○○○」の部分は使っているサーバーにより異なります。

このプラグインを使うには、「amazonjs」ディレクトリのパーミッションを「777」に設定する必要があります。
この作業はFTPソフトを使って行います。

FTPソフトを使ってamazonjsディレクトリのパーミッションを変更する

FTPソフトを使ってワードプレスがインストールされているサーバーに接続します。

Filezilla

今回使っているFTPソフトは、FileZillaです。
右側(サーバー側)のウィンドウに「wp-content」の内容を表示させます。

「cache」ディレクトリが存在していないので、「cache」ディレクトリを作成します。
デスクトップなどに「cache」という名前で空のフォルダを作っておきます。
(デスクトップに作成する場合は、デスクトップの何もないところで「右クリック」-「新規作成」-「フォルダー」で作成できます。新しいフォルダを作成したら名前を「cache」に変更します。)

左側(パソコン(ローカル)側)のウィンドウに「cache」フォルダを作成した場所を表示させます。
もし、表示されない場合は、表示内容を更新します。

左側ウィンドウに表示された「cache」フォルダを「wp-content」内にアップロードします。
アップロードは、左側の「cache」を右クリックし、表示されたメニューの「アップロード」をクリックします。

アップロード

アップロードに成功すると右側のウィンドウに「cache」ディレクトリが表示されます。
右側に表示された「cache」ディレクトリをダブルクリックします。

amazonjsディレクトリ

「cache」中に「amazonjs」ディレクトリが自動で作成されているので、「amazonjs」を右クリックします。
表示されたメニューから「ファイルのパーミッション」をクリックします。

パーミッション変更

「ファイルの属性を変更」ウィンドウが表示されるので、数値欄を「777」に変更します。
入力したら、「OK」をクリックします。

これで、パーミッションの変更は完了です。
再度ワードプレスの管理画面に戻って、AmazonJSの設定を行います。

AmazonJSの設定

管理画面左サイドバーの「設定」から「AmazonJS」をクリックします。

AmazonJS設定画面

先ほど表示されていた警告文が消えているはずです。
先ほどのままでこの画面を開いている状態の場合は、ブラウザの再読み込みを行います。

まず、「Product Advertising APIの設定」を行います。

アクセスキーIDとシークレットアクセスキーを入力します。
このキーは、先ほどダウンロードした「rootkey」というcsvファイルに記載されています。

この「rootkey.csv」ファイルをエクセルなどで開きます。

エクセル画面

上の「AWSAccessKeyId=」の後ろ側に表示されているのが、アクセスキーIDです。
下の「AWSSecretKey=」の後ろ側に表示されているのが、シークレットアクセスキーです。

それぞれコピーして、AmazonJSの設定画面の各項目欄に貼り付けます。
アクセスキーIDとシークレットアクセスキーの入力が完了したら、「rootkey」ファイルは閉じて大丈夫です。

次に「アソシエイトタグの設定」を行います。
「Amazon.co.jp」欄に自分のアソシエイトIDを入力します。

アソシエイトIDは、アマゾンアソシエイトにログインすると左上側に表示されています。

アマゾンアソシエイト

「○○○-22」と表示されているのが、アソシエイトIDです。

入力完了

3項目の入力が完了したら、AmazonJS設定画面の下側にある「変更を保存」をクリックします。

これで設定は完了です。
お疲れさまでした。

AmazonJSの使い方

記事の「新規投稿」画面を開きます。

新規投稿

記事の入力欄上側にアマゾンマークのアイコンが表示されます。
本文内のアソシエイトタグを表示させたいところにカーソルを持っていき、アマゾンアイコンをクリックします。

検索結果

「Amazonリンクを追加」ウィンドウが表示されます。

「日本」になっていることを確認し、となりのカテゴリを選びます。
検索窓に書籍名などを入力し、「検索」をクリックします。
検索結果が表示されるので、リンクタグを発行したい商品を選び、「選択」をクリックします。

プレビュー画面

「テンプレートの選択」ウィンドウが表示されます。
プレビューを確認し、「挿入」をクリックします。

ショートコード

記事本文中にショートコードが挿入されます。

実際の表示

実際のサイトでの表示は、上記のようになります。

本のタイトル部分の表示は、使っているテンプレートにより異なります。
このあたりは、AmazonJSのスタイルシートを弄れば変更できるようですが、、、
それは、またの機会にでも。

新しいサイトにアマゾンのリンクタグを表示する場合には、サイトの追加申請をお忘れなく~

コメントを残す

サブコンテンツ

PAGE TOP