できる! Aska BBSブログなどの投稿記事に、自作のいいねボタンやTwitterなどのソーシャルボタンを動的に設置する。
~ CGI + PHP + MySQL + jQuery + Ajax ~

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

CGIのKENTWEB 最新バージョンASKA BBS(Ver:8.023)の投稿記事に自作のいいねボタンといまいちボタンやソーシャルボタンをカスタマイズしてみました。
設置できるソーシャルボタンは、twitter、facebook、hatena、pocket、pinterest、feedly、linkedin、buffer のうちいづれか1つです。

  準 備

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

ディレクトリ構成例
public_html 
    |
    +-- ■aska 
          +--  aska.cgi    [705] ... 掲示板本体
          +--  admin.cgi   [705] ... 管理ファイル
          +--  init.cgi    [604] ... 設定ファイル
          +--  captcha.cgi [705] ... 画像認証ファイル
          +--  check.cgi   [705] ... 動作チェックファイル(チェック後はファイル削除)
          +--  style.css
          +--  config.php           ... 新規カスタマイズファイル(ここの3ファイルは同じ場所に置くこと)
          +--  iine-getCount-v2.php ... 新規カスタマイズファイル(ここの3ファイルは同じ場所に置くこと)
          +--  iine-vote-v2.php     ... 新規カスタマイズファイル(ここの3ファイルは同じ場所に置くこと)
          +--  iine-table-create.php     ... 新規カスタマイズファイル(MySQLテーブル作成)
          |
          +-- ■lib
          |    +-- ■GD
          |    +-- ■bin
          |    +-- jcode.pl
          |    +-- Crypt 関連ファイル
          |
          +-- ■data
          |    +-- log.cgi [606]  ... 記事ファイル
          |    +-- *.*            ... その他ファイル
          |
          +-- ■cmn
          |    +-- bbs.css     
          |    +-- *.png(13画像ファイル)

          +-- ■tmpl
          |    +-- bbs.html ...メインHTML   
          |    +-- *.html          ... その他ファイル     
          |    +-- .htaccess
          |
          +-- ■img  ... 新規カスタマイズフォルダ、ファイル
          |    +--   smile-yellow1.png    
          |    +--   trouble-yellow1.png 
          |    +--   *.png                
          |
          +-- ■js  ... 新規カスタマイズフォルダ、ファイル
          |    +--   clickCount-getCount-v2.js     
          |    +--   jquery-snsbutton-1.3-aska.js  
          |
          +-- ■log  ... 新規カスタマイズフォルダ、ファイル
          |    +--   *****.count    ... 1ボタン当たり1ファイル発生

    +-- ■MySQLデータベース   ... 新規ファイル
(注)青字フォルダ、ファイル:新規カスタマイズフォルダとファイル

  いいねボタンおよびソーシャルボタン設置カスタマイズ方法

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

   サンプル画像は、「"いいねボタン 」と 「いまいちボタン 」 の二者択一ボタンおよび「ソーシャルボタンtwitter 」を使用します。

投稿記事のソースコード例(KENTWEB ASKA bbs.html)


