できる！自分のページの「いいね！ボタン」を設置する新バージョン - いいね！ボタン Ver2 投票数のカウントは、データベースMySQLが使用できる

新バージョン「いいね！ボタン」Ver2 は、旧バージョン「いいね！ボタン」との機能比較などはつぎのとおりです。
投票数（カウント件数）の表示は、旧バージョンと同様に、「いいね！ボタン」の上、下、左、右の好きな位置・場所に表示できます。

１．準備

🙂 いいね！ボタン設置機能比較
機能	現バージョン（旧）	新バージョンVer2
1	投票数カウンターファイル*	テキストファイル	テキストファイルまたはMySQLデータベース。ボタン設置HTMLコードの指定により選択。
2	ボタン設置HTMLコード	５ステップ	３ステップ（２タグコード）
3	いいね！ボタンid	必ず指定	省略可。省略時、ランダム文字列を自動生成。レス記事などに動的設置可能。
※：ボタン設置HTMLコードのdata-id属性の「いいね！ボタンid」は、テキストファイルの場合、このidをファイル名とし、 MySQLデータベースの場合は、このidをレーコードキーとします。 ※：旧バージョン「いいね！ボタン」は、新バージョン上で動作可能です。

🙂 いいね！ボタンデモ - カウントに吹き出し付きデモ (MySQL使用）
・例１カウント件数、右	・例２カウント件数、上	・例３カウント件数、左	・例４カウント件数、下
２者択一ボタン（いいね、いまいち）

1.1 使用ファイル

※上記2.～6. の必要ファイルをダウンロードし、サーバにアップロードします。7. のlogフォルダは、空のフォルダを作成します。
※上記2. 解説サイト（日本議）を参照してください。
※上記3～上記8. config.phpなど６つのファイル(2018.12. 25 版 - フリー、商用利用可能）は、ここ

からダウンロード。

1.2 いいね！ボタン画像などの準備

いいね！ボタンボタン画像について、事前に準備しておきます。

1.3 いいね！ボタン環境設定 config.php および clickCount-getCount-v2.js のカスタマイズ（PHP, Javascript）

config.php (環境設定テーブル)
clickCount-getCount-v2.js
clickCount-getCount.js


<?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 = 'user_name';
     //MySQL サーバーのパスワード（設定変更必須）openssl-crypt.phpを起動しパスワードを暗号化した値を設定します
     $dbPass = 'lR6m3rCI4xVL19aeKaO7tw==';
     //MySQL データベース名      （設定変更必須）
     $dbName = 'database_name';

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

 // いいね！投票数カウンターファイルにテキストファイルを使用する設定
     //カウンターファイル名の拡張子。ファイル名はボタン設定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
?>


//****************************************************************************************************//
//* いいね！ボタン Ver2PHP起動関数 clickCount-getCount-v2.js (UTF-8)   2918.12.12                    *//
//****************************************************************************************************//
//***** いいね！ボタン 環境設定項目を config.phpより取得 ********************** 
var cofigUrl = "config.php";                //config.phpのURL。clickCount-getCount-v2.jsをインクルードしたページから見たURL。
var voteTime = 30;                          //投票間隔時間（秒）
var idStrNo = 12;                           //いいね！ボタンid文字列生成桁数（20桁以下）
var radomString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
var getCountUrl = "iine-getCount-v2.php";   //iine-getCount-v2.phpのURL
var voteUrl = "iine-vote-v2.php";           //iine-vote-v2.phpのURL
var idKind = "r";
 $.ajax({
    url: cofigUrl,               // config.php URL  
    type : "POST",
    data: { p: "js" }, 
    }).done(function(data){
      var dataarr = data.split( "," );   console.log(dataarr);
      voteTime  = dataarr[0];     //投票間隔時間（秒）
      idStrNo = dataarr[1];         //いいね！ボタンid ランダム文字列生成桁数（20桁以下）
      radomString = dataarr[2];
      getCountUrl = dataarr[3];   //iine-getCount-v2.phpのURL
      voteUrl = dataarr[4];       //iine-vote-v2.phpのURL
      idKind = dataarr[5];        //いいね！ボタンid省略時のid生成方法  
    }).fail(function(data){
       ;
 });  
//*********************************************

// ページ内すべてのDIV要素CLASS=IineVoteを取得する - ページONLOAD時起動される iine-getCount-v2.ph起動関数
 $(".IineVote").each(function(i) {
        console.log(i + ': ' + $(this).attr("data-id"));

        // 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";}
        //ランダム文字列生成か現在時刻取得判定
        var idGen = "";	
        if(idKind == "r" && id == ""){idGen = getRndStr(idStrNo); } //ランダム文字列生成
        if(idKind == "t" && id == ""){idGen = getYmdms(); }         //現在時刻取得 
        if(id == ""){
             id = idGen;        
             $(this).data( 'id', idGen);   //親DIV data-id に値設定 $('#fruit').attr('data-number', '02');

           }
        if(lockid  == ""){
             lockid = idGen;        
             $(this).data( 'lock', idGen);   //親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" });                   //, "margin": "2px" }); //, "display": "inline", "vertical-align": "bottom", "cursor": "pointer" 
             $(this).append("<div style='clear: both; display: block;'></div>"); 
          }
        var phpurl = getCountUrl;
        //if(file == "txt" || file == "" ){ phpurl = "http://urbanqee.com/webutil/like/iine-getCount-v2.php"; } // 要修正 ****** 
        //else if( file == "sql" ){phpurl = "http://urbanqee.com/webutil/like/iine-getCount-v2.php"; }          // iine-getcount-db.php 
        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 = radomString;
 
  //桁数の定義
  var len = p;
 
  //ランダムな文字列の生成
  var res = "";
  for(var i=0;i<len;i++){
    res += str.charAt(Math.floor(Math.random() * str.length));
  }
  return res;
}

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

// 現在時刻取得 yyyymmddmmss+ランダム数字2桁
function getYmdms(){
  var Nowymdhms = new Date();
  var NowYear = Nowymdhms.getFullYear();
  var NowMon = Nowymdhms.getMonth() + 1;
  NowMon = ('0' + NowMon).slice(-2);
  var NowDay = Nowymdhms.getDate();
  NowDay = ('0' + NowDay).slice(-2);
  var NowWeek = Nowymdhms.getDay();
  var NowHour = Nowymdhms.getHours();
  NowHour = ('0' + NowHour).slice(-2);
  var NowMin = Nowymdhms.getMinutes();
  NowMin = ('0' + NowMin).slice(-2);
  var NowSec = Nowymdhms.getSeconds();
  NowSec = ('0' + NowSec).slice(-2);
  var Week = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");

ranDom = getRndStr2(2); 
t = NowYear+ '' + NowMon+''+NowDay+''+NowHour+''+NowMin+''+NowSec+''+ranDom;
return t;

//document.write(NowYear+"年"+NowMon+"月"+NowDay+"日("+Week[NowWeek]+") "+NowHour+":"+NowMin+":"+NowSec);
}

// iine-vote-v2.php起動関数   //////////////////////////////////////////////////
$(function(){
     $('.IineVote').on('click' , function(){      
          $this = $(this);
          var id = $this.data("id");            //識別用ID（重複NG）
          var lockId = id;                      //2018.11.16 以下５Step 修正・追加 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 = voteTime; }     // 省略値 null        
          var file = "";              //カウンターファイル txt:テキストファイル  sql:mysqlデータベースファイル
          if ($this.data("file")){ file = $this.data("file") }
          else{ file = "txt"; }
          var phpurl = voteUrl;
          //if( file == "txt" ){ phpurl = "http://urbanqee.com/webutil/like/iine-vote-v2.php";}     // 要修正 *******
          //else { phpurl = "http://urbanqee.com/webutil/like/iine-vote-v2.php"; }                  //iine-vote-dbt.php
          //console.log(phpurl);
          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("エラー！投票数を取得できません。");
                  });
 });
});


//****************************************************************************************************//
//* いいね！ボタンPHP起動関数 旧バージョンclickCount-getCount.jsのVer2対応版  2918.12.12             *//
//* 旧バージョンのいいね！ボタン設置HTMLコードに対応しています                                       *//
//****************************************************************************************************//
//***** いいね！ボタン 環境設定項目を config.phpより取得 ********************** 
var cofigUrl = "config.php";                //config.phpのURL。clickCount-getCount-v2.jsをインクルードしたページから見たURL。
var voteTime = 30;                          //投票間隔時間（秒）
var idStrNo = 12;                           //いいね！ボタンid文字列生成桁数（20桁以下）
var getCountUrl = "iine-getCount-v2.php";   //iine-getCount-v2.phpのURL
var voteUrl = "iine-vote-v2.php";           //iine-vote-v2.phpのURL

 $.ajax({
    url: cofigUrl,               // config.php URL  
    type : "POST",
    data: { p: "js" }, 
    }).done(function(data){
      var dataarr = data.split( "," );   console.log(dataarr);
      voteTime  = dataarr[0];     //投票間隔時間（秒）
      idStrNo = dataarr[1];         //いいね！ボタンid ランダム文字列生成桁数（20桁以下）
      radomString = dataarr[2];
      getCountUrl = dataarr[3];   //iine-getCount-v2.phpのURL
      voteUrl = dataarr[4];       //iine-vote-v2.phpのURL
    }).fail(function(data){
       ;
 });   
//*********************************************

// Ver2 vote.php起動関数 2018.3.11 - 2018.11.16 - 2018.12.12  //////////////////////////////////////////////////
$(function(){
     $('.letsVote').on('click' , function(){      
          $this = $(this);
          var id = $this.data("id");            //識別用ID（重複NG）
          var lockId = id;                      //2018.11.16 以下５Step 修正・追加 data-lock属性省略対応
          if( $this.data("lock") ){
             lockId = $this.data("lock");       //排他制御ID
             if(lockId == ""){ lockId = id; }
          }
          var numHtml = "#" + $this.data("id"); //カウント数を表示するHTML
          var nowCount = Number($(numHtml).html()); //現在のカウント数
          var newCount = nowCount + 1;
          var timer = voteTime;                      //クッキーの有効期限（投票を制限する秒数） time()+60*60*24*30 はクッキーの有効期限を 30 日後にセット
          var phpurl = voteUrl;
               //console.log(phpurl);
          $.ajax({
               type : "POST",
               url : phpurl,
               data: {
                    "file_id" : id,
                    "count" : newCount, "lock_id" : lockId, "cookie_time" : timer, "file_kind" : "txt"
               }
          }).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) {
                        $(numHtml).html('error');
                  });
 });
});

