できる!ブログなどのレス記事に、自作のいいねボタンを動的に設置する。
KENTWEB ASKA BBS のレス記事に自作のいいねボタンといまいちボタンをカスタマイズできる。
〜 CGI + PHP + MySQL + jQuery + Ajax 〜

1.   準備 | 2.  いいねボタンのカスタマイズ方法 | 3.  いいねボタン設置サンプルデモ

CGIのKENTWEB BBS ASKAのレス記事に自作のいいねボタンといまいちボタンをカスタマイズしてみました。

  準 備

必要なファイルをダウンロードし、下記のディレクトリ構成例にならい、さーばーへアップロードします。

ディレクトリ構成例
public_html / index.html (トップページ)
    |
    +-- aska / aska.cgi    [705] ... 掲示板本体
          |    admin.cgi   [705] ... 管理ファイル
          |    init.cgi    [604] ... 設定ファイル
          |    captcha.cgi [705] ... 画像認証ファイル
          |    check.cgi   [705] ... 動作チェックファイル(チェック後はファイル削除)
          |    style.css
          |    config.php           ... いいねボタン関連
          |    iine-getCount-v2.php ... いいねボタン関連
          |    iine-vote-v2.php     ... いいねボタン関連
          |
          +-- lib / jcode.pl 他
          |    |
          |    +-- Crypt / *.*
          |    +-- GD / *.*
          |    +-- bin / *.ttf *.png
          |
          +-- data / log.cgi [606]   ... 記事ファイル
          |
          +-- cmn / bbs.css
          |         *.png
          |
          +-- tmpl / bbs.html
          |          *.html
          |
          +-- img / smile-yellow1.png    ... いいねボタン関連
          |         trouble-yellow1.png  ... いいねボタン関連 
          |
          +-- js / clickCount-getCount-v2.js  ... いいねボタン関連
          |
          +-- log / *****.count    ... いいねボタン関連(1ボタン当たり1ファイル発生)
          |          ・・・
          |         *****.count

    +-- MySQLデータベース   ... いいねボタン関連


  いいねボタンのカスタマイズ方法

一般的にレス記事は、下「レス記事の例」のとおり、(1)ヘッダー、 (2)入力された記事本文および (3)フッターから構成されています。 いいねボタンを表示させるには、(1)ヘッダーまたは (3)フッターの部分に、ボタン用のタグコードを埋め込みます。

レス記事の例(KENTWEB ASKA)

・ソースコード(bbs.html 66行目から)
<div class="art">
	[<b>!num!</b>] <strong>!sub!</strong> <!-- ヘッダー -->
	<div class="com">!comment!</div>  <!-- 記事本文 -->
	<div class="ope">  <!-- フッター -->
		!icon:user.png! <b>!name!</b> !icon:clock.png! !date! !home!
		| <a href="!bbs_cgi!?res=!num!">返信</a> | <a href="!bbs_cgi!?del=!num!">削除</a> |
	</div>
</div>

いいねボタン設置HTMLコード

<DIV style="cursor: pointer;width:64px" 
   class="IineVote"       <!-- 固定(必須)-->
   data-id="iine0001"    <!-- いいね!ボタンid(必須)。サーバー内ユニーク。省略時はランダム文字列を自動付与(動的設置用)。-->
   data-lock=""           <!-- 二重投票制御用id。単一ボタンの場合省略可。複数ボタンのグループの場合必ず指定。-->
   data-count="iine-right" <!-- カウント値の配置場所(必須)。吹き出しCSSのCLASS名、-->
                           <!-- または吹き出しなしのときright, left, top, bottomを含む文字列。(必須)-->
   data-time=""          <!-- 投票間隔。単位は秒。この間は、つぎの投票はできない。-->
   data-file=""          <!-- 投票数カウントファイルの種別。txt:テキストファイル sql:MySQLデータベースファイル。省略時はtxt。-->
   data-title="いいね!" <!-- いいね!ボタンのタイトル。-->
   >         
  <img src="img/smile-yellow1.png" class="IineTmg" width="32">
</DIV>
   ※ サンプルではいいねボタンidのランダム文字列として、data-id は "現在時刻yyyymmddhhmmss+2桁ランダム数字"の形式を使用します。

  ASKA BBS に対して、動的にいいねボタンを設置するためには、つぎのファイルをカスタマイズする必要があります。


   サンプルは、"いいねボタン" と "いまいちボタン" の二者択一ボタンの例です。下ソースコードは、カスタマイズ部分を赤字で表示しています。
  記事ファイル(log.cgi)の書き込み形式は、つぎのように、<>区切りの12の項目から構成されています。末尾の2項目(11,12)は、
  このサンプルの追加カスタマイズ項目になります。

