ライブチャット 待機ライブ映像の表示方法 (2009.1.17更新)


あなたのサイトに下記ような待機ライブ映像の表示が可能になります。
待機映像はフリー待機中の女の子のライブ映像が常にリアルタイム表示されますので、
よりリアルで、訪れたユーザーのクリック意欲を高めることが可能です。
映像サイズも自由に変更することができますので、大画面ライブ映像の表示も可能です。

設置ができないサーバーやフリーサイトの方のために、こちらで貴サイト用IDを付けたものを
代行設置して貴サイトからiframeで読み込む方式を取ることも可能です。お問い合わせ下さい。

生中継ライブバージョン
FASHバージョン
応用例 のぞきライブ構築

New!!
今まで待機ライブ映像は1分間でストップしていましたが、エンドレスで生中継を表示できるようになりました。
オンラインリストと組み合わせて「無料のぞきライブサイト」の構築も可能です。→構築例

待機ライブ画面1 (160X208)
 
待機ライブ画面2 (320X295)

待機ライブ付バナー (500X208)



設置方法

まず、random_preview.jsファイルをこちらから をダウンロード後、メモ帳などで展開して下記の通り必要箇所(赤字部分)を書き換えます。

53行目と95行目 自分のコードに書き換えます。(デフォルトではze5になっていますので自分のコードze○○○に書き換えて下さい)

prevlink.setAttribute('href', 'http://click.dtiserv2.com/Click/777-159-ze
5');  

var w = window.open('http://click.dtiserv2.com/Click/777-159-ze
5', 'preview', 'resizable=yes,toolbar=yes,scrollbars=yes,personalbar=yes,menubar=yes,location=yes,status=yes,width=800,height=800');

完了後、表示するページと同じ階層にrandom_preview.js をFTPでアップロードします。

次に表示するページの<head></head>間に下記のタグを書き加えます。

<script src="http://aff-jp.dxlive.com/vctp-js/javascript_op.js"></script>
<script src="random_preview.js"></script>
<script src="http://aff-jp.dxlive.com/include/js/op.js"></script>
<script src="http://aff-jp.dxlive.com/include/js/all_performers.js"></script>
<script>
var configuration=new Configuration;
configuration.Ip='66.28.254.175';
configuration.Server='zeppin.com';
configuration.Copyright='Copyright (C) zeppin.com';
configuration.Language='jp';
</script>

続いて<body>タグにonLoad="cyclePreview()"を書き加えます。

<body bgcolor="#FFFFFF" text="#000000" onLoad="cyclePreview()">

待機画面部分のサイズを変更したい場合は以下のように数字を入れてください。
<body onLoad="cyclePreview(横幅,縦幅)">
例)cyclePreview(120,90)

続いて、ライブ映像を表示したい場所に下記テーブルタグを挿入します。
表示する映像サイズやデザインによってテーブルをカスタマイズして下さい。
また、画像等も自作OKです。(別途、1x1の透過画像 spacer.gifや生中継画像、CHENGE画像を用意して下さい。下記からダウンロードできます)

spacer.gif
LIVE生中継
change1
change2
change3
header
footer
待機ライブ付バナー用1
待機ライブ付バナー用2
待機ライブ付バナー用3
待機ライブ付バナー用4
待機ライブ付バナー用5

【待機ライブ画面1】

<table width="160" height="200" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr bgcolor="#000000">
<td height="33" colspan="3" align="center">
<a href="http://click.dtiserv2.com/Click/777-159-ze5" target="_blank"><img src="header.gif" width="160" height="33" border=0></a>
</td>
</tr>
<tr bgcolor="#000000">
< !-- Display performer username -->
<td height="15" colspan="3" align="center" class="a12" id="namehere" style="color:#FFFFFF"></td>
</tr>
<tr valign="top">
< !-- Display free preview -->
<td colspan="3" align="center" bgcolor="#000000" id="vidPlayerHere"></td>
</tr>
<tr>
<td height="12" colspan="3"><div align="center"><a href="javascript: void cyclePreview(120,90);"><img src="change3.gif" width="160" height="12" border=0></a></div></td>
</tr>
<tr>
<td><div align="center"><a id="preview2preview" href="http://www.zeppin.com/preview.shtml" target="preview"><img src="spacer.gif" width="0" height="0" border="0"></a></div></td>
<td width="160" height="20" valign="top">
<div align="center"><a href="http://click.dtiserv2.com/Click/777-159-ze5" target="_blank">
<img src="footer.gif" width="160" height="20" border="0"></a></div></td>
<td><div align="center"><a id="preview2profile" href="http://www.zeppin.com/profile.shtml" target="profile"><img src="spacer.gif" width="0" height="0" border="0"></a></div></td>
</tr>
</table>

待機画面部分のサイズを変更したい場合は以下のように数字を入れてください。
<a href="javascript: void cyclePreview(横幅,縦幅);"
例)cyclePreview(120,90)

