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

観測気球

収集物の記録書庫 a data archive of collection -- collectible toys

[要旨] 「BlogPeople Loves Cataloger」に参加してみました。公式には縦長タイプのものしかありませんが、工夫すれば、横長タイプのものも作ることができます。
[キーワード] BlogPeople,A8.net,アフィリエイト,カタロガー

« もえもえ市場(BlogPet) | トップページ | かしまし ~ガール・ミーツ・ガール~ 第4話 »

2006.02.02

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

BlogPeopleCataloger (カタロガー) のコラボレーション企画「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 を使ってみてはどうでしょうか?

投稿者: tsupo 2006.02.02 午後 11:44 | 固定リンク | このエントリーをはてなブックマークに追加 | このエントリを del.icio.us に登録 このエントリの del.icio.us での登録状況 | このエントリを Buzzurl に追加このエントリの Buzzurl での登録状況 | このエントリをlivedoorクリップに登録 このエントリのlivedoorクリップでの登録状況 このエントリをlivedoorクリップに登録している人の数 | 酢鶏巡回中

楽天市場


ウェブログ・ココログ関連」カテゴリ内の最近の記事

日記・コラム・つぶやき」カテゴリ内の最近の記事

品揃え豊富で安い!NTT-X Store


アマゾンわくわく探検隊

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/6737/8474168

この記事へのトラックバック一覧です: 「BlogPeople Loves Cataloger」を横長表示してみる:

» 「BlogPeople Loves Cataloger」を横長表示するためのTIPS from Modern Syntax
[観] 「BlogPeople Loves Cataloger」を横長表示してみ... 続きを読む

受信: 2006.02.03 午後 01:05

コメント

コメントを書く




※イタズラ防止のため、メールアドレスを入力しないと投稿できません。

次からのコメント入力の手間を省くために、名前やメールアドレスをcookieに記憶しますか?


URL を入力すると、その URL にリンクがはられます。
なお、メールアドレスは公開されません。ご安心ください。


ワード

ニッセン

fujisan.co.jp

楽天市場