記事ファイル(log.cgi)の書込み形式(1記事1行)
 1     2         3     4           5     6         7        8       9               10    11              12
番号<>投稿時間<>名前<>メールアド<>件名<>コメント<>参照URL<>IPアド<>削除パスワード<>時間<>いいねボタン1<>いいねボタン2<>
記事ファイル(log.cgi)の読み込み形式 (1記事1行)
 1     2         3     4           5     6         7        8       9       10      11              12
番号<>投稿時間<>名前<>メールアド<>件名<>コメント<>参照URL<>未定義<>未定義<>未定義<>いいねボタン1<>いいねボタン2<>


	# 記事数調整 ← 236行目(記事書込 - acpt_data関数)
	my @data = ($top);
	my $i = 0;
	while (<DAT>) {
		$i++;
		push(@data,$_);
		
		last if ($i >= $cf{maxlog}-1);
	}
        my $randstr1 = randstr(2,0);       #ランダム数字列2桁
        my $nowtime1 = get_nowtime();       #現在時刻yyyymmddmmss
           $nowtime1 = $nowtime1.$randstr1; #現在時刻yyyymmddmmss+ランダム数字列2桁=data-id(いいねボタンid)
        my $randstr2 = randstr(2,0); 
        my $nowtime2 = get_nowtime();
           $nowtime2 = $nowtime2.$randstr2;

	my $iine1 = "<DIV style='width:32px' class='IineVote' data-id='" . $nowtime1 . "' data-lock='" . $nowtime1 . "' data-count='iine-right'>";
           $iine1 .= "<img src='./img/smile-yellow1.png' class='IineTmg' width=16></DIV>";
	my $iine2 = "<DIV style='width:32px' class='IineVote' data-id='" . $nowtime2 . "' data-lock='" . $nowtime1 . "' data-count='iine-right'>";
           $iine2 .= "<img src='./img/smile-yellow1.png' class='IineTmg' width=16></DIV>";
 

	# 更新
	seek(DAT, 0, 0);
	print DAT "$no<>$date<>$in{name}<>$in{email}<>$in{sub}<>$in{comment}<>$in{url}<>$host<>$pwd<>$time<>$iine1<>$iine2<>\n";
	print DAT @data;
	truncate(DAT, tell(DAT));
	close(DAT);



	# ループ部 ← aska.cgi 118行目(記事表示 - bbs_list関数)
	for (@log) {
		my ($no,$date,$name,$eml,$sub,$com,$url,undef,undef,undef,$iine1,$iine2) = split(/<>/);
		$name = qq|$name| if ($eml);
		$com = autolink($com) if ($cf{autolink});
		$com =~ s/([>]|^)(>[^<]*)/$1$2<\/span>/g if ($cf{ref_col});
		
		my $tmp = $loop;
		$tmp =~ s/!num!/$no/g;
		$tmp =~ s/!sub!/$sub/g;
		$tmp =~ s/!name!/$name/g;
		$tmp =~ s/!date!/$date/g;
		$tmp =~ s/!comment!/$com/g;
		$tmp =~ s/!bbs_cgi!/$cf{bbs_cgi}/g;
		$tmp =~ s/!home!/home_link($url)/e;
		$tmp =~ s/!iine1!/$iine1/e;          #iine button
		$tmp =~ s/!iine2!/$iine2/e;          #iine button
		print $tmp;
	}

<!-------------------------------------------------------------------------------------------------->

<!-- loop -->   #  ← bbs.html 65行目
<div class="art">
	[<b>!num!</b>] <strong>!sub!</strong>
	<div class="com">!comment!</div>
	<div class="ope"><table style="margin-left:100px"><tr><td>
	     !icon:user.png! <b>!name!</b> !icon:clock.png! !date! !home!     </td><td>!iine1!
	     </td><td>!iine2!</td><td>   | <a href="!bbs_cgi!?res=!num!">返信</a> | <a href="!bbs_cgi!?del=!num!">削除</a> |
            </td></tr></table>   
	</div>
</div>


