vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万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

▼格安のWebサイト制作はじめました▼

格安のWebサイト制作
Share
  • このエントリーをはてなブックマークに追加

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

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

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

SEO対策に!PubSubHubbubを使ってGoogleに素早くインデックス

こんにちは、okutani(@okutani_t)です。WordPressプラグ …

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

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

WordPress Popular Postsで人気記事一覧を設置&CSS装飾

こんにちは、okutani(@okutani_t)です。 ブログのサイドバーに「 …

WordPressに「AddQuicktag」を導入してタグ入力を楽チンに!

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

DISQUSでWordPressのコメント欄をパワーアップしよう!

こんにちは、okutani(@okutani_t)です。WordPressサイト …

[WordPress] ソースコードを綺麗に表示!SyntaxHighlighter Evolvedプラグイン導入

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

ポチレバをCSSで装飾してみた

こんにちは、okutaniです。前回「カエレバをCSSで装飾してみた | vde …

WordPress全バックアップを「BackWPup+Dropbox」で行う

こんにちは、okutani(@okutani_t)です。みなさんはWordPre …

iTunesアフィリエイトプログラムに登録してみよう

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

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