できる!自分のページの「いいね!ボタン」を設置する 新バージョン - いいね!ボタン Ver2
投票数のカウントは、データベースMySQLが使用できる。
いいね!ボタンをレス記事などに動的配置できる。~ PHP + MySQL + jQuery + Ajax ~

1.   準備2.  いいね!ボタンの設置方法
2.1.  いいね!ボタンサンプル - テキストファイル2.2.  いいね!ボタンサンプル - MySQL DBファイル2.3.  二者択一いいね!ボタンサンプル

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

🙂 いいね!ボタン設置機能比較

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

🙂 いいね!ボタンデモ - カウントに吹き出し付きデモ (MySQL使用)

・例1 カウント件数、右

・例2 カウント件数、上

・例3 カウント件数、左

・例4 カウント件数、下

2者択一ボタン(いいね、いまいち)
  ≫新しいウインドウでデモを見る≫新しいウインドウでレス記事に動的設置デモを見る

  🙂 いいね!ボタン投票数カウンターファイルの形式

  いいね!ボタン設置HTMLコードのdata-id要素の指定値(いいね!ボタンid)により、つぎのファイル形式になっています。

 1.準 備

いいね!ボタンの設置準備を行います。

 1.1 使用ファイル

  1. xxxxx.html/yyyyy.php(UTF-8):いいね!ボタンを表示するページ(必須)
  2. jQueryファイル:code.jquery.com(英語)サイトまたは解説サイト(日本議)を参照(必須)
  3. config.php:いいね!ボタン環境設定テーブル(必須)
  4. iine-table-cre.php:いいね!ボタン用MySQLデーターベーステーブル作成(MySQLデータベース使用時必須)
  5. iine-getCount-v2.php:いいね!カウント得票数の取得処理(オンロード時カウント数表示)(必須)
  6. iine-vote-v2.php:いいね!カウント投票処理(カウントアップおよびカウント数表示)(必須)
  7. clickCount-getCount-v2.js(UTF-8):vote.php起動関数(いいね!カウント投票処理)とgetCount.php起動関数(いいね!カウント得票数の取得処理)から成っています。(必須)
    getCount.php起動関数はxxxxx.htmlのロード時に起動され、iine-getCount-v2.phpと通信し得票数の取得処理を行います。
    vote.php起動関数は「いいね!ボタン」がクリックされたときに起動され、iine-vote-v2.phpと通信し投票処理を行います。
  8. socialbutton-balloon.css:カウント表示用吹き出しCSS(必要の場合)
    吹き出しは、CSS ARROW Please!サイトで生成したCSSをいいね!ボタン用にアレンジして作成しています。
  9. logフォルダ(テキストファイルの場合):log/いいね!ボタン識別ID.count。logフォルダ配下のいいね!カウントファイル。指定された「いいね!ボタン識別ID」毎にカウントファイルが作成されます。
    logフォルダは、getCount.phpおよびvote.phpと同じ場所に、事前に作成してください。
  10. MySQLデータベース(データベースの場合):事前に、MySQLデータベースの登録およびいいね!ボタン用テーブルの作成が必要です。

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

 🙂 いいね!ボタンVer2設置のファイル構成例
 like  ← メインフォルダ
    +  img ← 画像ファイル群
    |     +  img1.png ← ボタンicon
    |     +         ・・・
    |     +  imgx.png ← ボタンicon
    +  js ← javascript, CSSファイル 
    |     +  clickCount-getCount-v2.js ← いいね!ボタンjavascript必須
    |     +  clickCount-getCount.js ← Ver2対応の旧バージョンいいね!ボタンjavascript
    |     +  socialbutton-balloon.css ← 吹き出しCSS(新旧バージョン共通)
    |     +  socialbutton-balloon-red.css ← 吹き出しCSS(新旧バージョン共通)
    |     +  socialbutton-balloon-blue.css ← 吹き出しCSS(新旧バージョン共通)
    |     +  socialbutton-balloon-green.css ← 吹き出しCSS(新旧バージョン共通)
    |     +  socialbutton-balloon-orange.css ← 吹き出しCSS(新旧バージョン共通)
    |     +  socialbutton-balloon-maru.css ← 吹き出しCSS(新旧バージョン共通)
    +  log ← いいね!ボタン投票数カウンターファイル群(テキストファイル)テキストファイル時必須
    |     +  xxxxxx.count ← カウンターファイル1
    |     +        ・・・
    |     +  yyyyyy.count ← カウンターファイルn
    +  config.php  ← いいね!ボタン環境設定テーブル必須
    +  iine-table-create.php  ← いいね!ボタン投票数カウントMySQLデーターベーステーブル作成
    +  iine-getCount-v2.php  ← いいね!ボタンカウント得票数の取得処理(オンロード時カウント数表示)必須 
    +  iine-vote-v2.php  ← いいね!ボタンカウント投票処理(ボタンクリック時カウントアップおよびカウント数表示)必須  
    +  likecount-v2-demo.html  ← いいね!ボタン設置デモページ(テキストファイル、MySQL) 
    +  openssl-crypt.php  ← MySQLサーバーパスワード暗号化
    +  sample-textfile.html  ← いいね!ボタン設置確認用サンプルページ(テキストファイル) 

 sns
    +  mypage-likecount-v2.html ← このページ

 MySQLサーバ データベース時必須
    +  いいね!ボタンテーブル ← いいね!ボタン投票数カウンターテーブル 

 いいね!ボタン設置ページフォルダ(例) 
    +  bbbbb.html ← いいね!ボタン設置HTML(例)


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

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

 ■このページで使用しているアイコン画像サンプル

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


