ガタガタです。いつもありがとうございます。
いいねボタンを公開してから現在までに、「いいねボタンを同一ページに複数個設置したい」というお問い合わせをいくつかいただいています。
申し訳ないのですが、複数個設置できるようにするには、いいねボタンのプログラムを根幹から見直す必要があり、ほぼ最初から作り直すくらいの手間が見込まれるため現時点で対応を考えていません。というのも、現在のプログラムではいいねボタンの設置URLがボタンの識別番号のような機能を果たしているからです。
ただし、裏技みたいなものではありますが、１ページに複数個設置する方法を考えたので、以下紹介します。
概要：iframeを使います
ざっくりとした仕組みを説明すると、いいねボタンを設置したい数とおなじ数だけ「いいねボタンだけのページ（以下、いいねページと呼びます）」を作成し、「いいねボタンを設置したいページに、iframeでいいねページを表示する」という方法です。
iframeとは、あるページの一部分に、別のページの内容を表示させることができるタグです。サイトへのYoutube動画の貼り付けや、Twitterタイムラインの埋め込み、Googleマップの埋め込み等も、すべてiframeタグで実現しています。
外部ページはもちろん、同一ドメインに設置された別のページを表示することもできるので、この機能を利用します。
注意点
この方法だとお礼メッセージを表示することができません。
厳密に表現すると「iframeの範囲より外側に、iframeの内容（お礼メッセージ）をはみ出して表示することができない」ということです。
こんな感じになってしまいます。（iframeの範囲が分かりやすいように、ピンク色にしてあります）
この方法でいいねボタンを設置する際には、iine.jsの設定でお礼メッセージを表示しないようにしてください。
それでもOKという方はぜひ、試してみてください。
手順１：いいねボタンだけのページを作る
まずはいいねボタンだけが表示される「いいねページ」を作ります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>いいねボタン</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet"> <link rel="stylesheet" href="iine_app/iine.css"> </head> <body> <!-- いいねボタンここから --> <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> <!-- いいねボタンここまで --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="iine_app/iine.js"></script> </body> </html>
jsファイルやcssファイルへのパスは、設置した場所に応じて適宜書き換えてください。また、お礼メッセージを表示しないようにiine.jsの設定部分を書き換えるのもお忘れなく。
このようないいねページを、設置したいいいねボタンの数と同じだけ作成します。サーバーにアップロードしたらいいねページにアクセスして、いいねボタンが正常に動作することを確認してください。
手順２：いいねボタンを表示したいページに埋め込む
ボタンが正常に動作していることを確認したら、いいねボタンを表示したい場所に、iframeタグでいいねページを埋め込みます。
<iframe src="ここにいいねページのURL" class="iineiframe"></iframe>
iframeは透過されるので、張り付けたページの背景に色や壁紙がついていても問題なく表示されるはずです。
ちなみに「ひとつのページに同一URLのいいねページを埋め込む」と正常な動作がしなくなる可能性がありますが、「別々のページに同一URLのいいねページを埋め込む」のは問題ありません。（複数タブで交互にクリックするみたいな特殊な操作をされると誤作動を起こす可能性はありますが……）
いいねボタンはURLが識別番号のようなものなので、工夫して使うと面白いことができると思います。いろいろ試してみてください。
手順３：デザインの微調整
このままだと、iframeに枠線が表示されていたり、iframeの範囲といいねボタンのデザインが噛み合わなかったりするので、CSSでデザインを調整します。
iframeのサイズ調整
iframe.iineiframe {
border: none;
padding: 10px;
height: 60px;
}
これをiframeを埋め込んだページのCSSに追記します。
ハートマークの波紋のサイズ調整
iine.cssの該当する箇所を上書きするか、iine.cssの読み込み位置より後に、以下のように記述します。
button#iine .iine_wrap .circle {
width: 55px;
height: 55px;
}
ハートマークの波紋が大きいため、元のままだとiframeの範囲を超えて隠れてしまいます。そのため、widthおよびheightの値を85pxから55pxに変更します。
動作確認
作業が終わったら、同一ページの複数のいいねボタンが、それぞれ独立して動くことを確認してください。
片方をクリックしてページを再読み込みし、片方だけがカウントされていれば成功です。お疲れ様でした！
もしもこの方法でも上手く動かない場合は、プログラム関連問い合わせフォームから詳細をお知らせください。
以上、よろしくお願いいたします。