// Ver2 getCount.php起動関数 2018.3.11 - 2018.12.12 /////////////////////////////////////////////////////
function getCountSet(id){
        var target = "#" + id;
        var phpurl = getCountUrl;   
        var obj =  $(target).parent("div"); 
        $(obj).css({ "cursor": "pointer" });
        $.ajax({
            url: phpurl,            // ソーシャルボタンカウント取得PHP   if (re.test(str)) 
            dataType: "json",
            data: { countid: id, filekind: "txt" }, 
              }).done(function(data){
                var res = data;
                $(target).text(res);
                var classname = $(target).attr("class");    //吹き出しのCLASS名取得 top/right/bottom/left
                if (/right/.test(classname) || /left/.test(classname)) { 
                  var obj =  $(target).parent("div");                 //親要素OBJ取得、全子要素にFloat属性設定、Float属性解除設定（以下３ステップ）
                  $(obj).children( "div" ).css({ "float": "left" });  //, "margin": "2px" }); //, "display": "inline", "vertical-align": "bottom", "cursor": "pointer" 
                  $(obj).append("<div style='clear: both; display: block;'></div>"); 
                 }
               }).fail(function(data){
                var res = "error";
                $(target).text(res);
                console.log(data);
             });
}

1.4 jQueryファイル、javascriptファイルおよびCSSファイルなど必要ファイルのインクルード（HTML)

