いいね！ボタン Ver2 確認用サンプル～テキストファイル編

🙂 いいね！カウントに長方形/背景白色の吹き出し付き

・カウント件数、右	・カウント件数、上	・カウント件数、左	・カウント件数、下
２者択一ボタン（いいね、いまいち）

🙂 いいね！カウントに長方形/背景赤、青、緑、橙色の吹き出し付き

・カウント件数、右	・カウント件数、上	・カウント件数、左	・カウント件数、下

🙂 いいね！カウントに丸形/背景橙、青、桃、薄緑色の吹き出し付き

・例５
カウント件数、右

・例６
カウント件数、上

・例７
カウント件数、左

・例８
カウント件数、下

🙂 いいね！カウントに風船形/背景橙色の吹き出し付き

・例５
カウント件数、左上

・例６
カウント件数、右上

・例７
カウント件数、左下

・例８
カウント件数、右下

表１．標準長方形カラー吹き出しの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

🙂 サンプルコード（V2 新バージョン）


<DIV style="cursor: pointer;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="IineTmg" width="32">
</DIV>

最終更新日：2018.12.12