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ファイルにコードを書き込み、ボタンを表示します。コードを書き込むのは3か所です。
<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> <!-- いいねボタンここまで -->
<!-- 差し替え前 --> <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">
トラブルシューティング
div#iine_wrap div#iine_thanks
のwidth
の値をお好みで変更してください。どうしても問題が解決しない場合や、不具合を見つけた場合は、配布プログラム用の問い合わせフォームよりお問い合わせください。