1. 準備 | 2. いいねボタンのカスタマイズ方法 | 3. いいねボタン設置サンプルデモ
CGIのKENTWEB BBS ASKAのレス記事に自作のいいねボタンといまいちボタンをカスタマイズしてみました。
必要なファイルをダウンロードし、下記のディレクトリ構成例にならい、さーばーへアップロードします。
一般的にレス記事は、下「レス記事の例」のとおり、(1)ヘッダー、 (2)入力された記事本文および (3)フッターから構成されています。
いいねボタンを表示させるには、 (3)フッターの中に、ボタン用のタグコードを赤字の位置に埋め込みます。
例では、2つのボタン(ラベルiine1とラベルiine2)を埋め込んでいます。
ASKA BBS に対して、動的にいいねボタンを設置するためには、つぎのファイルをカスタマイズする必要があります。
# 記事数調整 ← 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;
}
・ソースコード(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>
$tmp =~ s/!iine1!/$iine1/e; #iine button $tmp =~ s/!iine2!/$iine2/e; #iine button
サンプルデモを別ページで見る場合はこちら≫。 元の掲示板 Aska BBS - KENT WEBのサンプルページはこちら≫。
1. 準備 | 2. いいねボタンのカスタマイズ方法 | 3. いいねボタン設置サンプルデモ
≫自分のページの「いいね!ボタン」を設置する・・・いいね!ボタン Ver1
≫できる!自分のページの「いいね!ボタン」を設置する MySQL対応新バージョン - いいね!ボタン Ver2
 ソーシャルボタン関連サイト内リンク
最終更新日:2018.12.25 |
メール mailto: | 掲示板 |