Amazonアソシエイトの公式ウィジェットをブログのサイドバーに入れる方法

ブログのサイドバーにAmazonの商品がずらっと並ぶウィジェットを見たことある人もいると思います。まとめサイトなどでよく見ますね。

しかしAmazonの商品が自動で切り替わるように自前でカスタマイズするのは、相当な知識がないと難しいと思います。また、AmazonアソシエイトのAPI利用ポリシーが度々変更になるため、既存のウィジェット表示サービスも対応が難しくなってきていると思います。

そこで今回は、Amazonが公式に用意するウィジェットを使ってサイドバーに商品表示する方法についてまとめてみます。

Amazonアソシエイトのウィジェットとは？

まず、Amazonアソシエイトの「ウィジェットのご紹介」というページを開きます。

Amazonアソシエイトで公式に利用可能なウィジェットは以下の6個です。

このうち、「お買い得ウィジェット」、「くるくるウィジェット(TM)」、「スライドショーウィジェット」は、Flashを使ったウィジェットなので今回は外します。

Flashは一昔前はウェブサイトの動的コンテンツとして一世を風靡しましたが、現在はHTML5に置き換えが進んでおり急速に過去の技術になっています。提供元のAdobeはFlashを実行するためのFlash Playerの開発と配布を2020年末に終了する予定であると発表しました。

では実際に、「サーチウィジェット」、「お気に入りウィジェット」、「ウィッシュリスト」を見ていきます。

まずは「サーチウィジェット」で、サイドバー用のAmazon広告を作ってみます。

サーチウィジェットを使うと、自動的に検索結果に該当する商品を表示してくれます。

トラッキングIDを複数持っている人は、目的のトラッキングIDに設定しましょう。

カテゴリ設定は、表示させる商品のAmazonカテゴリです。検索ワードは、表示させたい商品の傾向に合わせて入力して下さい。なければ空欄でも行けます。

サイズの設定は、縦幅を設定する必要がなければ「Auto」で十分ですが（横幅は自動でフィットします）、横幅と縦幅を設定したい場合は「Custom」から設定しましょう。

ただし、横幅を固定してしまうと、PCとスマホでサイドバー領域の横幅が違う場合に、どちらか（普通はスマホのほう）でサイドバーよりも広くなってしまいます。なので、サイドバーの横幅が変わる場合には「Auto」の方がいいと思います。

プレビューを見て問題なければ広告コードをコピーし、ブログのサイドバーに設定します。

WordPressなら、以下のような方法です。

これで広告がサイドバーに表示されます。

WordPressのカスタムHTMLウィジェットに貼り付けて、コードのエラーが表示された場合は、HTMLウィジェットではなくテキストウィジェットを使うといいと思います。テキストウィジェットの上部を「テキスト」に切り替えてコードを貼り付けてみて下さい。

次は「お気に入りウィジェット」で、サイドバー用のAmazon広告を作ってみます。

お気に入りウィジェットを使うと、指定した商品を表示できます。

ここでは、検索ワードは省略できません。カテゴリと検索ワードを設定したら「GO」をクリックします。

以下のような画面が表示されます。

左側の検索結果で「商品を追加する」をクリックすると、右側の実際の表示設定に商品が追加されます。

そして、右側の表示設定で商品にマウスをロールオーバーさせると「コメントを追加」ボタンが現れるので、コメントを追加できます。ちなみに、コメント内では改行も入力できます。

商品とコメントを設定できたら、「次の手順」をクリックします。

今回私が設定したのは、タイトル、サイズ、カラー（その他の背景、ヘッダーテキスト）です。右側にプレビューが出てますが、Amazonのデフォルトの広告表示とは違う雰囲気が出てますね。

設定が終わったら画面下にある「Webサイトに追加」をクリックしてコードをコピーし、ブログのサイドバーの設定に貼り付けましょう。

ちなみに、「ウィッシュリスト」というのもありますが、こちらはウィジェットの作成方法が不明でした。

機能的には、自分や他人のほしい物リストを表示させることができるウィジェットのようですが、ほしい物リストを公開している私の名前で検索しても「条件に一致するものありませんでした。」と表示されるばかりです。（使い方をご存知の人がいましたら教えて下さい）

しかし、ほしい物リストをアフィリエイトとして使うことはなさそうなので、このウィジェットは必要ないかなと思ってます。

というわけで、ブログのサイドバーに使えるAmazonアソシエイトの公式ウィジェットを紹介しました。

サイドバーに自前でAmazonの商品を自動配置するのは技術的にも難しいですし、Amazonの商品を並べてくれるブログパーツもAPIの度重なる変更で対応が難しい状況です。なので、Amazon公式のウィジェットを使ってしまった方が悩む時間をカットできておすすめです。

サイドバーにAmazonの商品をずらっと並べるとブログが賑やかになりますね。

ただ、サイドバーのAmazon商品リストは、思ったほどクリックされないという情報もあるので、効果のほどはご自身で確かめてみてください。

ではまた！