「BlogPeople Loves Cataloger」を横長表示してみる

☆

BlogPeople と Cataloger (カタロガー) のコラボレーション企画「BlogPeople Loves Cataloger」が先日から始まっています。この企画に参加するには A8.net と BlogPeople の両方に会員登録している必要があります。

「BlogPeople Loves Cataloger」という名前からもわかるように、「BlogPeople Loves XXX」シリーズの1つです。 BlogPeople にログインして、blog 貼り付け用の JavaScript を取得してくるところまでは他の「BlogPeople Loves XXX」と同じ。どこが違うかというと、A8.net 経由のアフィリエイトが絡んでいるところ。つまり、今回は指示された JavaScript を blog のサイドバーなどに貼り付けると、Cataloger の売れ筋商品のリストが画像付きで表示されるだけではなく、その画像をクリックして Cataloger のサイトにアクセスした後、買い物をすると商品代金の何パーセントかが報酬としてもらえます。自分で買うのも OK なので、自分で買った場合は、普通に買うより安く買えることになります。

で、そんな「BlogPeople Loves Cataloger」ですが、今のところ、縦長タイプ(いわゆるスカイクレイパー)のものしか用意されていません。サイドバーに貼るのなら、それでもいいんですが、もし横長タイプがあれば、blog のヘッダー部分やフッター部分に貼りたい人もいますよね。

そんな訳で、横長で表示するものを作ってみました。あくまでも表示(見栄え)を変えるだけで、JavaScript が生成する html タグの改変はしていませんので、A8.net の規約には抵触しません。

商品を 5個、横長に表示するタイプ

以下のような html コードを使えば、横長で、商品が5個表示されます。 (→ 表示例)

<script language="javascript"><!-- 
bp_cataloger_list=5; 
bp_cataloger_a8mat="あなたのA8mat番号"; 
//--></script> 
<style type="text/css"> 
<!-- 
.bp-loves-cataloger { width: 680px; } 
.bp-loves-cataloger-item { text-align: center; }
.bp-loves-cataloger-item img { margin-right: 5px; border: 1px solid #999; }
.bp-loves-cataloger-product { font-weight: bold; font-size: x-small; text-align: left; }
.bp-loves-cataloger-product a { text-decoration: none; }
.bp-loves-cataloger-product-detail { font-weight: normal; font-size: x-small; text-align: left; }
.bp-loves-cataloger-product-detail a { text-decoration: none; }

.bp-loves-cataloger-banner { width: 100%; margin-top: 10px; text-align: center;
                             padding-top: 10px; /* for Opera */ }
.bp-loves-cataloger-poweredby { text-align: center; }
.bp-loves-cataloger-poweredby a { font-size: x-small; text-decoration: none; }

.bp-loves-cataloger-item { float:left; width:120px; margin-left: 10px; } 
.bp-loves-cataloger br { display: none; } 
.bp-loves-cataloger-banner { clear: both; }
--> 
</style> 

<script type="text/javascript" src="http://loves.blogpeople.net/display/usr/loves/cataloger/cataloger_utf8.js"></script> 

商品を 3個、横長に表示するタイプ

以下のような html コードを使えば、横長で、商品が3個表示されます。 (→ 表示例)

<script language="javascript"><!-- 
bp_cataloger_list=3; 
bp_cataloger_a8mat="あなたのA8mat番号";
//--></script> 
<style type="text/css"> 
<!-- 
.bp-loves-cataloger { width:400px; }
.bp-loves-cataloger-item { text-align: center; }
.bp-loves-cataloger-item img { margin-right: 5px; border:1px solid #999; }
.bp-loves-cataloger-product { font-weight: bold; font-size:x-small; text-align: left; }
.bp-loves-cataloger-product a { text-decoration: none; }
.bp-loves-cataloger-product-detail { font-weight:normal; font-size:x-small; text-align: left; }
.bp-loves-cataloger-product-detail a { text-decoration:none; }

.bp-loves-cataloger-banner { width:100%; margin-top: 5px; text-align: center;
                             padding-top: 10px; /* for Opera */ }
.bp-loves-cataloger-poweredby { text-align: center; }
.bp-loves-cataloger-poweredby a { font-size:x-small; text-decoration: none; }

.bp-loves-cataloger-item { float: left; width: 120px; margin-left: 10px; } 
.bp-loves-cataloger br { display: none; } 
.bp-loves-cataloger-banner { clear: both; }
--> 
</style> 

<script type="text/javascript" src="http://loves.blogpeople.net/display/usr/loves/cataloger/cataloger_utf8.js"></script> 

参考

上記のコードは、Windows 用の Internet Explorer 6.0、Firefox 1.5、Opera 8.5 で確認しました。スタイルシートは各自で適当にカスタマイズしてみてください。「あなたのA8mat番号」というのは、「ZSTYM+7U7HIQ+IX4+NWC81」のような文字列で、「BlogPeople Loves Cataloger」の JavaScript をもらってくるときに、A8.net の会員ID(ASID)を入力したと思いますが、その ASID を元に生成された文字列です。下のようなコードが生成されたと思いますが、このコードの赤い字の部分が A8mat番号 になります。

<link rel="stylesheet"
href="http://loves.blogpeople.net/display/usr/loves/cataloger/bp-loves-cataloger0.css"
type="text/css" />
<script language="javascript"><!--
bp_cataloger_list=5;
bp_cataloger_a8mat="ZSTYM+7U7HIQ+IX4+NWC81";
//--></script>
<script type="text/javascript"
src="http://loves.blogpeople.net/display/usr/loves/cataloger/cataloger_utf8.js"
></script>

このページの下に「商品を 5個、横長に表示するタイプ」を貼り付けてみています。参考にしてください。

「Blog People loves Cataloger」というサービスをリリースしました。
ゲームのタイトーさんがやっている「Cataloger」というECサイトがあるんですが、そこでの売れ筋トップ10の商品をリンクリスト形式にして配信する、というものです。「Cataloger」は雑誌連動型ECサイトということで、雑誌として書店にも並んでいます。

Modern Syntax : Blog People loves Cataloger　始まりました。

この「Blog People loves Cataloger」が始まる前から、Cataloger のアフィリエイト契約(A8.net経由)はしていたんですが、そちらの方は JavaScript による連動企画はないので、今回、別途、新たな気持ちで契約してみました。両方の契約をうまく使い分けることができれば、面白いですね。というか、「Blog People loves Cataloger」対応版の方の契約だけでいいのかな。「Blog People loves Cataloger」対応版の方でも商品リンクは使えるみたいだし。

ということで、BlogPeople の会員の人は、これから新たにアフィリエイトを始める場合は、「Blog People loves Cataloger」対応版の方の Cataloger のアフィリエイト契約だけすればいいんじゃないかと思います。どっちにしろ、A8.netとの契約が事前に必要です。アフィリエイトに興味のある人で BlogPeople にも参加している人は、この機会に A8.net を使ってみてはどうでしょうか?