【アフィ】記事の内容に合ったAmazonの商品を自動表示させる

f:id:allthewayfrom:20150316205925j:plain

※FC2ブログ向けの内容になります。（FC2でなくても応用はできそう）

Amazonライブリンクで、JavaScriptを使って記事内容に合わせた検索結果にする方法です。

※前置きを飛ばす場合は、こちらをクリック

Amazonのオリジナルパーツにも、記事内容を自動解析してリンクを表示させる「Amazonおまかせリンク」と言うのがありますが、どうも精度が悪く、使い勝手がよくありませんでした。

そうなると、他のWebサービスを使うか、AmazonのAPIを使って自分で作るか、、と言う選択になります。

前者で使えそうなサービスは、一定の確率でアソシエイトIDが作成者のIDに変わってしまうらしいので少々難色。

後者はハードルが高いので、検索結果を表示させるライブリンクのウィジェットとJavaScriptでどうにか上手く表示できないか思案しました。

色々と調べてみると、良さ気な記事を発見。最初はこちらを参考にさせて頂きました。
「記事にマッチしたAmazonアソシエイトの商品を自動で表示する」
（Web Memo.SE）

こちらで紹介されているのは、記事のカテゴリやタグを検索結果にして表示させる、と言うもの。

これは、なかなか良いです。

ただし、検索はAmazonのカテゴリ（本、音楽など）が絞られてしまうため音楽の記事なのに、本の表示がされてしまう、また、全てのタグを検索結果に含めると精度が悪くなる、と言う悩みが出てきました。

そこで、無い知恵を振り絞って出した方法がこれになります。

なかなかの泥臭さですが、以下の方法で解決してみました。

①カテゴリは検索URLに含まれているので、記事のカテゴリ名で分岐させる
②全てのタグを含めるのではなく、最後のタグだけを検索結果にする
　→ですので、記事のタグを設定する時に、検索したいワードを最後にするようにします。

これで、かなり精度が上がりました。

使い方

※本プログラムによって発生した問題に関して一切責任を負えませんので、あくまで使用は自己責任でお願いします。

ソースコード

<script>
<!--
 var tagstr = '<!--tag_list--><%topentry_tag_list_name> <!--/tag_list-->';
 var tagary = tagstr.split(" ");
 var settag = tagary[tagary.length-2];
 var encodetag = encodeURIComponent(settag);
 var topcat = '<%topentry_category>';
 switch (topcat){
  case "カテゴリ１": topcat = "ストアID１"; break;
  case "カテゴリ２": topcat = "ストアID２"; break;
  case "カテゴリ３": topcat = "ストアID３"; break;
  default: topcat = "ストアIDその他"; break;
 }
 document.write('ライブリンクコード１'+topcat+'&search='+encodetag+'ライブリンクコード２');
// -->
</script>

基本的な流れは、前述の参考サイトの通りになりますが、、

Amazonアソシエイトの「Amazonライブリンク」を選択
ストアはとりあえず「本」とし、キーワードには分かりやすい文字（例として「■」にします）を入力
サイトに表示させたいサイズを選択して作成
表示されたHTMLをテキストエディタ(メモ帳など)にコピー
「mode=books-jp」となっている箇所を探し（ストアに「本」を選択したので、「books-jp」がストアを示します）「books-jp」より前（「mode=」まで）を上記ソースの「ライブリンクコード１」と置き換える
今度は、「■（キーワードで入力した文字）」より後を「ライブリンクコード２」と置き換える
「カテゴリ○」がブログ上のカテゴリ名、「ストアID○」がライブリンクHTMLのコードになるので、好きな組み合わせに置き換える組み合わせは下記のリストを参考ください。例えば、ブログのカテゴリ名が「音楽」、表示させたいストアが「ミュージック」の場合、
```
  case "音楽": topcat = "music-jp"; break;
```
となります。（ソース上は「カテゴリ１～３」となっていますが、数に制限は無いので「case～break;」までを任意で、削除追加ください）
「ストアIDその他」は、上記で置き換えた「カテゴリ○」以外で表示させたいストア（今後カテゴリを追加した場合などの考慮にもなります）
置き換えたソースコードを、ブログ上の表示させたい位置に追記する

【代表的なストアID】
本： books-jp
ホビー： hobby-jp
カー＆バイク用品： automotive-jp
洋書： books-us
クラシックミュージック： classical-jp
家電： electronics-jp
文房具・オフィス用品： office-jp
ホーム＆キッチン： kitchen-jp
ミュージック： music-jp
DVD： dvd-jp

～それ以外調べ方～
調べたいストアを選択してHTML表示まで進み、上記の「ライブリンクコード１」で探した「books-jp」に当たる文字列が選択したストアIDなので、それを利用します。

以上、お試しください。

なんか、改めて見てみても結構強引な感じもするので、もっとスマートな方法がありましたら、是非ご指摘お願いします。。

プログラミング

あらかじめ日記

雑記とかブログで使えるスクリプトとかテクニックとか。その他、音楽やアニメ、漫画の話題とかも。

【アフィ】記事の内容に合ったAmazonの商品を自動表示させる

使い方