ゼロからホストページにマルチいいねボタンを書く

以下のページでは、いいねボタンをゼロからホストページに書く例を解説しました。

このページは、マルチいいねボタンをゼロからホストページに書く例を示します。ただし、最初から全ステップを説明するのではなく、通常の「いいねボタン」と「マルチいいねボタン」で異なる部分を解説していきます。このページを読む前に、上記の「ゼロからホストページにボタンを書く」のチュートリアルを試しておいてください。

さて、上記の例では、最初にボタンテンプレート ( tpl-sb-from-zero-h ) をダウンロードしました。今回もこのテンプレートを使用しますが、ダウンロード後に、以下の二点を変更して、マルチボタン用のテンプレートにします。

変更点１

テンプレートのフォルダ名を tpl-sb-from-zero-h から tpl-mb-from-zero-h に変える。

変更点２

テンプレート内の設定ファイル ( config.inc.php ) を開けて、以下の一行を挿入する。

$cfg["type"] = "multi";

挿入する位置に関しては、以下の設定ファイルを参考にしてください。

<?php
//==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>
//
// このファイルはAjaxいいねボタンv2.23用のボタンテンプレート設定ファイルです。
//
// このファイルのガイドは以下のURLでご覧になれます。
//
// Ajaxいいねボタン用URL:
// http://jpn.phpkobo.com/ajax-iine-button/v2.23/button-template-config-file
//
// AjaxいいねボタンDX用URL:
// http://jpn.phpkobo.com/ajax-iine-button-dx/v2.23/button-template-config-file
//
//==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<
$cfg["type"] = "multi";

//-- 【投票数の表示フォーマット】
//-- 　"c3" : 投票数を3桁ごとにカンマで区切る
//-- 　"c4" : 投票数を4桁ごとにカンマで区切る
//-- 　""   : 投票数をカンマで区切らない
$cfg["vcnt-format"] = "c3";

//-- 【アンドゥ機能の有効・無効】
//-- 　1 : アンドゥ機能を有効にする
//-- 　0 : アンドゥ機能を無効にする
$cfg["enable-undo"] = 1;

//-- 【「投票済み」の表示】
//-- 　1 : 「投票済み」の表示を有効にする
//-- 　0 : 「投票済み」の表示を無効にする
$cfg["indicate-voted"] = 1;

//-- 【HTML及びCSSのロード】
//-- 　1 : HTML及びCSSをホストページへロードする
//-- 　0 : HTML及びCSSをホストページへロードしない
$cfg["load-resource"] = 0;

//-----------------------------------------------------------------
// END OF FILE
//-----------------------------------------------------------------
?>

これでゼロから書くマルチボタンのテンプレートができました。これを使用して、上記の「ゼロからホストページにボタンを書く」のチュートリアルを試してください。ページ内で出てくる sb がすべて mb になることに気をつけてください。チュートリアルを最後まで行った結果のコードは以下のようになります。

<style>
.aiin-css-tpl-mb-from-zero-h .aiin-btn {
	display:inline-block;
	padding:10px;
	color:white;
	background-color:blue;
	cursor:pointer;
}
.aiin-css-tpl-mb-from-zero-h .aiin-btn.aiin-sel {
	background-color:green;
}
.aiin-css-tpl-mb-from-zero-h .aiin-vcnt {
	display:inline-block;
	min-width:20px;
	text-align:right;
}
</style>

<div class="ajax-iine" data-pid="my-button" data-tid="tpl-mb-from-zero-h">
	<div class="aiin-css-tpl-mb-from-zero-h">
		<div class="aiin-btn">
			いいね!
			<span class="aiin-vcnt"></span>
		</div>
	</div>
</div>

これは、すべての sb が mb になっている以外、チュートリアルに出てくる最終のコードと同じものです。

このコードに、以下の３点の変更を行い、正規のマルチいいねボタンのコードにします。

変更点１

ボタンを <div class="aiin-btn-item">...</div> で囲む。

<div class="aiin-btn-item">
	<div class="aiin-btn">
		いいね!
		<span class="aiin-vcnt"></span>
	</div>
</div>

変更点２

ボタンにボタンIDを付ける。

<div class="aiin-btn-item">
	<div class="aiin-btn" data-bid="iine">
		いいね!
		<span class="aiin-vcnt"></span>
	</div>
</div>

マルチいいねボタンでは、複数のボタンを表示するので、どのボタンがクリックされたのか、わかるようにしておく必要があります。そのために、ボタン一つ一つに、ユニークなIDをつけます。IDをつけるタグは、class="aiin-btn" を持つタグです。属性名は data-bidを使用します。aiin-bidの値はユニークな値であるならば、なんでもかまいません。上記の例では iine がIDです。

次の例では、「わるいね」ボタンを追加しました。ボタンのIDは waruine がIDです。

<div class="aiin-btn-item">
	<div class="aiin-btn" data-bid="iine">
		いいね!
		<span class="aiin-vcnt"></span>
	</div>
</div>

<div class="aiin-btn-item">
	<div class="aiin-btn" data-bid="waruine">
		わるいね!
		<span class="aiin-vcnt"></span>
	</div>
</div>

変更点３

すべてのボタンを <div class="aiin-btn-group">...</div> で囲む。

<div class="aiin-btn-group">
	<div class="aiin-btn-item">
		<div class="aiin-btn" data-bid="iine">
			いいね!
			<span class="aiin-vcnt"></span>
		</div>
	</div>
	
	<div class="aiin-btn-item">
		<div class="aiin-btn" data-bid="waruine">
			わるいね!
			<span class="aiin-vcnt"></span>
		</div>
	</div>
</div>

これで正規のマルチいいねボタンのコードになりました。作業完了です。

追加変更点

さて上記のコードを表示すると、「いいね」と「わるいね」ボタンが垂直に並びます。これがマルチいいねボタンのディフォルトの並び方で、間違っているわけではありません。ボタンを水平に並べたい場合は、以下のCSSを<style>...</style>に追加してください。

.aiin-css-tpl-mb-from-zero-h .aiin-btn-item {
	display:inline-block;
}