BloggerにYahoo!ショッピングのカテゴリランキングモジュールを表示させる

ブログを書くたびに、アフィリエイト商品を選んで張り付けるのは
めんどくさいもんです。

というわけで、
Yahoo!ショッピングのカテゴリーランキングAPIを使って、
自動でアフィリエイトモジュールを表示させるTipsです。

1. まずは、テンプレートのバックアップを取っておきます
   ダッシュボードから、レイアウト→HTMLの編集、から
   テンプレートのダウンロード、でローカルに保存しておく

2. ↑のページから、ウィジェットのテンプレートの展開、をON

3. jqueryを使うので、ページのトップで読み込みます。貼り付ける場所は、
   </b:skin> という箇所を検索し、その下に張り付けます。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="http://www.geocities.jp/tanarky/jquery/js/plugins/jquery-jtemplates.js"></script>
4. 以下のコードを、張り付けます。貼り付ける場所は、
   <b:if cond="data:post.hasJumpLink">という箇所を検索し、
  その上に張り付けます。
<!-- カテゴリランキングモジュール BEGIN -->
<div expr:id='&quot;cm&quot;+data:post.id'></div>
<script type="text/javascript" src="http://www.geocities.jp/tanarky/blogger/tanarky/js/shopping_ranking.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    BLOGPARTS.show('Ranking', {
        affiliate_type: 'yid', // 各自変更
        affiliate_id: 'NqNP7flCUN49xU3KOQg-', // 各自変更
        // カメラ,一眼レフ,PS3,ウルトラモバイルノート,ノートパソコン,メモリーカード,ロードバイク,フィギュア,Nintendo DSソフト
        category_ids: [2443,4875,5075,14251,14242,24,3184,2137,5086], // あなたの好きなカテゴリIDを入力
        max: 3,
        appid: 'vbQglqGxg65YDwPxyXTnUvxZxonbuDAc1Y1griEo2dV8piOpR9nvOJmdP6dHiA--',
        tag: '#cm<data:post.id/>',
        seed: <data:post.id/>
    });
});
</script>
<!-- カテゴリランキングモジュール END -->
5. テンプレートを保存して、ページを確認する

これで、このページにあるように、
カテゴリランキング上位3件の画像を自動で表示できます。
どのカテゴリが選択されるかは、category_idsで指定した
カテゴリから、投稿IDによって決まります。

注意:
App IDを必ず自分のものに書き換えてください
Yahooアフィリエイトのみ対応しています。Value Commerceアフィリエイトは対象外です。
アフィリエイトIDは自分のものに書き換えてください。
カテゴリIDも自分の好みのIDに書き換えてください。
デザイン崩れなど、自己責任でおねがいします。

人気の投稿