いいね！ボタンを設置したいHTMLに、つぎの必要ファイルを<head>タグ内にインクルードします。

jQueryファイル / clickCount-getCount-v2.jsファイル / socialbutton-balloon.css


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"> <!-- HTMLソースコード utf-8 必須 -->

<!-- jQueryファイル（必須） -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- socialbutton-balloon.cssファイル(カウント表示用吹き出し 必要時) -->
<link href="js/socialbutton-balloon.css" rel="stylesheet" type="text/css">
</head>
<body>

<!-- ボタンコード ３ステップ -->
<DIV style="width:80px" class="IineVote" data-id="iine003id" data-count="balloon_right">
  <img class="IineImgR" src="../like/img/hand-like64.png" width=32>                                   
</DIV>

<!-- clickCount-getCount-v2.jsファイル（必須） /bodyタグの直前付近に置く -->
<script src="js/clickCount-getCount-v2.js"></script> 
</body>

1.5 MySQLデータベーステーブルの作成（データベース)

いいね！ボタン投票数カウントテーブルを iine-table-create.php を起動して作成します。

２．いいね！ボタンの設置方法

いいね！ボタンHTMLコードは、つぎのとおり、ボタン表示領域をDIVタグで定義し、ボタン画像をIMGタタグで定義します。
記述した「いいね！ボタンHTMLコード」は、オンロード時に、投票数（カウント数）の表示とともに整形を行います。
「いいね！ボタンHTMLコード」の整形の方法は下のタグメニューを参照してください。

