このスクリプトはＰＨＰで作成されています。対応するサーバーでお使いください。
推奨はPHP7.4以上です。

導入方法

①readme.htmlを除いたファイルをサーバーにアップロード。


        ②<head>~</head>内に<link rel="stylesheet" href="reaction.css">を追加。
        ③</body>直前に
                <script src="reaction/config.php?format=js"></script>
                <script src="reactions.js"></script>
        を追加。
        ④リアクションボタンを置きたいコンテンツの要素に reaction-id="任意のID" を追加。
        ボタンを置きたい場所に以下を追加：
        <div class="reaction-buttons"></div>

※reaction-idをもつ要素内であれば、ボタンとカウント表示はどこでも配置できます。

使う絵文字の変更

reaction/config.php内の


            // リアクションの設定
            const REACTION_CONFIG = [
                'reactions' => [
                //'CSVに記録される名前' => '表示される文字(または画像)'
                    'like' => 'いいね！',
                    'heart' => '💛',
                    'laugh' => 'laugh.png', // .png,.gif,.jpg,.svgが使えます
                ],
                // リアクション制限の設定
                'limits' => [
                    'daily' => true,     // true: 1日で制限リセット, false: 無期限
                    'perIP' => 5,       // IP毎の制限回数（daily = falseの場合のみ使用）
                    'dailyLimit' => 1   // 1日あたりの制限回数（daily = trueの場合のみ使用）
                ],
                'blockedIPs' => [ // 拒否するIPアドレスのリスト
                    // '192.168.1.100',  // コメントを外して IP を追加すると制限が有効になります
                ]

を変更してください。

見た目のカスタマイズ

reaction.cssを編集してください。

保存先ファイルについて

reaction内のreaction.csvに記録されます。はじめてボタンが押されたときにファイルが作成されます。

謝辞

このスクリプトはいいねボタン・改を参考にして作られました。参考元スクリプトは管理画面もあり、とても使い勝手がよいスクリプトです。

また、Misskey公式のリアクションボタンも参考にしました。
MisskeyはUIが洗練されており、多機能なSNSプラットフォームです。

ちなみに、このHTMLにもボタンを組み込んでいるのでPHPが動く環境下であればこのまま試すことができます。