AZlink/TinyWidget サンプル

最初にブログパーツを使用する HTML の <head> タグに tinywidget.min.js を読み込むための <script> タグを追加してください。（以下は /azlink/ にスクリプトを設置した例です。）

sidebar ブログパーツ

縦並び型ブログパーツのサンプルです。AZlink.TinyWidget.sidebar を使用します。

音楽カテゴリのニューリリース (new-releases/music) から3件表示。

Script

  <script type="text/javascript">
  //<![CDATA[
  AZlink.TinyWidget.sidebar({
    associateId: 'Your-Associate-ID',
    node: 'new-releases/music',
    numItems: 3
  });
  //]]>
  </script>

ビデオゲームベストセラー (bestsellers/videogames) とコミック新着 (new-releases/books/2278488051) をランダムに、詳細情報付きで3件表示。

Script

  <script type="text/javascript">
  //<![CDATA[
  AZlink.TinyWidget.sidebar({
    associateId: 'Your-Associate-ID',
    node: [ 'bestsellers/videogames', 'new-releases/books/2278488051' ],
    type: 'detail',
    numItems: 3
  });
  //]]>
  </script>

banner ブログパーツ

横並び型ブログパーツのサンプルです。AZlink.TinyWidget.banner を使用します。

フィギュア・ドールのベストセラー (bestsellers/hobby/2189356051) から順位付きで5件表示。

Script

  <script type="text/javascript">
  //<![CDATA[
  AZlink.TinyWidget.sidebar({
    associateId: 'Your-Associate-ID',
    node: 'bestsellers/hobby/2189356051',
    order: true,
    numItems: 5
  });
  //]]>
  </script>

MP3ダウンロード（楽曲）のベストセラー／新着ニューリリース／ヒット商品をランダムに、順位と詳細情報付きで5件表示。

Script

  <script type="text/javascript">
  //<![CDATA[
  AZlink.TinyWidget.sidebar({
    associateId: 'Your-Associate-ID',
    node: [
      'bestsellers/dmusic/digital-music-track',
      'new-releases/dmusic/digital-music-track',
      'movers-and-shakers/dmusic/digital-music-track'
    ],
    type: 'detail',
    order: true,
    numItems: 5
  });
  //]]>
  </script>

ブログパーツパラメータ

AZlink.TinyWidget.sidebar と AZlink.TinyWidget.sidebar には以下のパラメータが指定できます。

associateId は必須（省略しても動きますが）、その他はオプションです。

AZlink.TinyWidget.api を使用したカスタマイズ

AZlink.TinyWidget.sidebar と AZlink.TinyWidget.sidebar を呼び出した後、実際の処理は AZlink.TinyWidget.api が行います。

この関数の onload コールバックに自前のフォーマット関数を指定することで、より高度なカスタマイズが行えます。詳しくはソースをご覧ください。

CSS によるデザインのカスタマイズ

ブログパーツの生成する HTML には以下の例のようにクラス属性が指定されます。CSS を指定してデザインをカスタマイズしてください。

パラメータ名	型	説明
associateId	文字列	アソシエイトリンクに埋め込むアソシエイトIDまたはトラッキングIDを指定してください。
node	文字列	Amazon のベストセラー等と連動した商品を表示する際に、データ取得元のノードIDを指定します。Amazon のベストセラー等のページの URL から gp までを取り除いたものがノードIDとなります。（TV ゲームのベストセラーなら、TV ゲームのベストセラーページ http://www.amazon.co.jp/gp/bestsellers/videogames なら bestsellers/videogames がノードIDです。）このパラメータを省略するとランダムにノードが選択されます。ブログパーツと連動可能なノードは、ベストセラー、新着ニューリリース、ヒット商品、一番ギフトとして贈られている商品、リストの中で一番ほしい物です。データの連動には Amazon の RSS を使用しています。RSS が存在しないノードについては連動できません。（特にトップノードは連動できませんのでご注意ください。）ノードIDには下位ノードを指定することもできます。例えばゲームのベストセラーには下位ノードとしてプレイステーション3（http://www.amazon.co.jp/gp/bestsellers/videogames/15782591）等があり、node パラメータに "bestsellers/videogames/15782591" を指定するとプレイステーション3のベストセラーと連動したブログパーツとなります。 Amazon でベストセラーページを巡回していると、URL の末尾に /ref= 形式のアクセス元識別子が付くことがありますが、ノードIDにアクセス元識別子は不要ですので余分な部分は指定しないようにしてください。（動きません。）
type	文字列	simple または detail のいずれかを指定してください。simple を指定すると画像と商品名のリンクが表示されます。detail を指定すると価格等の詳細情報も表示されます。省略時は simple になります。
numItems	整数	表示する商品の最大個数を 1 〜 10 の間で指定します。省略した場合は 10 となります。
imageFlags	文字列または文字列の配列	Amazon の画像に指定するオプションを配列で指定してください。例えば`[ 'AA600', 'CR200,50,200,300' ]`と指定すると 600px 正方形の画像をオフセット 200,50 サイズ 200x300px でクリッピングとなります。省略時は`[ 'AA160' ]`となります。オプションに指定可能な値は、Amazon商品画像のカスタマイズ（理論編） - Shiz Labs などを参照してください。こちらのページに書かれているとおり Amazon の画像に複数のオプションを指定する際は _ で区切っていますが、同じ形式の文字列をこのパラメータに指定しても有効です。（`[ 'AA600', 'CR200,50,200,300' ]` は '_AA600_CR200,50,200,300_' と同じ意味になります。）
target	文字列または false	アソシエイトリンクの <a> タグの target 属性。デフォルトは _blank です。false を指定するとアソシエイトリンクに target 属性が付かなくなります。