いいね！ボタン設置用HTMLコード
整形後のいいね！ボタン設置用HTMLコード


<-- いいね！ボタン設置用HTMLコード -->
<DIV style="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="IineImgR" width="32">
</DIV>


<!-- 親DIVタグのdata-countの値（right,bottom,left,topを含む値)により、つぎのいずれかに整形されます -->

<!-- (1) カウントをボタンの右に置く場合の整形HTMLコード 赤字は生成タグコード -->

<DIV style="width:64px" class="IineVote" 
        data-id="countfile_id1" data-count="balloon_right">  <!-- 親DIVタグ -->
  <div style="float:left">
    <img src="../like/img/hand-like64.png" width="32" class="IineImgR">  <!-- いいね！ボタン -->
  </div>
  <div style="float:left" id="countfile_id1" class="balloon_right"></div> <!-- いいね！カウント -->
  <div style='clear: both; display: block;'></div>
</DIV>

<!-- (2) カウントをボタンの下置く場合の整形HTMLコード 赤字は生成タグコード -->

<DIV style="width:64px" class="IineVote" 
        data-id="countfile_id2" data-count="balloon_right">  <!-- 親DIVタグ -->
  <div>
    <img src="../like/img/hand-like64.png" width="32" class="IineImgR">  <!-- いいね！ボタン -->
  </div>
  <div id="countfile_id2" class="balloon_right"></div> <!-- いいね！カウント -->
</DIV>


<!-- (3) カウントをボタンの左に置く場合の整形HTMLコード 赤字は生成タグコード --> 

<DIV style="width:32px;height:64px" class="letsVote" 
            data-id="countfile_id3" data-count="balloon_top"> <!-- 親DIVタグ -->
  <div style="float:left" id="countfile_id3" class="balloon_top"></div>  <!-- いいね！カウント -->
  <div style="float:left">
    <img src="../like/img/hart-likegray.png" width="32"  class="IineImgL"> <!-- いいね！ボタン -->
  </div>
  <div style='clear: both; display: block;'></div>
</DIV>


<!-- (4) カウントをボタンの上に置く場合の整形HTMLコード 赤字は生成タグコード --> 

<DIV style="width:32px;height:64px" class="letsVote" 
            data-id="countfile_id4" data-count="balloon_top"> <!-- 親DIVタグ -->
  <div id="countfile_id4" class="balloon_top"> </div> <!-- いいね！カウント -->
  <div>
    <img src="../like/img/hart-likegray.png" width="32"  class="IineImgL"> <!-- いいね！ボタン -->
  </div>  
</DIV>

表１．標準長方形カラー吹き出しのclass名（白、赤、青、緑、橙色）
吹き出しの形と背景色	カウント件数をボタン画像の右	カウント件数をボタン画像の上	カウント件数をボタン画像の左	カウント件数をボタン画像の下	CSSファイル名
長方形/白	balloon_right	balloonr_top	balloon_left	balloon_bottom	socialbutton-balloon.css
長方形/赤	balloonr_right	balloonr_top	balloonr_left	balloonr_bottom	socialbutton-balloon-red.css
長方形/青	balloonbl_right	balloonbl_top	balloonbl_left	balloonbl_bottom	socialbutton-balloon-blue.css
長方形/緑	balloongr_right	balloongr_top	balloongr_left	balloongr_bottom	socialbutton-balloon-green.css
長方形/橙	balloonor_right	balloonor_top	balloonor_left	balloonor_bottom	socialbutton-balloon-orange.css

表２．丸形カラー吹き出しのclass名（橙、青、桃、薄緑色）
吹き出しの形と背景色	カウント件数をボタン画像の右	カウント件数をボタン画像の上	カウント件数をボタン画像の左	カウント件数をボタン画像の下	CSSファイル名
丸形/橙	balloon-maru_right				socialbutton-balloon-maru.css
丸形/青		balloon-maru_top
丸形/桃			balloon-maru_left
丸形/薄緑				balloon-maru_bottom

