てきとー実験場

<link rel="stylesheet" href="reaction.css">

<script src="reaction/config.php?format=js"></script>
<script src="reactions.js"></script>

reaction-id="任意のID"

<div class="reaction-counts"></div> <!-- reaction_count,reaction_repeaterの場合はこれを追加。reaction_buttonでは要りません。 --!>
<div class="reaction-buttons"></div>

例:
<div reaction-id="任意のID" >
コンテンツ
<div class="reaction-buttons"></div>
</div>

設定項目

// リアクションの設定
const REACTION_CONFIG = [
    'reactions' => [
//'CSVに記録される名前' => '表示される絵文字'
        'like' => '👍',
        'bad' => '👎',
        'heart' => '❤️',
        'laugh' => 'laugh.png', // .png,.gif,.jpg,.svgが使えます
        'sad' => '😢',
        'love' => '😍',
        'cold' => '🥶',
        '100ten' => '💯',
        'thanks' => '🙏',
    ],
    // リアクション制限の設定
    'limits' => [
        'daily' => true,     // true: 1日で制限リセット, false: 無期限
        'perIP' => 1,       // IP毎の制限回数（daily = falseの場合のみ使用）
        'dailyLimit' => 10,  // 1日あたりの制限回数（daily = trueの場合のみ使用）
        'disableOnLimit' => true  // 制限回数に達した場合ボタンを無効化(true or false)
    ],
    // リアクションの表示初期展開数
    'display' => [
        'initialButtons' => 5  // 初期表示するボタンの数
    ],
    // 拒否するIPアドレスのリスト
    'blockedIPs' => [
        // '192.168.1.100',  // コメントを外して IP を追加すると制限が有効になります
    ]
];

サンプル画像

てがろぐへの導入方法

 <link rel="stylesheet" href="../reaction.css">

<script src="reaction/config.php?format=js"></script>
<script src="reactions.js"></script>

    <div class="comment" reaction-id="[[POSTID]]">
        [[COMMENT]]
    <div class="reaction-counts"></div> <!-- reaction_count,reaction_repeaterの場合はこれを追加。reaction_buttonでは要りません。 --!>
    <div class="reaction-buttons"></div>
    </div>

'custom_emoji' => 'emoji/カスタム絵文字の画像パス',

reaction/reactions.php

/reaction/reactions.php

<script src="upload.js"></script>

設定する項目について

<input type="text" id="customText" value="無断転載禁止/DO NOT REPOST">

<option value="watermark.png">watermark.png</option>

$uploadDir = 'images/'; // 画像アップロードディレクトリ
$miniDir = 'images/mini/';//サムネイルディレクトリ
$thumbnailWidth = 250;//サムネイルのサイズ
$fontFile = 'Mplus1-Regular.ttf'; //使用するフォントファイル
$resizeOption = '1'; // 画像サイズ制限オプション（1 = 有効, 0 = 無効）
$maxDimension = 1000; // 最大サイズ
$defaultWatermark = 'watermark.png'; //デフォルトの透かし画像
$watermarkScale = 0.2;//透かし画像の倍率(対横幅)
$convertToWebpOption = '0'; // WebP変換オプション（1 = 有効, 0 = 無効）

$text = mb_convert_encoding($text, 'UTF-8', 'auto');

TIPS：新規投稿/編集画面で使う方法

<script src="upload.js"></script>