<?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 以下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 = 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 以下5Step 修正・追加 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属性解除設定(以下3ステップ)
                  $(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>タグ内にインクルードします。

  1. jQueryファイル(必須)
  2. clickCount-getCount-v2.jsファイル(必須)- 配置位置に注意(/bodyタグの直前)
  3. clickCount-getCount.jsファイル(旧バージョンいいね!ボタン設置HTML使用時、必要)
  4. socialbutton-balloon.cssファイル(必要時)
    socialbutton-balloon-red.css(必要時)
    socialbutton-balloon-blue.css(必要時)
    socialbutton-balloon-green.css(必要時)
    socialbutton-balloon-orange.css(必要時)
    socialbutton-balloon-maru.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>

<!-- ボタンコード 3ステップ -->
<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 を起動して作成します。

 2. いいね!ボタンの設置方法

いいね!ボタンHTMLコードは、つぎのとおり、ボタン表示領域をDIVタグで定義し、ボタン画像をIMGタタグで定義します。
記述した「いいね!ボタン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>

表1.標準長方形カラー吹き出しのclass名(白、赤、青、緑、橙色)
吹き出しの形と背景色カウント件数を
ボタン画像の右
カウント件数を
ボタン画像の上
カウント件数を
ボタン画像の左
カウント件数を
ボタン画像の下
CSSファイル名
長方形/白balloon_rightballoonr_topballoon_leftballoon_bottomsocialbutton-balloon.css
長方形/赤balloonr_rightballoonr_topballoonr_leftballoonr_bottomsocialbutton-balloon-red.css
長方形/青balloonbl_rightballoonbl_topballoonbl_leftballoonbl_bottomsocialbutton-balloon-blue.css
長方形/緑balloongr_rightballoongr_topballoongr_leftballoongr_bottomsocialbutton-balloon-green.css
長方形/橙balloonor_rightballoonor_topballoonor_leftballoonor_bottomsocialbutton-balloon-orange.css


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


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


 2.1 いいね!ボタンサンプル - テキストファイル

いいね!カウントにカラー吹き出し付き背景に赤、青、緑、橙(例1~例4のアレンジ1)

・例1のアレンジ
カウント件数をボタン画像の右

・例2のアレンジ
カウント件数をボタン画像の上

・例3のアレンジ
カウント件数をボタン画像の左

・例4のアレンジ
カウント件数をボタン画像の下


<p>・例1のアレンジ<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>・例2のアレンジ<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>・例3のアレンジ<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>・例4のアレンジ<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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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, "MS ゴシック",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;
}

 2.2 いいね!ボタンサンプル - MySQLデータベースファイル

いいね!カウントに風船のようなカラー丸形吹き出し付き4サンプル(例1~例4のアレンジ2)

・例1のアレンジ
カウント件数をボタン画像の右

・例2のアレンジ
カウント件数をボタン画像の上

・例3のアレンジ
カウント件数をボタン画像の左

・例4のアレンジ
カウント件数をボタン画像の下

<!-- カウント件数、右 -->
<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;
}


 2.3 二者択一いいね!ボタンサンプル - MySQLデータベースファイル

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


<table style="padding-top:0px;width:200px;margin-bottom:30px;margin-left:30px">
<tr>
<td valign=top>
<DIV style="width:80px;height:32px;" class="IineVote" 
     data-id="GroupA-01" data-lock="GroupA-0102" data-count="balloon-maru_right" 
     data-file="sql" data-time="20" data-title="いいね!">
<img class="GrIineImgR" src="../like/img/iine-icon04.png" width=32>
</DIV>   
</td>
<td valign=top>
<DIV style="width:80px;border: none;" class="IineVote" 
     data-id="GroupA-02" data-lock="GroupA-0102" data-count="balloon-maru_right"  
     data-file="sql" data-time="20" data-title="いまいち!"> 
  <img class="GrIineImgR" src="../like/img/hartbrake-0529.png" width=32>
</DIV> 

</td></tr>
</table>


1.   準備2.  いいね!ボタンの設置方法
2.1.  いいね!ボタンサンプル - テキストファイル2.2.  いいね!ボタンサンプル - MySQL DBファイル2.3.  二者択一いいね!ボタンサンプル

 ≫いいね!ボタンの設置方法 旧バージョン




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