表３．風船形カラー吹き出しのclass名（橙、緑、紫色）
吹き出しの形と背景色	カウント件数をボタン画像の左上	カウント件数をボタン画像の右上	カウント件数をボタン画像の左下	カウント件数をボタン画像の右下	CSSファイル名
風船形/橙	balloon-maru_topl2	balloon-maru_topr2			socialbutton-balloon-maru.css
風船形/緑			balloon-maru_bottoml2
風船形/紫				balloon-maru_bottomr2

２．１いいね！ボタンサンプル - テキストファイル

いいね！カウントにカラー吹き出し付き背景に赤、青、緑、橙（例１～例４のアレンジ１）

例１～４ HTML
例１CSS（赤）
例２CSS（橙）
例３CSS（緑）
例４CSS（青）


<p>・例１のアレンジ<br><small>カウント件数をボタン画像の右</small></p>
<DIV style="width:70px;" class="IineVote" data-id="ex01-r-red" data-count="balloonr_right">
<img class="IineImgR" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>  

<p>・例２のアレンジ<br><small>カウント件数をボタン画像の下</small></p>
<DIV style="width:32px;" class="IineVote" data-id="ex02-b-red" data-count="balloonbl_bottom">
  <img class="IineImgB" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>

<p>・例３のアレンジ<br><small>カウント件数をボタン画像の左</small></p>
<!-- left ex03 -->
<DIV style="width:70px;" class="IineVote" data-id="ex03-l-red" data-count="balloongr_left"> 
  <img class="IineImgL" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>  

<p>・例４のアレンジ<br><small>カウント件数をボタン画像の上</small></p>
<!-- top -->
<DIV style="width:32px;" class="IineVote" data-id="ex04-t-red" data-count="balloonor_top"> 
  <img class="IineImgT" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>


/* カウント件数（赤吹き出し）をボタンの上に置く top */
/*  ボタンの上に置く top */
.balloonr_top {
	position: relative;
	background: red;       
	border: 1px solid red; 
        font-size:11px;
        text-align:center;
        margin-top:5px; padding:3px;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        border-radius: 5px; color: #ffffff;       
}
.balloonr_top:after, .balloonr_top:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonr_top:after {
	border-color: rgba(255, 0, 0, 0);
	border-top-color: red;
	border-width: 4px;
	margin-left: -4px;
}
.balloonr_top:before {
	border-color: rgba(255, 0, 0, 0);
	border-top-color: red; /*#242a2e;*/
	border-width: 5px;
	margin-left: -5px;
}

/* ボタンの右に置く right */
.balloonr_right {
	position: relative;
	background: red;
	border: 1px solid red; 
        font-size:11px;
        text-align:center;
        margin-bottom:5px; padding:4px;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        border-radius: 5px;  color: #ffffff;  
}
.balloonr_right:after, .balloonr_right:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonr_right:after {
	border-color: rgba(255, 0, 0, 0);
	border-right-color: red; 
	border-width: 4px; /*5px;*/
	margin-top: -4px; /*5px;*/
}
.balloonr_right:before {
	border-color: rgba(255, 0, 0, 0);
	border-right-color: red; 
	border-width: 5px; /*6px;*/
	margin-top: -5px;  /*6px;*/
}

/* ボタンの下に置く bottom */
/* bottom red  */
.balloonr_bottom {
	position: relative;
	background: red;
	border: 1px solid red;
        font-size:11px;
        text-align:center;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        /*margin-top: 3px;*/
        margin-bottom:5px; padding:3px;
        border-radius: 5px; color: #ffffff;
}
.balloonr_bottom:after, .balloonr_bottom:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonr_bottom:after {
	border-color: rgba(255, 0, 0, 0);
	border-bottom-color: red;
	border-width: 5px;
	margin-left: -5px;
}
.balloonr_bottom:before {
	border-color: rgba(255, 0, 0, 0);
	border-bottom-color: red;
	border-width: 6px;
	margin-left: -6px;
}

/* ボタンの左に置く left */
.balloonr_left {
	position: relative;
	background: red;
	border: 1px solid red;
        font-size:11px;
        text-align:center;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        margin-bottom:5px; padding:4px; 
        border-radius: 5px; color: #ffffff;
}
.balloonr_left:after, .balloonr_left:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonr_left:after {
	border-color: rgba(255, 0, 0, 0);
	border-left-color: red;
	border-width: 5px;
	margin-top: -5px;
}
.balloonr_left:before {
	border-color: rgba(255, 0, 0, 0);
	border-left-color: red;
	border-width: 6px;
	margin-top: -6px;
}