#-----------------------------------------------------------
#ランダム文字列生成
#-----------------------------------------------------------
sub randstr {
    my $length = $_[0];
    my $p = $_[1];      # $p=0 数字のみ。 $p=1 英数字など。

    my @char_tmp=();
    if($p == 0){
       # 配列にランダム生成する対象の文字列を格納
       # (以下は、小文字のa〜z、大文字のA〜Z、数字の0〜9)
       #push @char_tmp, ('a'..'z');
       #push @char_tmp, ('A'..'Z');
       push @char_tmp, (0..9);
       #push @char_tmp, ('_', '-', '$');
     }
    else{
       # 配列にランダム生成する対象の文字列を格納
       # (以下は、小文字のa〜z、大文字のA〜Z、数字の0〜9)
       push @char_tmp, ('a'..'z');
       push @char_tmp, ('A'..'Z');
       push @char_tmp, (0..9);
       #push @char_tmp, ('_', '-', '$');
     }

    # 指定文字数分、ランダム文字列を生成する
    my $rand_str_tmp = '';
    my $i;
    for ($i=1; $i<=$length; $i++) {
    	$rand_str_tmp .= $char_tmp[int(rand($#char_tmp+1))];
    }

    return $rand_str_tmp;
}

#-----------------------------------------------------------
#現在時刻取得
#-----------------------------------------------------------
sub get_nowtime(){

#日時の取得
my($sec,$min,$hour,$mday,$mon,$year,$wday) = localtime();

#日時の調整
$mon++;#月数には1を足す。
$year = 1900+$year;#年数には、1900を足す。
$mon = sprintf("%.2d",$mon);#2桁表示に統一する。
$mday = "9";
$mday = sprintf("%.2d",$mday);
 $hour = sprintf("%.2d",$hour);
 $sec = sprintf("%.2d",$sec);
 $min = sprintf("%.2d",$min);

#曜日の日本語化
my @week = ('日','月','火','水','木','金','土');
 $wday = $week[$wday];

#フォーマット指定 例 2003/03/15(土) 20:12:12
my $t = "$year$mon$mday$hour$min$sec";

return $t;
}

  1. aska.cgi - 記事書込(acpt_data関数)
  2. aska.cgi - 記事表示(bbs_list関数)/ bbs.html - 記事表示ページいいねボタン($iine1)といまいちボタン($iine2)のデータを表示するために、 レス記事表示域(フッター部分)に、置換コードの !iine1! (いいねボタン) と !iine2! (いまいちボタン) を定義します。
    
    ・ソースコード(bbs.html 66行目から)
    <div class="art">
    	[<b>!num!</b>] <strong>!sub!</strong>
    	<div class="com">!comment!</div>
    	<div class="ope"><table style="margin-left:100px"><tr><td>
    		!icon:user.png! <b>!name!</b> !icon:clock.png! !date! !home!     </td><td>!iine1!
    		</td><td>!iine2!</td><td>   | <a href="!bbs_cgi!?res=!num!">返信</a> | <a href="!bbs_cgi!?del=!num!">削除</a> |
                </td></tr></table>   
    	</div>
    </div>
    
    レス記事表示域のフッター部分についてtableタグで囲ったのは、2つのいいねボタンをきれいに横並びにするためです。
    • bbs.html
      記事表示ページ(bbs.html) に、記事ファイル(log.cgi)の
    • 記事表示(bbs_list関数)
      記事ファイル(log.cgi)を読み込んだ1行ごとの配列(@log)から、行データを取り込むステップに、いいねボタン($iine1)といまいちボタン($iine2)を追加します。
      bbs.htmlに記事を表示するために、取り込んだ行データのいいねボタン($iine1)といまいちボタン($iine2)の値をbbs.htmlコード(!iine1! と !iine2!)に置換します。
               $tmp =~ s/!iine1!/$iine1/e;          #iine button
      	 $tmp =~ s/!iine2!/$iine2/e;          #iine button
               
  3. ランダム文字列生成関数および現在時刻取得関数(新規CGI)
    新規CGIのランダム文字列生成関数(randstr)および 現在時刻取得関数(get_nowtime)は、aska.cgiの末尾に追加配置します。

  いいねボタン設置サンプルデモ

    元の掲示板 Aska BBSのサンプルページはこちら


1.   準備 | 2.  いいねボタンのカスタマイズ方法 | 3.  いいねボタン設置サンプルデモ

≫自分のページの「いいね!ボタン」を設置する・・・いいね!ボタン Ver1
≫できる!自分のページの「いいね!ボタン」を設置する MySQL対応新バージョン - いいね!ボタン Ver2


HOME
 最終更新日:2018.12.25
メール mailto:  掲示板