このサンプルのブログパーツのデザインは、styles.css で指定しています。適当にコピペして使ってください。

サイドバー

サイドバー型ブログパーツには、最上位要素に azlink-widget と azlink-sidebar-widget、各アイテムに azlink-widget-item と azlink-sidebar-widget-item クラスが指定されます。

その他のクラスについては以下のブログパーツ出力例を参考にしてください。（赤字のクラスは最初または最後の要素のみに付与されます。）

<div class="azlink-widget azlink-sidebar-widget">
  <div class="azlink-widget-item azlink-sidebar-widget-item azlink-widget-first-item azlink-sidebar-widget-first-item">
    <a target="_blank" class="azlink-widget-associate-link"
       href="http://www.amazon.co.jp/exec/obidos/ASIN/B00361FKX2/[ASSOCIATE_ID]/ref=nosim/">
      <img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/619c7ZMH6XL._AA160_.jpg">
      <br>
      <span class="azlink-widget-title">
        <b>1位</b>
        モンスターハンター フロンティア オンライン ビギナーズパッケージ(オンライン専用)
        (初回特典: 武器のガンランス「ワイヴェンボルト」が入手できるイベントコード同梱)
      </span>
    </a>
  </div>
  <div class="azlink-widget-item azlink-sidebar-widget-item">
    <a target="_blank" class="azlink-widget-associate-link"
       href="http://www.amazon.co.jp/exec/obidos/ASIN/B002XUM5PS/[ASSOCIATE_ID]/ref=nosim/">
      <img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/61KmwM1ogML._AA160_.jpg">
      <br>
      <span class="azlink-widget-title">
        <b>2位</b>
        ときめきメモリアル Girls Side 3rd Story
      </span>
    </a>
  </div>
  <div class="azlink-widget-item azlink-sidebar-widget-item azlink-widget-last-item azlink-sidebar-widget-last-item">
    <a target="_blank" class="azlink-widget-associate-link"
       href="http://www.amazon.co.jp/exec/obidos/ASIN/B003DZ03B0/[ASSOCIATE_ID]/ref=nosim/">
      <img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/51TfR1Gz%2B0L._AA160_.jpg">
      <br>
      <span class="azlink-widget-title">
        <b>3位</b>
        ラブプラス+
      </span>
    </a>
  </div>
</div>

バナー

バナー型ブログパーツの場合、最上位要素に azlink-widget と azlink-banner-widget、各アイテムに azlink-widget-item と azlink-banner-widget-item クラスが指定されます。その他のクラスについては以下の例を参考にしてください。

その他のクラスについては以下のブログパーツ出力例を参考にしてください。（赤字のクラスは最初または最後の要素のみに付与されます。）

<table class="azlink-widget azlink-banner-widget">
  <tbody>
    <tr>
      <td class="azlink-widget-item azlink-banner-widget-item azlink-widget-first-item azlink-banner-widget-first-item">
        <a target="_blank" class="azlink-widget-associate-link"
           href="http://www.amazon.co.jp/exec/obidos/ASIN/B00361FKX2/[ASSOCIATE_ID]/ref=nosim/">
          <img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/619c7ZMH6XL._AA160_.jpg">
          <br>
          <span class="azlink-widget-title">
            <b>1位</b>
            モンスターハンター フロンティア オンライン ビギナーズパッケージ(オンライン専用)
            (初回特典: 武器のガンランス「ワイヴェンボルト」が入手できるイベントコード同梱)
          </span>
        </a>
      </td>
      <td class="azlink-widget-item azlink-banner-widget-item">
        <a target="_blank" class="azlink-widget-associate-link"
           href="http://www.amazon.co.jp/exec/obidos/ASIN/B002XUM5PS/[ASSOCIATE_ID]/ref=nosim/">
          <img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/61KmwM1ogML._AA160_.jpg">
          <br>
          <span class="azlink-widget-title">
            <b>2位</b>
            ときめきメモリアル Girls Side 3rd Story
          </span>
        </a>
      </td>
      <td class="azlink-widget-item azlink-banner-widget-item azlink-widget-last-item azlink-banner-widget-last-item">
        <a target="_blank" class="azlink-widget-associate-link"
           href="http://www.amazon.co.jp/exec/obidos/ASIN/B003DZ03B0/[ASSOCIATE_ID]/ref=nosim/">
          <img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/51TfR1Gz%2B0L._AA160_.jpg">
          <br>
          <span class="azlink-widget-title">
            <b>3位</b>
            ラブプラス+
          </span>
        </a>
      </td>
    </tr>
  </tbody>
</table>

詳細表示

type: "detail" を指定して詳細表示を行う場合、各商品の詳細情報には以下の例のようにクラス属性が付与されます。

azlink-widget-new-item クラスは未発売の商品にのみ付与されます。

<a target="_blank" class="azlink-widget-associate-link"
   href="http://www.amazon.co.jp/exec/obidos/ASIN/B0040GJQQ4/[ASSOCIATE_ID]/ref=nosim/">
  <img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/617dAx1W2cL.09._AA160_.jpg"><br>
  <span class="azlink-widget-title">【特典生写真付き】Beginner(Type-A)(イベント参加券入り 初回完全限定生産盤)(DVD付)</span>
</a>
<span class="azlink-widget-iteminfo">AKB48</span>
<span class="azlink-widget-iteminfo">キングレコード</span>
<span class="azlink-widget-date azlink-widget-new-item">2010/10/27</span>
<span class="azlink-widget-price">1,395円</span>

AZlink/TinyWidget サンプル

JavaScript の読み込み

sidebar ブログパーツ

banner ブログパーツ

ブログパーツパラメータ

AZlink.TinyWidget.api を使用したカスタマイズ

CSS によるデザインのカスタマイズ

サイドバー

バナー

詳細表示