/* カウント件数（橙吹き出し）をボタンの上に置く top */
.balloonor_top {
	position: relative;
	background: orange;      /* 吹き出しの背景色-1/3 orange */
	border: 1px solid black; /* 吹き出しの枠線色-1/3 black */
        font-size:11px;
        text-align:center;
        margin-top:5px; padding:3px;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        border-radius: 5px; color: #ffffff;       
}
.balloonor_top:after, .balloonor_top:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonor_top:after {
	border-color: rgba(255, 164, 0, 0); /* 吹き出しの背景色-2/3 orange */
	border-top-color: orange;           /* 吹き出しの背景色-3/3 orange */
	border-width: 4px;
	margin-left: -4px;
}
.balloonor_top:before {
	border-color: rgba(0, 0, 0, 0);   /* 吹き出しの枠線色-2/3 black */
	border-top-color: #000000;        /* 吹き出しの枠線色-3/3 black */
	border-width: 5px;
	margin-left: -5px;
}

/* カウント件数（吹き出し）をボタンの右に置く right */
.balloonor_right {
	position: relative;
	background: orange;
	border: 1px solid orange; /*gray;*/ /*#0a0c0d;*/
        font-size:11px;
        text-align:center;
        margin-bottom:5px; padding:4px;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        border-radius: 5px;  color: #ffffff; /*#808080;*/ 
}
.balloonor_right:after, .balloonor_right:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonor_right:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: orange;  /* #ffffff;*/
	border-width: 4px; /*5px;*/
	margin-top: -4px; /*5px;*/
}
.balloonor_right:before {
	border-color: rgba(10, 12, 13, 0);
	border-right-color: orange; /* gray;*/ /*#0a0c0d;*/
	border-width: 5px; /*6px;*/
	margin-top: -5px;  /*6px;*/
}

/* カウント件数（吹き出し）をボタンの下に置く bottom */
/* bottom blue  */
.balloonor_bottom {
	position: relative;
	background: orange;
	border: 1px solid orange;
        font-size:11px;
        text-align:center;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        /*margin-top: 3px;*/
        margin-bottom:5px; padding:3px;
        border-radius: 5px; color: #ffffff;
}
.balloonor_bottom:after, .balloonor_bottom:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonor_bottom:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: orange;
	border-width: 5px;
	margin-left: -5px;
}
.balloonor_bottom:before {
	border-color: rgba(220, 220, 220, 0);
	border-bottom-color: orange;
	border-width: 6px;
	margin-left: -6px;
}

/* カウント件数（吹き出し）をボタンの左に置く left */
.balloonor_left {
	position: relative;
	background: orange;
	border: 1px solid orange;
        font-size:11px;
        text-align:center;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        margin-bottom:5px; padding:4px; /*margin-right:6px; margin-top:5px;*/
        border-radius: 5px; color: #ffffff;
}
.balloonor_left:after, .balloonor_left:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonor_left:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: orange;
	border-width: 5px;
	margin-top: -5px;
}
.balloonor_left:before {
	border-color: rgba(220, 220, 220, 0);
	border-left-color: orange;
	border-width: 6px;
	margin-top: -6px;
}


/* カウント件数（緑吹き出し）をボタンの上に置く top */
/*  ボタンの上に置く top */
.balloongr_top {
	position: relative;
	background: green; 
	border: 1px solid green;
        font-size:11px;
        text-align:center;
        margin-top:5px; padding:3px;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        border-radius: 5px; color: #ffffff;       
}
.balloongr_top:after, .balloongr_top:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloongr_top:after {
	border-color: rgba(0, 128, 0, 0);
	border-top-color: green;
	border-width: 4px;
	margin-left: -4px;
}
.balloongr_top:before {
	border-color: rgba(0, 128, 0, 0);
	border-top-color: green;
	border-width: 5px;
	margin-left: -5px;
}

/* ボタンの右に置く right */
.balloongr_right {
	position: relative;
	background: green;
	border: 1px solid green;
        font-size:11px;
        text-align:center;
        margin-bottom:5px; padding:4px;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        border-radius: 5px;  color: #ffffff; 
}
.balloongr_right:after, .balloongr_right:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloongr_right:after {
	border-color: rgba(0, 128, 0, 0);
	border-right-color: green;
	border-width: 4px;
	margin-top: -4px; 
}
.balloongr_right:before {
	border-color: rgba(0, 128, 0, 0);
	border-right-color: green; 
	border-width: 5px;
	margin-top: -5px;  
}