【待機ライブ画面2】

<table width="320" height="295" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr bgcolor="#000000">
<td height="15" align="center" colspan="3"><img src="nama.gif" width="80" height="8"></td>
</tr>
<tr bgcolor="#000000">
<!-- Display performer username -->
<td height="15" colspan="3" align="center" class="a12" id="namehere" style="color:#FFFFFF"></td>
</tr>
<tr>
<!-- Display free preview -->
<td id="vidPlayerHere" align="center" bgcolor="#000000" colspan="3"></td>
</tr>
<tr>
<td><div align="center"><a id="preview2preview" href="http://www.zeppin.com/preview.shtml" target="preview"><img src="spacer.gif" width="0" height="0" border="0"></a></div></td>
<td height="23">
<div align="center"><a href="javascript: void cyclePreview(320,240);"><br>
<img src="chenge2.gif" width="200" height="23" border="0"></a></div></td>
<td><div align="center"><a id="preview2profile" href="http://www.zeppin.com/profile.html" target="profile"><img src="spacer.gif" width="0" height="0" border="0"></a></div></td>
</tr>
</table>

待機画面部分のサイズを変更したい場合は以下のように数字を入れてください。
<a href="javascript: void cyclePreview(横幅,縦幅);"
例)cyclePreview(320,240)

【待機ライブ付バナー】

【待機ライブ画面1】で作ったHTMLを
貴サイトからIFRAMEで読み込みます。
右側の画像は下記に着せ替えが可能です。
待機ライブ付バナー用1
待機ライブ付バナー用2
待機ライブ付バナー用3
待機ライブ付バナー用4
待機ライブ付バナー用5

<TABLE WIDTH=500 BORDER=0 CELLPADDING=0 CELLSPACING=0 bgcolor="#000000">
<TR>
<TD><iframe src="http://www貴サイトサーバー内HTML" width="160" height="208" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"></iframe></TD>
<TD>
<a href="http://click.dtiserv2.com/Click/777-159-ze5" target="_blank"><IMG SRC="http://www.zeppin.com/livebanner/live_02.jpg" alt="ライブチャットZeppinLiveDX" WIDTH=340 HEIGHT=208 border="0"></a></TD>
</TR>
</TABLE>

【FLASHバージョン】

176x144
  130x98

176x144 FLASHコード

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="176" height="144">
<param name="movie" value="http://www.zeppin.com/affili/manual/preview-l.swf?id=zeXXX">
<param name="quality" value="high">
<embed src="http://www.zeppin.com/affili/manual/preview-l.swf?id=zeXXX" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="176" height="144"></embed>
</object>

130x98 FLASHコード

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="130" height="98">
<param name="movie" value="http://www.zeppin.com/affili/manual/preview-s.swf?id=zeXXX">
<param name="quality" value="high">
<embed src="http://www.zeppin.com/affili/manual/preview-s.swf?id=zeXXX" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="130" height="98"></embed>
</object>