【Amazon JS の使い方】ブログでAmazonの商品を紹介する方法!

こんにちは!はらくん(@harakunishere)です!

今回はブログでアマゾン の商品を紹介する方法についてです!

 

 

こんな感じですね!

 

こんな感じでAmazonの商品を紹介する方法について説明します!

Amazon JSで商品を紹介する方法!

Amazon JSというプラグインをインストールする

まずはAmazonJSというプラグインをインストールしましょう!

プラグインから検索することができます!

 

検索するときは”AmazonJS”という風にAmazonとJSをくっ付けてくださいね。

 

こんな感じでAmazon JSというプラグインが出てきますよね。

では有効化してください!

Amazon JSの設定をする

インストールしただけでは

こんな感じで商品を紹介することができません。

 

商品を紹介できるようにするためにAmazon JSの設定をしていきましょう!

 

プラグインの設定から設定することができます!

 

青い文字で隠してあるところを打ち込んで保存すれば設定完了です!

 

アクセスキーIDとシークレットアクセスキーは

こちらから確認することができます!→アクセスキーIDとシークレットアクセスキーの確認

 

同じページからアクセスキーIDとシークレットアクセスキーを作成することができます!

 

アソシエイトタグというのはAmazonアソシエイトのアソシエイトIDです!

 

 

こんな感じでAmazonアソシエイトのページの右上に表示されていると思います。

 

Amazon JSで記事に商品紹介を入れる方法

 

そうすると記事の編集画面にこのようなAmazonのマークが出てきます!

 

 

メディア追加の右にAmazonのマークをクリックします。

 

 

すると紹介する商品を検索できますね。

 

そしたら紹介したい商品を選択して

 

 

そのまま挿入すば大丈夫です!

このように商品を表示することができました!

 

 

Amazonの商品紹介の表示が変になっていたら

 

商品紹介が変になっていることがあります!

 

黄色の点みたいなのがありますね。

 

黄色でなくてもいいのですが、とりあえずこのようなエラーが起きた時には

CSSにこちらのコードを追加してみましょう!

/* amazonjsの修正 */
.amazonjs_item .amazonjs_info ul li:before{
content:none;
}
.amazonjs_image .amazonjs_link[target=”_blank”]:after{
content:none;
}

WordPressのテーマにJINを使っている方は”追加CSS”に追加で書き込めば大丈夫です!

 

こんな感じですね。

 

そうすると

 

こんな感じで綺麗に表示されるようになりましたね。

 

ぜひ参考にしてみてください!