/* ボタンの下に置く bottom */
/* bottom blue  */
.balloongr_bottom {
	position: relative;
	background: green;
	border: 1px solid green;
        font-size:11px;
        text-align:center;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        /*margin-top: 3px;*/
        margin-bottom:5px; padding:3px;
        border-radius: 5px; color: #ffffff;
}
.balloongr_bottom:after, .balloongr_bottom:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloongr_bottom:after {
	border-color: rgba(0, 128, 0, 0);
	border-bottom-color: green;
	border-width: 5px;
	margin-left: -5px;
}
.balloongr_bottom:before {
	border-color: rgba(0, 128, 0, 0);
	border-bottom-color: green;
	border-width: 6px;
	margin-left: -6px;
}

/* ボタンの左に置く left */
.balloongr_left {
	position: relative;
	background: green;
	border: 1px solid green;
        font-size:11px;
        text-align:center;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        margin-bottom:5px; padding:4px; 
        border-radius: 5px; color: #ffffff;
}
.balloongr_left:after, .balloongr_left:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloongr_left:after {
	border-color: rgba(0, 128, 0, 0);
	border-left-color: green;
	border-width: 5px;
	margin-top: -5px;
}
.balloongr_left:before {
	border-color: rgba(0, 128, 0, 0);
	border-left-color: green;
	border-width: 6px;
	margin-top: -6px;
}


/* カウント件数（青吹き出し）をボタンの上に置く top */
/*  ボタンの上に置く top */
.balloonbl_top {
	position: relative;
	background: blue;
	border: 1px solid blue;
        font-size:11px;
        text-align:center;
        margin-top:5px; padding:3px;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        border-radius: 5px; color: #ffffff;       
}
.balloonbl_top:after, .balloonbl_top:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonbl_top:after {
	border-color: rgba(0, 0, 255, 0);
	border-top-color: blue;
	border-width: 4px;
	margin-left: -4px;
}
.balloonbl_top:before {
	border-color: rgba(0, 0, 255, 0);
	border-top-color: blue;
	border-width: 5px;
	margin-left: -5px;
}

/* ボタンの右に置く right */
.balloonbl_right {
	position: relative;
	background: blue;
	border: 1px solid blue;
        font-size:11px;
        text-align:center;
        margin-bottom:5px; padding:4px;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        border-radius: 5px;  color: #ffffff; 
}
.balloonbl_right:after, .balloonbl_right:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonbl_right:after {
	border-color: rgba(0, 0, 255, 0);
	border-right-color: blue;
	border-width: 4px; 
	margin-top: -4px; 
}
.balloonbl_right:before {
	border-color: rgba(0, 0, 255, 0);
	border-right-color: blue;
	border-width: 5px;
	margin-top: -5px;
}

/* ボタンの下に置く bottom */
/* bottom blue  */
.balloonbl_bottom {
	position: relative;
	background: blue;
	border: 1px solid blue;
        font-size:11px;
        text-align:center;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        /*margin-top: 3px;*/
        margin-bottom:5px; padding:3px;
        border-radius: 5px; color: #ffffff;
}
.balloonbl_bottom:after, .balloonbl_bottom:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonbl_bottom:after {
	border-color: rgba(0, 0, 255, 0);
	border-bottom-color: blue;
	border-width: 5px;
	margin-left: -5px;
}
.balloonbl_bottom:before {
	border-color: rgba(0, 0, 255, 0);
	border-bottom-color: blue;
	border-width: 6px;
	margin-left: -6px;
}

/* ボタンの左に置く left */
.balloonbl_left {
	position: relative;
	background: blue;
	border: 1px solid blue;
        font-size:11px;
        text-align:center;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        margin-bottom:5px; padding:4px; 
        border-radius: 5px; color: #ffffff;
}
.balloonbl_left:after, .balloonbl_left:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloonbl_left:after {
	border-color: rgba(0, 0, 255, 0);
	border-left-color: blue;
	border-width: 5px;
	margin-top: -5px;
}
.balloonbl_left:before {
	border-color: rgba(0, 0, 255, 0);
	border-left-color: blue;
	border-width: 6px;
	margin-top: -6px;
}

