旧いいねボタン設置手順

zipファイルの解凍とファイルの確認

まずはzipファイルをダウンロード、解凍します。

解凍すると「iine_app」という名前のフォルダが入っています。内容は以下の通りです。

  • iine.js（javascript）
    いいねボタンがクリックされると最初に走るプログラムファイルです。このファイルの中に初期設定を行う箇所があるので、必ず中身を確認して下さい。
  • _ajax.php（PHP）
    iine.jsが指令を出すファイルです。
  • iine.php（PHP）
    いいねボタンプログラムの本体です。
  • index.php（PHP）
    プログラムに関わるファイルではありませんが、セキュリティのためにこのファイルは削除せず、サーバーにアップロードしてください。
  • iine.css（css）
    いいねボタンを装飾するためのファイルです。
  • data.csv（csv）
    いいねボタンが押されると、ここにどんどん記録が溜まっていきます。
  • example.jpg
    お礼メッセージに表示される画像のサンプルです。使用しない場合は削除して構いません。

初期設定

全てのファイルが揃っていることを確認したら、初期設定を行うのでiine.jsをテキストエディタで開いてください。

最初の4行目あたりに以下のような記述があります。

var thanks = true; // お礼メッセージを出す場合はtrue、出さない場合はfalse
var folderpath = '/';
// iine_appフォルダが入っているパスを、ドメイン名以下から記入してください。

いいねボタンをクリックしたときにお礼メッセージをポップアップしたい場合はvar thanksの値をtrueに、お礼メッセージを出さない場合はfalseにします。

var folderpathの値には、iine_appフォルダを設置した場所を記載します。詳細がiine.jsファイルに記載してありますので、参考にしながら書いてください。ドメイン直下にiine_appフォルダをアップロードした場合は、変更する必要はありません。

いいねボタンの設置

いいねボタンを設置したいページのHTMLファイルにコードを書き込み、ボタンを表示します。コードを書き込むのは３か所です。

<head>～</head>の間

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet">
<link rel="stylesheet" href="iine_app/iine.css">

一行目でGoogleの提供しているマテリアルアイコン（ハートマーク）を、二行目でいいねボタン用のCSSファイルを読み込みます。

サンプルは、HTMLファイルがiine_appフォルダと同じ階層にある場合の記述です。CSSファイルのパスは、必要に応じて書き換えてください。http://から始まる絶対パスで指定すると安心です。

</body>（閉じタグ）の直前

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="iine_app/iine.js"></script>

一行目でGoogleの提供しているjQueryライブラリを、二行目でいいねボタン用のjsファイルを読み込みます。

こちらもHTMLファイルがiine_appフォルダと同じ階層にある場合の記述なので、jsファイルのパスは必要に応じて書き換えてください。http://から始まる絶対パスで指定すると安心です。

いいねボタンを設置したい場所

<!-- いいねボタンここから -->
<div id="iine_wrap">
<!-- ボタン本体ここから -->
<button type="submit" id="iine">
<div class="iine_wrap">
<i class="material-icons heart">favorite</i>
<div class="circle"></div>
<span id="countnum"></span>
</div>
</button>
<!-- ボタン本体ここまで -->

<!-- お礼メッセージここから -->
<div id="iine_thanks" style="display:none;">
<div class="box">
<img src="iine_app/example.jpg" alt="THANK YOU!">
<p>ありがとうございます！</p>
</div>
</div>
<!-- お礼メッセージここまで -->
</div>
<!-- いいねボタンここまで -->

画像およびありがとうメッセージはお好みで差し替えてください。また、お礼メッセージを使用しない場合は、「お礼メッセージここから～ここまで」の部分を削除しても構いません。

サーバーへのアップロードと動作確認

ここまでの作業が終わったら、「iine_appフォルダをまるごと」と「編集したHTMLファイル」をサーバーの適切な場所にアップロードして、いいねボタンが正常に動作するか確認してください。

いいねボタンをクリックするとアニメーションし、カウントが正常に変化したら成功です。

デザインを変更する場合

星マークに変更する

iine.cssの中身をこちらのCSSに差し替えてください。

その後、いいねボタンを設置する場所の記述を、以下のように差し替え、星マークに変わったか確認してください。うまく切り替わらない場合はブラウザのキャッシュをクリアしてください。

<!-- いいねボタンここから -->
<div id="iine_wrap">
<!-- ボタン本体ここから -->
<button type="submit" id="iine">
<div class="iine_wrap">
<i class="material-icons-round star-icon">star</i>
<span id="countnum"></span>
</div>
</button>
<!-- ボタン本体ここまで -->

<!-- お礼メッセージここから -->
<div id="iine_thanks" style="display:none;">
<div class="box">
<img src="iine_app/example.jpg" alt="THANK YOU!">
<p>ありがとうございます！</p>
</div>
</div>
<!-- お礼メッセージここまで -->
</div>
<!-- いいねボタンここまで -->
2020年9月1日以前にいいねボタンを設置し、ハートマークのボタンで運用していた方は、これだけでは星マークに切り替わらないため、<head>～</head>内の記述を以下のように差し替えてください。
<!-- 差し替え前 -->
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="iine_app/iine.css">

<!-- 差し替え後 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet">
<link rel="stylesheet" href="iine_app/iine.css">

トラブルシューティング

ローカル環境ではPHPは動きません。いいねボタンの動作確認は、サーバーにアップロードしてから行ってください。
iine.jsのfolderpathの指定が誤っている可能性があります。iine_appフォルダの入っている階層が正しく指定されているか、半角スラッシュ「/」半角クオーテーション「'」が抜けていないか、コメントに書いてある記入例とよく見比べて確認してください。
ブラウザのキャッシュが原因かもしれません。お使いのブラウザのキャッシュをクリアして再度ご確認ください。
body閉じタグの直前に、jQuery及びiine.jsを読み込むコードが貼り付けてあるかご確認ください。また、iine.jsのパスが間違っていないかご確認ください。
iine.cssを開き、「お礼メッセージを上にポップアップする場合ここから」～「ここまで」の部分をコメントアウトし、その下にある「お礼メッセージを下にポップアップする場合ここから」～「ここまで」の部分をコメント解除してください。
head内に張り付ける2行のコードが正しく張り付けられているかご確認ください。また、iine.cssのパスが間違っていないかご確認ください。
CSSで横幅300pxで固定してあります。div#iine_wrap div#iine_thanksのwidthの値をお好みで変更してください。

どうしても問題が解決しない場合や、不具合を見つけた場合は、配布プログラム用の問い合わせフォームよりお問い合わせください。