いいねボタン・改 設置手順

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

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

  • 編集が必要なファイルは、newiine_appフォルダ直下にあるnewiine.jsのみです。その他のファイルは基本的に編集する必要がありません。
  • クリックされたいいねボタンに関するデータは、datasフォルダ内に蓄積されていきます。
  • 管理画面パスワード、拒否するIPアドレス等に関するデータは、datas>settingフォルダ内のファイルに保存されます。

初期設定

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

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

var folderpath = '/';
// newiine_appフォルダが入っているパスを、ドメイン名以下から記入してください。
// 下記の例に従ってください。

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

いいねボタンの設置

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

<head>~</head>の間

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

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

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

</body>(閉じタグ)の直前

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="newiine_app/newiine.js"></script>

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

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

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

<!-- いいねボタン改ここから -->
  <button type="submit" class="newiine_btn" data-iinename="いいねボタンの名前">
    <span class="material-icons-round">favorite</span>
    <span class="newiine_count"></span>いいね
  </button>
<!-- いいねボタン改ここまで -->

data-iinename="いいねボタンの名前"の部分の「いいねボタンの名前」を適宜書き換えてください。いいねボタンは、ここに記述された名前によって区別されます。同じ名前をつけたいいねボタンは、同じいいねボタンと判断され、異なるページに複数設置したとしても、カウント数を共有します。名前は後から変更することもできますが、少しだけ手順がかかります。

利用環境によっては、data-iinenameの値を日本語名にすると、管理画面でいいねボタンのデータが閲覧できなくなる場合があります。いいねボタンは正常に動作するけど管理画面に反映されないという場合は、data-iinenameの値を半角英数字に設定しなおしてください。この問題は今後のアップデートでの修正を検討しています。

いいね数を非表示にしたい場合

<span class="newiine_count"></span>を削除してください。

ハートマークを削除したい場合

<span class="material-icons-round">favorite</span>を削除してください。

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

ここまでの作業が終わったら、「newiine_appフォルダをまるごと」と「編集したHTMLファイル」をサーバーの適切な場所にアップロードします。

管理画面の確認

http://(newiine_appフォルダをアップロードしたURL)/newiine_app/admin/にアクセスすると、いいねボタン改の管理画面にアクセスできます。

いいねボタン改 設置マニュアル

ログインを要求されるので、初回は「pass」と入力してログインして下さい。

いいねボタン改設置マニュアル

サイドバーの「設定変更」をクリックすると各種設定画面に遷移します。ここでいいねボタンのクリック数上限などが変更できます。お好みで設定を変更してください。

セキュリティのため、パスワードは必ず変更して下さい。

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

トラブルシューティング

ローカル環境ではPHPは動きません。いいねボタン改の動作確認は、サーバーにアップロードしてから行ってください。
newiine.jsのfolderpathの指定が誤っている可能性があります。newiine_appフォルダの入っている階層が正しく指定されているか、半角スラッシュ「/」半角クオーテーション「’」が抜けていないか、コメントに書いてある記入例とよく見比べて確認してください。
ブラウザのキャッシュが原因かもしれません。お使いのブラウザのキャッシュをクリアして再度ご確認ください。
body閉じタグの直前に、jQuery及びnewiine.jsを読み込むコードが貼り付けてあるかご確認ください。また、newiine.jsのパスが間違っていないかご確認ください。
head内に張り付ける2行のコードが正しく張り付けられているかご確認ください。また、newiine.cssのパスが間違っていないかご確認ください。

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