２．２いいね！ボタンサンプル - MySQLデータベースファイル

いいね！カウントに風船のようなカラー丸形吹き出し付き４サンプル（例１～例４のアレンジ２）

例１HTML
例２HTML
例３HTML
例４HTML
風船のような丸形吹き出しCSS

<!-- カウント件数、右 -->
<DIV style="width:70px;height:32px;" class="IineVote" 
     data-id="KjQw5CMEmn" data-lock="" data-count="balloon-maru_right" data-file="sql">
<img class="IineImgR" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>

<!-- カウント件数、上 -->

<DIV style="width:32px;border: none;" class="IineVote" 
     data-id="AM8oiJnq7p" data-lock="" data-count="balloon-maru_top"  data-file="sql"> 
  <img class="IineImgT" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>

<!-- カウント件数、左 -->
<DIV style="width:80px;border: none;" class="IineVote" 
     data-id="4r3nJUqRoc" data-lock="" data-count="balloon-maru_left"  data-file="sql"> 
  <img class="IineImgL" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>

<!-- カウント件数、下 -->
<DIV style="width:32px;border: none;" class="IineVote" 
     data-id="s21Wo8nO2H" data-lock="" data-count="balloon-maru_bottom"  data-file="sql">
  <img class="IineImgB" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>


/* カウント件数（吹き出し）をボタンの上に置く top */
.balloon-maru_top {
 	position: relative;
	display: inline-block;
 	/*margin: 1.5em 0;*/
	padding: 1px 5px;
 	width: 32px;
 	height: 32px;
 	line-height: 32px;
 	vertical-align: middle;
 	text-align: center;
 	color: #FFF;
	font-size: 12px;
 	font-weight: bold;
	background: #70a6ff; /* 吹き出しの背景色 */
 	border-radius: 50%;
 	box-sizing: border-box;
}

.balloon-maru_top:before{
	content: "";
	position: absolute;
	bottom: -9px;
	left: 35%;
 	/*margin-left: -15px;*/
	border: 5px solid transparent;
	border-top: 5px solid #70a6ff; /* 吹き出しの枠線色 */
 	z-index: 0;
}


/* カウント件数（吹き出し）をボタンの下に置く bottom */
.balloon-maru_bottom {
 	position: relative;
	display: inline-block;
 	/*margin: 10px 0;*/
	padding: 0 5px;
 	width: 32px;
 	height: 32px;
 	line-height: 32px;
 	vertical-align: middle;
 	text-align: center;
 	color: #FFF;
	font-size: 12px;
 	font-weight: bold;
	background: #a4eb84;
 	border-radius: 50%;
 	box-sizing: border-box;
}

.balloon-maru_bottom:before{
	content: "";
	position: absolute;
	top: -9px;
	left: 80%;
 	margin-left: -15px;
	border: 5px solid transparent;
	border-bottom: 5px solid #a4eb84;
 	z-index: 0;
}

/* カウント件数（吹き出し）をボタンの右に置く right */
.balloon-maru_right {
	position: relative;
	display: inline-block;
	margin: 10px 0 10px 5px;
	padding: 0 5px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	vertical-align: middle;
	text-align: center;
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
	background: #ffcc75;
	border-radius: 50%;
	box-sizing: border-box;
}

.balloon-maru_right:before{
	content: "";
	position: absolute;
	top: 80%;
	left: -9px;
  	margin-top: -15px;
	border: 5px solid transparent;
	border-right: 5px solid #ffcc75;
 	z-index: 0;
}

/* カウント件数（吹き出し）をボタンの左に置く left */
.balloon-maru_left {
	position: relative;
	display: inline-block;
	/*margin: 10px 5px 10px 0;*/
	padding: 0 5px;
 	width: 32px;
	height: 32px;
	line-height: 32px;
	vertical-align: middle;
	text-align: center;
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
	background: #ff8e9d;
	border-radius: 50%;
	box-sizing: border-box;
}

.balloon-maru_left:before{
	content: "";
	position: absolute;
	top: 80%;
	right: -9px;
	margin-top: -15px;
	border: 5px solid transparent;
	border-left: 5px solid #ff8e9d;
	z-index: 0;
}

２．３二者択一いいね！ボタンサンプル - MySQLデータベースファイル

複数ボタンを１グループとして一定時間の間（サンプルは20秒）、いづれか１つのボタンのみ投票できるように排他制御する複数択一のサンプルです。

１．準 備