vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

[WordPress] Amazonアソシエイトを綺麗に表示「AmazonJSプラグイン」導入方法

      2017/01/31

LINEで送る
Pocket

amazonjs22
こんにちは、okutani(@okutani_t)です。Amazonアソシエイトを利用すれば簡単にアマゾンの商品が紹介できて便利です。しかし、デフォルトのAmazonアソシエイトは見た目がダサい上に、商品が見にくくあまりオススメできません。

今回は、WordPressに「AmazonJS」プラグインを導入して、見やすいAmazonリンクを設置できるように設定してみました。

もし、まだAmazonアソシエイトのアカウントを作成していない方は、過去記事を参考に。

Amazonアソシエイトの登録方法。自分のブログでおすすめ商品を紹介!
こんにちは、okutani(@okutani_t)です。Amazonのアフィリエイト(Amazonアソシエ...
2015-04-03 23:38
はてブ

ではさっそく導入していきます。

スポンサーリンク

AmazonJSプラグインの導入

ダッシュボードから「プラグイン」→「新規追加」を選択します。

wp-plugin-install

右上の検索バーに「AmazonJS」と入力して検索、「いますぐインストール」をクリックします。

amazonjs

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

amazonjs2

これでAmazonJSの導入が完了しました。

AmazonJS設定

ダッシュボードから「設定」→「AmazonJS」で設定画面を開くと、設定画面上部に警告が出ています。

amazonjs3

これは「wp-content内にcacheフォルダがないですよ」という警告なので、FTPソフト等で作成しましょう。cacheフォルダを作成すると自動でamazonjsフォルダも同時に作成されます。

作成したら、もう一度設定画面を開きます。エラーメッセージが消えていればOKです。

その後、cache内のamazonjsフォルダのパーミッションを「777」に設定しておきます。お使いのFTPソフトで変更しましょう。

amazonjs4

では初期設定を行っていきましょう。

Amazon Product Advertising APIの準備

AmazonJSを利用するには「Amazon Product Advertising API」のアクセスキーが必要です。色々な言葉が出てきて少々とっつきにくいですが、ここではあまり深く考えずに作業を進めていきましょう。

Amazonアソシエイトにログインし、上部のタブから「Product Advertising API」をクリックします。

amazonjs5

右側にある「アカウント作成」ボタンをクリックします。

amazonjs6

Amazonアソシエイトのアカウントでログインします。

amazonjs7

「Manage Your Account」をクリック。

amazonjs8

「こちらのリンク」をクリックします。

amazonjs9

ログイン画面に切り替わるので、アソシエイトアカウントでログイン。

amazonjs11

英語で書かれたページに飛びます。「Continue to Security Credentials」をクリックします。

amazonjs12

ここからアクセスキーを取得します。「Access Keys (Access Key ID and Secret Access Key)」タブをクリック。

amazonjs13

上記タブが見当たらない場合は、右上のタブの「Welcome to AWS」→ 「Security Credentials」にあるようです。タブを開いたら「Create New Access Key」ボタンをクリックします。

amazonjs14

Create Access Keyの画面がポップアップされます。「Show Access Key」を選択しましょう。

amazonjs15

すると「Access Key ID」と「Secret Access Key」が表示されます。両方をメモしておきましょう。

amazonjs16

AmazonJS設定画面でアクセスキーを入力

AmazonJSの設定画面に戻りましょう。先ほどメモしたAccess Key IDとSecret Access Keyをそれぞれ「アクセスキーID」「シークレットアクセスキー」に入力します。

amazonjs17

次にAmazonアソシエイトのトラッキングIDを下記の「Amazon.co.jp」に入力します。トラッキングIDはAmazonアソシエイトにログインすると、トップページに表示されています。

amazonjs18

コピーして貼り付けましょう。入力が全て済んだら「変更を保存」ボタンをクリックします。

これで設定完了です。

Amazonのリンクを記事に表示してみる

では、実際に記事にAmazonJSを使って商品リンクを貼り付けてみましょう。

記事の新規投稿画面を開きます。Amazonのリンクを挿入するボタンが追加されているのが確認できます。

amazonjs19

ボタンをクリックするとAmazonの商品を検索する画面が表示されます。検索すると画面下に、検索した商品の一覧が表示されます。

リンクを貼り付けたい商品にある選択ボタンを押してみましょう。

amazonjs20

するとテンプレートの形式を選択する画面が表示されます。お好きな形で選択しましょう。

今回はデフォルトのままにして、画面下の挿入ボタンを選択します。

amazonjs21

これで記事に商品ページのリンクが貼り付けられました。投稿した記事を確認してみましょう。

amazonjs22

紹介したい商品のリンクが作成されているのが確認できました。

後は、CSS等でリンクの見た目を変更すれば、オシャレにAmazonの商品をオススメできますね。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
初期設定は少々めんどうでしたが、一度設定してしまえば次から簡単にリンクが作成できます。見た目もすっきりしているので、導入していない方は是非設定してみてください。

 - Amazon, WordPressプラグイン, アフィリエイト

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

カエレバをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。Amazonや楽天の商品 …

[WordPress] 画像をあとから読み込んで表示速度アップ!「Lazy Load」プラグイン

こんにちは、okutani(@okutani_t)です。皆さんはブログ記事を書く …

WordPressのサイトマップを「PS Auto Sitemap」で作成してみよう

こんにちは、okutani(@okutani_t)です。サイトマップとは、サイト …

A8.netに登録してアフィリエイトを始めよう!〜登録方法からリンクの取得まで〜

こんにちは、okutani(@okutani_t)です。皆さんはアフィリエイトっ …

All in One SEO PackでSNSのシェア設定をおこなう

vdeep管理人okutani(@okutani_t)です。WordPressで …

「EWWW Image Optimizer」プラグインで画像の自動圧縮を行う

こんにちは、okutani(@okutani_t)です。WordPressで画像 …

「Broken Link Checker」を使ってサイトのリンク切れを防ごう!

こんにちは、okutani(@okutani_t)です。みなさんはサイトに貼り付 …

もくじを自動で作成。WordPressプラグイン「Table of Contents Plus」導入&初期設定

こんにちは、okutani(@okutani_t)です。当ブログvdeepはWo …

カテゴリーの順番を変更する「Category Order」プラグイン使い方

こんにちは、okutani(@okutani_t)です。今回は、かんたんにWor …

カエレバをブログに設置する方法

こんにちは、okutani(@okutani_t)です。私は当ブログvdeepで …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。