できる!ブログなどのレス記事に、自作のいいねボタンを動的に設置する。
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)フッターから構成されています。 いいねボタンを表示させるには、 (3)フッターの中に、ボタン用のタグコードを赤字の位置に埋め込みます。
例では、2つのボタン(ラベルiine1とラベルiine2)を埋め込んでいます。

レス記事の例(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! !iine1! !iine2!
		| <a href="!bbs_cgi!?res=!num!">返信</a> | <a href="!bbs_cgi!?del=!num!">削除</a> |
	</div>
</div>

いいねボタン設置HTMLコード(1つのボタン)

<DIV style="" 
   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="IineImg" width="16">
</DIV>

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

  1. aska.cgi :
  2. bbs.html : 記事書込みDIV領域のカスタマイズ

   サンプルは、"いいねボタン" と "いまいちボタン" の二者択一ボタンの例です。下ソースコードは、カスタマイズ部分を赤字で表示しています。
  記事ファイル(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桁 いいね!ボタン1(いいね!)
        my $nowtime1 = get_nowtime();       #現在時刻yyyymmddmmss
           $nowtime1 = $nowtime1.$randstr1; #現在時刻yyyymmddmmss+ランダム数字列2桁=data-id(いいねボタンid)
        my $randstr2 = randstr(2,0);        #いいね!ボタン2(いまいち!)
        my $nowtime2 = get_nowtime();
           $nowtime2 = $nowtime2.$randstr2;

	my $iine1 = "<DIV style='' data-file='sql' class='IineVote IineVote1' data-id='" . $nowtime1 . "' data-lock='" . $nowtime1 . "' data-count='iine-right'><img src='./img/smile-yellow1.png' class='IineImg IineImg1' width=16 title='いいね!'></DIV>";
	my $iine2 = "<DIV style='' data-file='sql' class='IineVote IineVote2' data-id='" . $nowtime2 . "' data-lock='" . $nowtime1 . "' data-count='iine-right'><img src='./img/trouble-yellow1.png' class='IineImg IineImg2' width=16 title='いまいち!'></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;          #いいね!ボタン1(いいね!)
		$tmp =~ s/!iine2!/$iine2/e;          #いいね!ボタン2(いまいち!)
		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>


#-----------------------------------------------------------
#ランダム文字列生成 aska.cgi内にに組み込み
#-----------------------------------------------------------
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;
}

#-----------------------------------------------------------
#現在時刻取得 aska.cgi内にに組み込み
#-----------------------------------------------------------
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";   #この行はコメント化 2020.11.2
$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の末尾に追加配置します。

  いいねボタン設置サンプルデモ(MySQLデータベース使用)

    サンプルデモを別ページで見る場合はこちら≫。     元の掲示板 Aska BBS - KENT WEBのサンプルページはこちら≫




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

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


 ソーシャルボタン関連サイト内リンク

  1. オリジナルデザインのソーシャルボタンにカウントを設置する方法 - デザインボタン 9サイト - Twitter, Facebook, Google+, Hatena, Pinterest, Feedly, LDR, Pocket, Linkedin
  2. 公式サイトへ行かずに、簡単に手元でソーシャルボタンをまとめて設置する Lightboxなどのモーダルウィンドウ上にも設置できる 〜公式ボタン、非公式デザインボタンどちらでも17SNS/RSSサイト! 34種類余り〜
  3. ソーシャルボタンカウント取得PHPの使い方 〜 カウントのない公式ソーシャルボタンにカウントを付ける 〜 Facebook, Google+, Hatena, Pinerest, Feedly, LDR, Pocket, Linkedin, Buffer, Twitter - 10サイト -
  4. ソーシャルボタン、カウントをボタンの中に付ける 〜 公式ボタン、デザインボタン 〜 Twitter, Facebook, Google+, Hatena, Pinerest, Feedly, LDR, Pocket, Linkedin, Buffer - 10サイト -
  5. 10サイト、ソーシャルボタンのカウント設置を、5つのパターンから好きな場所に付ける ソーシャルボタンのカウントを、ボタンの右、ボタンの左、ボタンの上、ボタンの下、ボタンの中の5つのパターンから好きな場所に付ける - 公式ボタン、デザインボタン 10サイト - Twitter, Facebook, Google+, Hatena, Pinerest, Feedly, LDR, Pocket, Linkedin, Buffer
  6. Lineで送るカスタムボタンのリンクウインドウを小窓で表示する
  7. 自分のページの いいね!ボタン の設置方法
  8. できる!ブログなどのレス記事に、自作のいいねボタンを動的に設置する。 KENTWEB ASKA BBS のレス記事に自作のいいねボタンといまいちボタンをカスタマイズできる。 〜 CGI + PHP + MySQL + jQuery + Ajax 〜(本ページ)
  9. できる!自分のページの「いいね!ボタン」を設置する 新バージョン - いいね!ボタン Ver2 投票数のカウントは、データベースMySQLが使用できる。 いいね!ボタンをレス記事などに動的配置できる。〜 PHP + MySQL + jQuery + Ajax 〜
  10. まとめて設置のデモ - モーダルウィンドウにも
  11. Facebookソーシャルボタン、アクセストークンを使用して 実際の いいね!カウント数 や シェアカウント数 を表示設置する方法 現在、facebook公式のいいねボタンとシェアボタンは共に同じ値のカウント総数が表示される。
  12. 公式ソーシャルボタンのカウントをカラー吹き出しで表示する ―ソーシャルボタンカウント取得PHPとカラー吹き出しCSSの使い方 〜 カウントのないソーシャルボタンにカラフルなカウントを付ける 〜 Facebook, Hatena, Pinerest, Feedly, Pocket, Buffer, Twitter 7 サイト

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