・ソースコード(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! !twitter! 
		| <a href="!bbs_cgi!?res=!num!">返信</a> | <a href="!bbs_cgi!?del=!num!">削除</a> |
	</div>
</div>

カスタマイズ

カスタマイズボタン設置HTMLコード

<!-- いいね!ボタン  ラベル iine1 iine2 ------------------------------------------------------------------------>
<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>

<!-- twitterなどソーシャルボタン ラベル twitter snsbutton:ソーシャルボタン設定関数名 ------------------------->
<DIV class='c-9'></DIV> <!-- ソーシャルボタン設置域 -->
 <script>
  $(function(){
    var shareUrl = 'http://urbanqee.com/webutil/aska-kentweb/aska.cgi?res=9';  
    var rssUrl = ''; 
    $('.c-9').snsbutton('twitterShare', { img: './img/Twitter.png', title: '記事本文・・・・・。', alt: 'このページの情報を Twitterで共有する', 
                                       button: '', url: shareUrl, width: '24', height: '24' });
  });
 </script><>

カスタマイズ後

カスタマイズ後のボタン設置完成図

  記事ファイル(log.cgi)の書き込み形式は、つぎのように、<>区切りの13の項目から構成されています。末尾の2項目(11,12,13)は、
  このサンプルの追加カスタマイズ項目になります。

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

ASKA BBS に対して、動的にいいねボタンを設置するためには、つぎのファイルをカスタマイズする必要があります。
カスタマイズ(ソース修正)内容詳細を示します。下ソースコードは、1.項、2.項はカスタマイズ部分を赤字で表示しています。
  1. aska.cgi(書込部)および init.cgiのカスタマイズ修正(スタマイズ部分は赤字)
  2. aska.cgi(表示部)および bbs.htmのカスタマイズ修正(スタマイズ部分は赤字)
  3. admin.cgi(記事修正書込)のカスタマイズ修正(スタマイズ部分は赤字)
  4. aska.cgi cgi新規関数組込み(2関数):
  5. bbs.html javascript新規関数組込み・配置(2ファイル):
  6. PHP新規関数配置(3ファイル);
  7. MySQLいいね!ボタン投票数カウントテーブル作成処理PHP iine-table-create.php

1.1 aska.cgi

#-----------------------------------------------------------
#  記事受付 ←150行目
#-----------------------------------------------------------
sub recv_data {
        ・
        ・  
	# 記事数調整 ← 198行目
	my @data = ($top);
	my $i = 0;
	while (<DAT>) {
		$i++;
		push(@data,$_);
		
		last if ($i >= $cf{maxlog}-1);
	}
        
        #以下挿入↓ 2020.11.6
        my $income = $in{comment};            #ソーシャルページに送信するテキスト内容、コメントの場合
        #my $income = $in{sub};               #ソーシャルページに送信するテキスト内容、タイトルの場合
        $income =~ s/>/>/g;                   #> を > に変換
        $income =~ s/<br>/ /g;               #<br> を スペースに変換

        my $randstr1 = randstr(2);            #2桁数字の乱数(いいねボタン!1) 
        my $nowtime1 = get_nowtime();         #時刻 年月日時分秒 例:20201105185205
           $nowtime1 = $nowtime1.$randstr1;   #2桁数字の乱数+2桁数字の乱数 例:2020110518520550
        my $randstr2 = randstr(2); 	      #同上(いいね!ボタン2)
        my $nowtime2 = get_nowtime();
           $nowtime2 = $nowtime2.$randstr2;

           # SNSソーシャルボタン設定 ソーシャルボタン名、ボタン画像名 5ステップ 
        my $sns_name = $cf{sns_name}; #表示ソーシャルボタン名
        my ($snsfanction,$snsimage) = sns_info($sns_name);        #snsボタン設置関数名、snsボタン画像ファイル名取得 
        my $classname = "sns-".$no;             #Twitterボタン設置域のCLASS名(ユニーク)
        my $askaurl = "http://urbanqee.com/webutil/aska-kentweb/aska.cgi?res=" . $no;     #Twitterボタンに設定するコメントのURL 
        my $snsscript = "<script>\$(function(){var shareUrl = '" . $askaurl . "';  var rssUrl = ''; \$('\." . $classname . "').snsbutton('" . $snsfanction . "', { img: './img/" . $snsimage . "', title: '" . $income . "', alt: 'このページの情報を Twitter - count付き で共有する', button: '', url: shareUrl, width: '24', height: '24' });});</script>";
           # SNSソーシャルボタン設定 以上↑ 
           #$iine1、$iine2 いいね!ボタンおよびソーシャルボタン設置域 3 箇所
	my $iine1 = "<DIV style='' data-file='sql' class='IineVote IineVote1' data-id='" . $nowtime1 . "' data-lock='" . $nowtime1 . "' data-count='iine-right'><img src='./img/hand-like64.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/hand-dislike64.png' class='IineImg IineImg2' width=16 title='いまいち!'></DIV>";
        my $twitter = "<DIV class='" . $classname . "'></DIV>" . $snsscript;   #Twitterボタン設置域
           #以上3箇所挿入↑ 

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

1.2 init.cgi

sub sns_info {
 my ($sns_names) =  @_;
 # [SNSソーシャルボタン] ソーシャルボタン名、ボタン画像名 6ステップ追加  2020.11.6 
 #my $sns_name = "facebook";  #使用したいソーシャルボタン名をtwitter facebook hatena pocket pinterest feedly linkedin buffer のうちいづれか1つ指定可能。
 my %sns_list = ('twitter' => 'twitterShare', 'facebook' => 'facebookShare', 'hatena' => 'hatenaBookmark', 'pocket' => 'pocketButton', 
               'pinterest' => 'pinTerest', 'feedly' => 'feedlyRss', 'linkedIn' => 'linkedIn', 'buffer' => 'buffer');    #ソーシャルボタン名
 my $snslist = \%sns_list;
 my $snsfanction = $snslist->{ $sns_names };  #snsボタン処理関数名
 my %sns_imglist = ('twitter' => 'Twitter.png', 'facebook' => 'Facebook.png', 'hatena' => 'Hatena.png', 'pocket' => 'Pocket.png', 
               'pinterest' => 'Pinterest.png', 'feedly' => 'Feedly.png', 'linkedIn' => 'LinkedIn.png', 'buffer' => 'Buffer.png');   #ソーシャルボタン名
 my $snsimglist = \%sns_imglist;
 my $snsimage = $snsimglist->{ $sns_names }; #snsボタン画像ファイル名 

 return ($snsfanction,$snsimage);        
}

2.1 aska.cgi

	# ループ部 ← aska.cgi 127行目(記事表示 - bbs_list関数)
	for (@log) {
		my ($no,$date,$name,$eml,$sub,$com,$url,undef,undef,undef,$iine1,$iine2,$twitter) = 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(いまいち!)
		$tmp =~ s/!twitter!/$twitter/e;              #挿入2020.11.06 Twitterボタン
		print $tmp;
	}


2.2 bbs.html


<!-- javascript jquery 挿入 2020.11.6 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- フリーデザイン画像ボタン設定 jQuery  挿入 2020.11.6 -->
<script src="./js/jquery-snsbutton-1.3-aska.js"></script>

         .
</head>
         .

<!-- loop -->   ← bbs.html 129行目
<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>!twitter!</td><td>   | <a href="!bbs_cgi!?res=!num!">返信</a> | <a href="!bbs_cgi!?del=!num!">削除</a> |
            </td></tr></table>   
	</div>
</div>

        .
        .


<script type="text/javascript" src="./js/clickCount-getCount-v2.js"></script> <!-- いいね!ボタン js  挿入 2020.11.6 -->

</body>

	# 修正実行    ← 73行目
	} elsif ($in{job} eq "edit") {
		
		# 未入力の場合
		if ($in{url} eq "http://") { $in{url} = ""; }
		$in{sub} ||= "無題";
                
                my $income = $in{comment};
                $income =~ s/>/>/g;                #> を > に変換
                $income =~ s/<br>/ /g;               #<br> を スペース に変換

                   # SNSソーシャルボタン設定 ソーシャルボタン名、ボタン画像名 9ステップ タイトル変更(コメント変更に対応)
                my $sns_name = $cf{sns_name}; #表示ソーシャルボタン名
                my ($snsfanction,$snsimage) = sns_info($sns_name);        #snsボタン設置関数名、snsボタン画像ファイル名取得
                my $classname = "c-".$in{no};
                my $askaurl = "http://urbanqee.com/webutil/aska-kentweb/aska.cgi?res=" . $in{no}; 
                my $snsscript = "<script>\$(function(){var shareUrl = '" . $askaurl . "';  var rssUrl = ''; \$('\." . $classname . "').snsbutton('" . $snsfanction . "', { img: './img/" . $snsimage . "', title: '" . $income . "', alt: 'このページの情報を Twitter - count付き で共有する', button: '', url: shareUrl, width: '24', height: '24' });});</script>";
                my $twitternew = "<DIV class='" . $classname . "'></DIV>" . $snsscript;
                   #Twitterボタンのタイトル変更以上
              

		# 読み出し
		my @data;
		open(DAT,"+< $cf{logfile}") or error("open err: $cf{logfile}");
		eval "flock(DAT,2);";
		while (<DAT>) {
			my ($no,$dat,$nam,$eml,$sub,$com,$url,$hos,$pwd,$tim,$iine1,$iine2,$twitter) = split(/<>/);
			
			if ($in{no} == $no) {
                                $twitter = $twitternew;    #Twitterボタンのタイトル変更(コメント変更に対応)2020.11.6
				$_ = "$no<>$dat<>$in{name}<>$in{email}<>$in{sub}<>$in{comment}<>$in{url}<>$hos<>$pwd<>$tim<>$iine1<>$iine2<>$twitter<>\n";   # $iine1, $iine2, $twitter挿入 2020.11.6
			}
			push(@data,$_);
		}
  

	if (!$flg) {
		my $msg = "セッションが不正です
"; $msg .= "以下をクリックして再度投稿し直してください\n"; my $btn .= qq|<input type="button" class="color red button" onclick="window.open('$cf{bbs_cgi}','_self')" value="掲示板に戻る">|; error($msg,$btn); } } ← 1003行目 #----------------------------------------------------------- #ランダム文字列生成 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; }

5.1 clickCount-getCount-v2.js

//****************************************************************************************************//
//* いいね!ボタン Ver2PHP起動関数 clickCount-getCount-v2.js (UTF-8)   2918.12.12                            *//
//****************************************************************************************************//
//***** カスタマイズ変更項目 **********************
var idStr = 10;                             //いいね!ボタンid ランダム文字列生成桁数
var getCountUrl = "iine-getCount-v2.php";   //iine-getCount-v2.phpのURL
var voteUrl = "iine-vote-v2.php";           //iine-vote-v2.phpのURL
//*********************************************
// ページ内すべてのDIV要素CLASS=IineVoteを取得する - ページONLOAD時起動される iine-getCount-v2.ph起動関数
 $(".IineVote").each(function(i) {

        console.log(i + ': ' + $(this).attr("data-id"));
        //ランダム文字列生成
        ranstr = getRndStr(idStr);
        // data属性取得
        var id = ""; var lockid = ""; var countpos = ""; var time = ""; var title = ""; var file = "";
        if($(this).data('id')){ id = $(this).data('id'); }
        if($(this).data('lock')){ lockid = $(this).data('lock'); }
        if($(this).data('count')){ countpos = $(this).data('count'); }
        if($(this).data('time')){ time = $(this).data('time'); }
        if($(this).data('title')){ title = $(this).data('title'); }
        if($(this).data('file')){ file = $(this).data('file'); }      //テキストファイル、Mysqlデータベース、?
        if(file == ""){file = "txt";}
        if(id == ""){
             id = ranstr;        
             $(this).data( 'id', ranstr);   //親DIV data-id に値設定 $('#fruit').attr('data-number', '02');

           }
        if(lockid  == ""){
             lockid = ranstr;        
             $(this).data( 'lock', ranstr);   //親DIV data-id に値設定 $('#fruit').attr('data-number', '02');

           }
         //alert("data-id");        
         console.log( id + " = " + $(this).data('id') );  
        //DIV域生成
        var regRight = /right/i;
        var regLeft = /left/i;
        var regTop = /top/i;
        var regBottom = /bottom/i;

        if( regLeft.test(countpos) || regTop.test(countpos) ){ 
	 // 親divの子要素の先頭にカウント表示用div追加
         $('<div id="' + id + '" class="' + countpos + '"></div>').prependTo(this); }   //?
        if( regRight.test(countpos) || regBottom.test(countpos) ){
         // 親divの子要素の最後にカウント表示用div追加
         $('<div id="' + id + '" class="' + countpos + '"></div>').appendTo(this); }    //?

         // img要素をdiv要素で囲む
         var target = "#" + id;
         $(this).children('img').wrap('<div class="iineimgdiv" title="' + title + '"></div>');
         //カウント吹き出しのCLASS名取得 top/right/bottom/left
         if (regRight.test(countpos) || regLeft.test(countpos)) { 
             $(this).children( "div" ).css({ "float": "left" });                    
             $(this).append("<div style='clear: both; display: block;'></div>"); 
          }
        var phpurl = getCountUrl;
        var obj =  $(target).parent("div");  //親DIV
        $(obj).css({ "cursor": "pointer" });
        $.ajax({
            url: phpurl,            // ソーシャルボタンカウント取得PHP   if (re.test(str)) 
            dataType: "json",
            type: "post", 
            data: { countid: id, filekind: file }, 
              }).done(function(data){
                var res = data;  console.log(res); //カウンター値
                $(target).text(res);  //カウンター値表示

               }).fail(function(data){
                var res = "error";
                $(target).text(res);
                console.log(data);
             });

  });

//ランダム文字列生成
function getRndStr(p){
  //使用文字の定義
  var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 
  //桁数の定義
  var len = p;
 
  //ランダムな文字列の生成
  var res = "";
  for(var i=0;i<len;i++){
    res += str.charAt(Math.floor(Math.random() * str.length));
  }
  return res;
}


// iine-vote-v2.php起動関数   //////////////////////////////////////////////////
$(function(){
     $('.IineVote').on('click' , function(){      
          $this = $(this);
          var id = $this.data("id");            //識別用ID(重複NG)
          var lockId = id;                      //2018.11.16 以下5Step 修正・追加 data-lock属性省略対応
          if( $this.data("lock") ){
             lockId = $this.data("lock");       //排他制御ID
             if(lockId == ""){ lockId = id; }
          }
          //alert(lockId);
          var numHtml = "#" + $this.data("id"); //カウント数を表示するHTML
          var nowCount = Number($(numHtml).html()); //現在のカウント数
          var newCount = nowCount + 1;
          var timer = "";       //クッキータイマー 有効期限(投票を制限する秒数) time()+60*60*24*30 はクッキーの有効期限を 30 日後にセット
          if( $this.data("time")){
              timer = $this.data("time"); 
           }
          else{ timer = "null"; }     // 省略値 null        
          var file = "";              //カウンターファイル txt:テキストファイル  sql:mysqlデータベースファイル
          if ($this.data("file")){ file = $this.data("file") }
          else{ file = "txt"; }
          var phpurl = voteUrl;
          console.log(file);
          $.ajax({
               type : "POST",
               url : phpurl,
               data: {
                    "file_id" : id,
                    "count" : newCount, "lock_id" : lockId, "cookie_time" : timer, "file_kind" : file
               }
          }).done(function(data){
                    //送信先のvote.phpから、Completeが返ってきたらカウント更新
                    var dataarr = data.split( "," ); 
                    if(dataarr[0] == "Complete"){
                         var newCount = dataarr[1];
                         $(numHtml).html(newCount);
                    }else{
                         alert("連続投稿はできません!・・・時間をおいてやり直してください。");
                    }
               }).fail(function(data) {
                       alert("エラー!投票数を取得できません。");
                  });
 });
});


5.2 jquery-snsbutton-1.3-aska.js

省略。


6.1 config.php

<?php
// いいね!ボタン 環境設定 config.php 2018.12.12 /////////////////////////////////////////////////////

 // 共通関係設定
    //投票間隔時間(秒)。この間次の投票が出来ない(いたずら防止)。
    $voteTime = 30;
    //いいね!ボタンid(DIVタグdata-id要素)の省略時の文字列の生成方法 r:ランダム文字列 t:現在時刻yyyymmddhhmmss+2桁ランダム数字
    $iineIDkind = "r";   
    //いいね!ボタンidのランダム文字列を生成する文字の種類。
    $radomString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    //いいね!ボタンidの桁数。idをランダム文字列を生成するときの桁数。
    $iineIDNumber = 12;
    //いいね!ボタン設置ページから見たPHPのURL。clickCount-getCount-v2.jsをインクルードしたページから見たURL。
    $getCountUrl = "iine-getCount-v2.php";   //iine-getCount-v2.phpのURL
    $voteUrl = "iine-vote-v2.php";           //iine-vote-v2.phpのURL

 // いいね!投票数カウンターファイルにデータベース MySQLを使用する設定
     //MySQLサーバーのホスト名またはIP アドレス。通常、"localhost" を指定します。
     $dbHost = 'localhost';
     //MySQL サーバーのユーザー名(設定変更必須)
     $dbUser = 'urbanqee_iine';
     //MySQL サーバーのパスワード(設定変更必須)
     $dbPass = 'xxxxxrCI4xVL15aeKaO4tw==';
     //MySQL データベース名      (設定変更必須)
     $dbName = 'urbanqee_iine';

     //いいね!ボタンのデータベーステーブル名
     $dbTableName = 'Mypage_iineTBL';

 // いいね!投票数カウンターファイルにテキストファイルを使用する設定
     //カウンターファイル名の拡張子。ファイル名はボタン設定DIVタグのdata-id属性で指定。
     $txFileExt = ".count";
     //カウンターファイルのパス(プルパス(絶対パス)を推奨)
     $txFilePath =  dirname(__FILE__) . "/log/";

//:::::::clickCount-getCount-v2.jsおよび clickCount-getCount.js とAjax通信 ::::::::::::::::::::::::::::::
if (!empty($_REQUEST['p'])) {
  
  echo "$voteTime,$iineIDNumber,$radomString,$getCountUrl,$voteUrl,$iineIDkind";
}

// update: 2018.12.12
?>


6.2 iine-getCount-v2.php

<?php
// いいね!カウント数取得  ページオンロード時起動 /////////////////// 

// *メイン *********************************************************
include_once( dirname(__FILE__) . "/config.php" );

if (!empty($_REQUEST['countid'])) {
    $id   = empty($_REQUEST['countid']) ? "" : $_REQUEST['countid'];
    $fl   = empty($_REQUEST['filekind']) ? "" : $_REQUEST['filekind'];
    if($fl == "txt"){ $res = getVoteCountT($id); }
    else{  $res = getVoteCountS($id); }
    echo json_encode($res);
 } else {
    echo json_encode("syntax error");
 }

// * テキストファイル処理関数 ******************************************

function getVoteCountT($id){
 global $txFilePath, $txFileExt;

 //カウント数を書きだしてあるファイル名
 //$fileName = "./log/" . $id . ".count";
 $fileName = $txFilePath . $id . $txFileExt;

 //fopenでファイルを読み込む (読み込みモード)
 $fp = @fopen($fileName , "r");

 if($fp){
 //カウント数書き込み済みのファイルの内容を取得
 $vote = fgets($fp , 9182);
 }else{
 $vote = 0;
  }

return $vote;
}

// * MYSQLデータベースファイル処理関数 **********************************

function getVoteCountS($id){
   global $dbHost, $dbUser, $dbPass, $dbName;
   global $dbTableName; 
   $dbIdColumn = 'like_id';
   $dbCountColumn = 'vote_count';
   $dbDateColumn = 'vote_update';
   $cryptMethod = "AES-128-CBC";                   //暗号化メソッド
   $cryptKey = "iine!buttonVer2-MySQL database";   //暗号化キー
   $dbPass = openssl_decrypt($dbPass, $cryptMethod, $cryptKey); ////復号化、暗号化パスワードを戻す

   // 現在の日付を取得
   $timestamp = time() ;
   $date = date('Y-m-d H:i:s', $timestamp );

   $conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
   
   if(! $conn ) {
      return "E01";
      die('Could not connect: ' . mysqli_error());
   }
   //echo 'Connected successfully*********<br>';

 // 読み込み SELECT * FROM テーブル名 WHERE カラム名 = '条件'
   $sql = "SELECT * FROM $dbTableName WHERE $dbIdColumn = '$id'";
   $result = $conn -> query($sql);
   //クエリー失敗
   if(!$result) {   
        return "E02";
	//echo $mysqli->error;
	//exit();
   }
   // レコードがあるか否かカラム数で確認
   $count = mysqli_num_rows($result);
   $cnt=0;
   if (!$count) { 
      $cnt = 0;                    // 該当idレコードなし 0
   }
   else {                          // レコードあり 
     while($row = $result->fetch_array(MYSQLI_ASSOC)){
  	   //$rows[] = $row;
           $cnt = $row[$dbCountColumn] ; 
     }
   }
   mysqli_close($conn);
   return $cnt;
}

?>


6.3 iine-vote-v2.php

<?php
//mb_internal_encoding("UTF-8");
//vote.phpメイン //////////////////////////////////////
include_once( dirname(__FILE__) . "/config.php" );

////// ajaxデータを受信
$file_id = $_POST["file_id"];     //ファイル名id(テキストファイル)/行id(DBファイル)
$lock_id = $_POST["lock_id"];     //排他制御id(クッキーキーは vote$lock_id)
$timer = $_POST["cookie_time"];   //クッキーの有効時間(秒) 省略値"null
if($timer == "null"){
    $timer = $voteTime; 
 }
//$count = $_POST["count"];       //投票数(未使用)
$fl = $_POST["file_kind"];        //ファイル種別 txt/sql
$ipadd = $_SERVER["REMOTE_ADDR"];  //IPアドレス
$ipadd = str_replace('.', '', $ipadd); //IPアドレス . 削除          
$cookieName = $ipadd . $lock_id;       //クッキー名:IPアドレス+ロックID
$cookieTime = time() + $timer;         //クッキーの有効期限(投票を制限する秒数) time()+60*60*24*30 はクッキーの有効期限を 30 日後にセット

///////クッキーが有効か
if(isset($_COOKIE[$cookieName])){
     echo "look";                 //クッキー制御により投票不可です。";
}
else{
 if($fl == "txt"){ 
    vote_textf();      //カウンター テキストファイル  xxxxxx.count(ファイル名 $file_id.count)
   }
 else{
    vote_dbf();        //カウンター mysqlデータべースファイル(行id=$file_id)
   } 

}

exit();

// 関数 /////////////////////////////////////////

// * テキストファイル処理 *****************************************
function vote_textf(){
 global $file_id, $lock_id, $timer, $fl, $cookieName, $cookieTime; 
 global $txFilePath, $txFileExt;    //config.php内変数

 //カウント数を書き出すファイル名
 $counter_file = $txFilePath . $file_id . $txFileExt;
 $counter = "1";      //初期値 文字の"1"

 if (file_exists($counter_file)) {
   // $counter_file) が存在

   $counter_lenght = 8;
   $counter = "0";
   $fp = fopen($counter_file, 'r+');

   if ($fp) {
    if (flock($fp, LOCK_EX)) {
        $counter = fgets($fp, $counter_lenght);
        $counter++;                             //カウントアップ
        rewind($fp);
        if (fwrite($fp,  $counter) === FALSE) {
            echo 'ファイル書き込みに失敗しました';
        }
        flock ($fp, LOCK_UN);
    }
   }
    fclose ($fp);
    setcookie($cookieName , $counter , $cookieTime); //10秒有効のクッキーをセット
    echo "Complete,$counter"; // clickCount-getCount.jsには、カウントアップ値を返す(正常)
  } else {
    // $counter_fileカウントファイルが存在しない
    $fp = fopen($counter_file, 'w'); 
    fwrite($fp, $counter); 
    fclose($fp);
    setcookie($cookieName , $counter , $cookieTime); //10秒有効のクッキーをセット
    echo "Complete,$counter"; // clickCount-getCount.jsには、初期値1の値を返す(正常)
  }

}

// * mysql データベース処理 ************************************************************
function vote_dbf(){
   global $file_id, $lock_id, $timer, $fl, $cookieName, $cookieTime; 
   global $dbHost, $dbUser, $dbPass, $dbName;     //config.php内変数
   global $dbTableName;                           //config.php内変数
   //カラム名
   $dbIdColumn = 'like_id';
   $dbCountColumn = 'vote_count';
   $dbDateColumn = 'vote_update';
   $cryptMethod = "AES-128-CBC";                   //暗号化メソッド
   $cryptKey = "iine!buttonVer2-MySQL database";   //暗号化キー
   $dbPass = openssl_decrypt($dbPass, $cryptMethod, $cryptKey); ////復号化、暗号化パスワードを戻す

   // 現在の日付を取得
   $timestamp = time() ;
   $date = date('Y-m-d H:i:s', $timestamp );

   ////// mysqlDB操作
   $conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
   
   if(! $conn ) {
      die('Could not connect: ' . mysqli_error());
   }
   //echo 'Connected successfully*********<br>';
   //exit();
   // 読み込み SELECT * FROM テーブル名 WHERE カラム名 = '条件'
   $sql = "SELECT * FROM $dbTableName WHERE $dbIdColumn ='$file_id'";
   $result = $conn -> query($sql);
   //クエリー失敗
   if(!$result) {
        //echo "select error!";
	echo $mysqli->error;
	exit();
   }

   // 【レコードがあるか確認】
   $count = mysqli_num_rows($result);
   if (!$count) {         // レコードなし INSERT 初期値カウンター値は 0

      $sql = "INSERT INTO $dbTableName ( $dbIdColumn, $dbCountColumn, $dbDateColumn ) 
         VALUES ('$file_id', 1, '$date')";

      if ($conn->query($sql) === TRUE) {
          setcookie($cookieName , 1 , $cookieTime); // 投票間隔クッキーをセット
          echo "Complete,1";                        // 正常 初期値 "1" を返す New record created successfully
      } else {
          echo "Error: " . $sql . "<br>" . $conn->error;
      }

       //exit('条件に一致するレコードがありません。');   
   }

   else {                // レコードあり UPDATE  
     //連想配列で取得
     while($row = $result->fetch_array(MYSQLI_ASSOC)){
  	   $counter = $row[$dbCountColumn];
     }
     $upcount = $counter + 1;  //カウンター更新
     // カウンター更新
     $sql = " UPDATE $dbTableName SET $dbCountColumn=$upcount, $dbDateColumn='$date' WHERE $dbIdColumn='$file_id'"; // "で括ること
   
     if (mysqli_query($conn, $sql)) {
        setcookie($cookieName , $upcount , $cookieTime); //投票間隔クッキーをセット
        echo "Complete,$upcount";                        //  正常 カウントアップ値を返す "Record updated successfully";
     } else {
        echo "Error updating record: " . mysqli_error($conn);
     }

   }
   mysqli_close($conn);

}
?>

<?php
include_once( dirname(__FILE__) . "/config.php" );

   $dbhost = $dbHost;         //ホスト名
   $dbuser = $dbUser;         //ユーザ名
   $dbpass = $dbPass;      //パスワード
   $dbname = $dbName;     //データベース名
   $dbtable = $dbTableName; //テーブル名

if($_SERVER["REQUEST_METHOD"] == "POST"){
   $dbhost = $_POST["db_hostname"];     //ホスト名
   $dbuser = $_POST["db_username"];     //ユーザ名
   $dbpass = $_POST["db_password"];     //パスワード
   $dbname = $_POST["db_databasename"]; //データベース名
   $dbtable = $_POST["db_tablename"];   //テーブル名
   //パスワード暗号化
   $str = $dbpass;
   $cryptMethod = "AES-128-CBC";                   //暗号化メソッド
   $cryptKey = "iine!buttonVer2-MySQL database";   //暗号化キー
   $dbpassEncrypt = openssl_encrypt($str, $cryptMethod, $cryptKey);  //暗号化 

   $res = tableCreate();
   echo "<div style='background:#ffffff'>";
      if($res == "OK"){ 
       configUpdate(); 
       echo "※ $dbtable テーブルを作成しました。また、config.phpを更新しました。<br>";
       echo "※ 作成テーブルを確認したい場合は、フォーム下のリンクをクリックしてください。";
     }
   else{
       echo "<br><font color=red>※</font> データベースエラーのため、テーブル作成を中止しました。";
     }
   echo "<hr></div>";

//$link_url_text = '自由ヶ丘で働くWeb屋のブログのURLはhttp://blog.diginnovation.com/です。';
//echo nl2br(ereg_replace("(http)(://[[:alnum:]\S\$\+\?\.-=_%,:@!#~*/&]+)","<a href=\"\\1\\2\" target=\"_blank\">\\1\\2</a>",$link_url_text));
   
}

?>

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
<title>MySQLデータベースいいね!ボタン投票数カウントテーブル作成</title>
<style>
body { 
    max-width: 800px;
    margin: 0 auto;  
    padding: 0px; 
    font-size: 15px;
    background: url('http://urbanqee.com/img/BingWallpaper-2017-08-17-2.jpg') repeat center top; 
}

.iineimgdiv{
   margin-right:5px;
   
}

.right{
   font-size:12px;
   color:gray
}
</style>
<!--  吹き出しCSS-->
<link href="http://urbanqee.com/webutil/sns/js/socialbutton-balloon.css" rel="stylesheet" type="text/css">
<!-- jquery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body>
<DIV style="background:#ffffff;margin-top:0px;padding:5px">
<h3 style="text-align:center"><b>いいね!ボタン投票数カウントテーブル作成</b></h3>

<form method="POST" action="<?php print($_SERVER['PHP_SELF']) ?>">
<table>
<tr><td>MySQLサーバ情報:</td><td></td></tr>
<tr>
<td valign=top align=right>・ホスト名 </td>
<td><input type="text" name="db_hostname" value="<?php echo $dbhost; ?>">(localhost固定)<br><br></td></tr>
<tr>
<td valign=top align=right>・ユーザ名(DBユーザ名) </td>
<td><input type="text" name="db_username" value="<?php echo $dbuser; ?>">(登録DBユーザー名。DB名に同じ。)<br><br></td></tr>
<tr>
<td valign=top align=right>・パスワード </td>
<td><input type="text" name="db_password" value="<?php echo $dbpass; ?>">(登録パスワード)<br><br></td></tr>
<tr>
<td valign=top align=right>・データベース名 (DB名)</td>
<td><input type="text" name="db_databasename" value="<?php echo $dbname; ?>">(登録DB名。DBユーザ名に同じ。)<br><br></td></tr>

<tr><td>作成テーブル情報:</td><td></td></tr>
<tr>
<td valign=top align=right>・テーブル名 </td>
<td><input type="text" name="db_tablename" value="<?php echo $dbtable; ?>">(任意のテーブル名)<br><br></td></tr>
<tr><td></td>
<td><input type="submit" name="btn1" value="作成する" style="background:blue;color:#ffffff">
</td></tr></table>
</form>
<hr width=80%>
※ 作成テーブルの確認は、<a href="iine-table-create.php?proc=sel" target="_self">ここ</a>をクリックしてください。

<!-- いいね!ボタン js -->
<script type="text/javascript" src="/js/clickCount-getCount-v2.js"></script>

<?php

 // テーブル参照 GET
 if($_SERVER["REQUEST_METHOD"] == "GET" && $_GET["proc"]){
   $cryptMethod = "AES-128-CBC";                   //暗号化メソッド
   $cryptKey = "iine!buttonVer2-MySQL database";   //暗号化キー
   $dbpassDecrypt = openssl_decrypt($dbpass, $cryptMethod, $cryptKey); ////復号化、暗号化パスワードを戻す
    
   tableSelect();
    //exit();
  }

?>

<hr>
<table width="100%" border=0>
<tr>
<td align=center>
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="urbanqee.com"><br>
<small>2018.12</small>
 <br>
</td>
</tr>
</table>
</body>
</html>

<?php

// MySQLテーブル作成
function tableCreate(){
  global $dbhost, $dbuser, $dbpass, $dbname, $dbtable;

  $link = mysqli_init();
    if (!$link) {
    die('mysqli_init failed');  return "NG1";
  }

  $db_link = mysqli_connect( $dbhost, $dbuser, $dbpass, $dbname);
  if( mysqli_connect_errno($db_link) ) { 
        echo "<div style='background:#ffffff'>";
        echo mysqli_connect_errno($db_link) . ' : ' . mysqli_connect_error($db_link); return "NG2";
        echo "</div>";

      }

   // テーブルを作成するSQLを作成    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARYKEY, 
   $sql = "CREATE TABLE $dbtable (	
     like_id VARCHAR(20) NOT NULL,
     vote_count INT(6) UNSIGNED,
     vote_update DATETIME ) engine=innodb default charset=utf8";
   // SQL実行
   mysqli_query( $db_link, $sql);
   mysqli_close($db_link);
   return "OK";

}

// config.php更新
function configUpdate(){

  global $dbhost, $dbuser, $dbpassEncrypt, $dbname, $dbtable;

  $configfl = "config.php";
  $configdata = "";
  // 現在の日付を取得
  $timestamp = time() ;
  $date = date('Y-m-d H:i:s', $timestamp );
  $handle = @fopen("$configfl", 'r+');
      while (($buffer = fgets($handle, 4096)) !== false) { 
        if (preg_match("/dbHost =/", $buffer)) {
            $configdata .= "     \$dbHost = '" . $dbhost . "';" . "\n";          
         }
        elseif (preg_match("/dbUser =/", $buffer)) {
            $configdata .= "     \$dbUser = '" . $dbuser . "';" . "\n";          
         }
        elseif (preg_match("/dbPass =/", $buffer)) {
            $configdata .= "     \$dbPass = '" . $dbpassEncrypt . "';" . "\n";          
     
         }
        elseif (preg_match("/dbName =/", $buffer)) {
            $configdata .= "     \$dbName = '" . $dbname . "';" . "\n";          
          
         }
        elseif (preg_match("/dbTableName =/", $buffer)) {
            $configdata .= "     \$dbTableName = '" . $dbtable . "';" . "\n";          
          
         }
        elseif (preg_match("/update:/", $buffer)) {
            $configdata .= "// update: $date". "                    \n";          
          
         }
        else{
            $configdata .= $buffer;
         }

     }

    rewind($handle);
    fwrite($handle, "$configdata");
    //rewind($handle);
    //echo fread($handle, filesize('init2.php'));

    fclose($handle);
}

// テーブル参照
function tableSelect(){
  global $dbhost, $dbuser, $dbpassDecrypt, $dbname, $dbtable;
  //データベース接続
  $mysqli = new mysqli($dbhost, $dbuser, $dbpassDecrypt, $dbname);
 
  if ($mysqli->connect_error){
	echo $mysqli->connect_error;
	exit();
  }else{
	$mysqli->set_charset("utf-8");
  }
 
  $sql = "SELECT * FROM $dbtable";
 
  $result = $mysqli -> query($sql);
 
  //クエリー失敗
  if(!$result) {
	echo $mysqli->error;
	exit();
  }
 
  //レコード件数
  $row_count = $result->num_rows;
 
  //連想配列で取得
  while($row = $result->fetch_array(MYSQLI_ASSOC)){
	$rows[] = $row;
  }
  // print_r($rows);
  //結果セットを解放
  $result->free();
 
  // データベース切断
  $mysqli->close();

?>
<p>
<b>※ 作成したいいね!テーブルはつぎのとおりです。</b>
</p> 
<p style="margin-left:20px"> 
<?php echo $dbtable; ?> のレコード件数 : <?php echo $row_count; ?>

<table bgcolor=brown celpadding=0 cellspacing=0 border=1 style="margin-left:20px">
<tr bgcolor=#dcdcdc><th>like_id</th><th>vote_count</th><th>vote_update</th></tr>
 
  <?php 
  foreach($rows as $row){
  ?> 
  <tr bgcolor=#ffffff> 
	<td><?php echo $row['like_id']; ?></td>
	<td align=right><?php echo $row['vote_count']; ?></td> 
	<td><?php echo htmlspecialchars($row['vote_update'],ENT_QUOTES,'UTF-8'); ?></td> 
</tr> 
  <?php 
  } 
?>
 
</table>
</p>
<hr>
</DIV>
<?php
}
?>
【説明】
  1. aska.cgi/init.cgi
    1. aska.cgi - 記事受付(recv_data関数)
      • # 記事数調整 部分;
        上記規定のいいねボタン設置HTMLコードで、いいねボタン($iine1)、いまいちボタン($iine2)および ソーシャルボタン($twitter)の3つを定義します。
        いいねボタンid(data-id)は、現在時刻取得関数(get_nowtime)およびランダム文字列生成関数(randstr)を起動して、
        いいねボタン用といまいちボタン用の2つ生成し設定します。
        また、2つのいいねボタンのdata-lockの値に、どちらかのdata-idと同じ値を設定します(同じクッキー値で排他制御-2重投票抑止)。
        いいね!カウンター(data-file)は、MYSQLデーターベースを使用する("sql")を設定します。
      • # 更新 部分;
        記事ファイル(log.cgi)書込みバッファーに、定義したいいねボタン($iine1)といまいちボタン($iine2)を追加します。
    2. init.cgi
      sns_info関数を最後に追加します。sns_info関数は、ソーシャルボタン設置関数名とボタン画像ファイル名取得するサブルーチンです。
  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>!twitter!</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)およびソーシャルボタン($twitter)を追加します。
      bbs.htmlに記事を表示するために、取り込んだ行データのいいねボタン($iine1)といまいちボタン($iine2)およびソーシャルボタン($twitter)の値をbbs.htmlコード(!iine1! と !iine2!および !twitter!)に置換します。
               $tmp =~ s/!iine1!/$iine1/e;          #iine button
      	 $tmp =~ s/!iine2!/$iine2/e;          #iine button
      	 $tmp =~ s/!twitter!/$twitter/e;      #sns button
               
  3. admin.cgi(記事修正書込)・修正
    記事修正(タイトルやコメント)があった場合、ソーシャルボタンにおいて例えばTwitterへ送るタイトルを修正します。
  4. ランダム文字列生成関数および現在時刻取得関数(新規CGI)・組込み
    新規CGIのランダム文字列生成関数(randstr)および 現在時刻取得関数(get_nowtime)は、aska.cgiの最後の空白行以下に組み込みます。
  5. bbs.html javascript新規関数組込み・配置
    javascript新規関数をインクルードします。jquery-snsbutton-1.3-aska.jsは<head>内、clickCount-getCount-v2.jsは</body>直前に配置します。
    <script src="./js/jquery-snsbutton-1.3-aska.js"></script>
    </head>
    <body>
    
    <script type="text/javascript" src="./js/clickCount-getCount-v2.js"></script>
    </body>
        
  6. PHP新規関数配置
    PHP新規関数ルconfig.php、iine-getCount-v2.phpおよびiine-vote-v2.phpをaska.cgiと同じ場所(フォルダ)に配置します。
  7. いいね!ボタンカウントテーブル仕様(MySQL)
    上ソースコード「7.テーブル作成処理PHP」の151~155行目参照。
    テーブル仕様(テーブル名:Mypage_iineTBL)
    項目名like_idvote_count vote_update
    形式VARCHAR(20)INT(6) DATETIME
    表示例英数字20桁以内(ユニーク値)
    (例)abcde12345
    投票カウンター
    最大値は65,535
    投票時刻
    (例)2020-11-08 21:32:42E

  いいねボタンおよびソーシャルボタン設置サンプルデモ(MySQLデータベース使用)

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




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

・いいね!ボタン関連ページ
  ≫自分のページの「いいね!ボタン」を設置する・・・いいね!ボタン Ver1
  ≫できる!自分のページの「いいね!ボタン」を設置する MySQL対応新バージョン - いいね!ボタン Ver2
  ≫ソーシャルボタン設定関数jquery-snsbutton-1.3-aska.jsの使い方


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

  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:  掲示板