Реакции для материалов
Реакции для материалов — это простой способ собрать отклик от пользователей прямо под новостью, статьёй или другим типом контента. Вместо того чтобы писать комментарий, читатель может выбрать одну из предложенных реакций: от лайка до удивления или недовольства.
Такой формат помогает быстрее понять, как пользователи воспринимают материал, какие эмоции он вызывает и насколько интересен. Для владельцев сайтов это удобный инструмент анализа вовлечённости и интереса к публикациям.
Преимущества скрипта:
- Работа во всех ключевых модулях uCoz: Cкрипт легко масштабируется — достаточно прописать нужные модули в массиве $modules, и скрипт создаст для них отдельные таблицы в базе.
- Поддержка авторизованных пользователей и гостей: Скрипт учитывает реакции как от зарегистрированных пользователей, так и от гостей.
- Один клик — одна реакция: Пользователь может выбрать только одну реакцию за материал. При повторном клике по той же — голос снимается. При выборе другой — реакция заменяется. Это интуитивно и предотвращает накрутки.
- Гибкость в настройке интерфейса: Количество, порядок и тип реакций можно менять в HTML — скрипт не жёстко привязан к конкретным эмодзи. Также можно полностью адаптировать стили под дизайн сайта.
Пошаговая инструкция по установке скрипта
1. Настройка доступа к PHP
Перейдите на главную страницу панели управления сайтом и откройте раздел «PHP-скрипты». Здесь будут указаны данные для подключения. Если пароль ещё не задан — установите его.
Скачайте FTP-клиент. Мы рекомендуем FileZilla. После установки откройте программу и введите параметры подключения:
- Сервер: s2001.ucoz.net
- Логин: ваш логин из раздела «PHP детали»
- Пароль: заданный вами ранее
Нажмите кнопку «Быстрое соединение» для подключения к серверу.
2. Загрузка PHP-скрипта на сервер
После подключения перейдите в каталог scripts — дважды кликните по папке в правой панели FileZilla. Затем загрузите в неё папку emotions из скачанного архива.
Проще всего загрузить папку, просто перетащив её в правую часть окна FileZilla.
3. Загрузка JS-скрипта в файловый менеджер
Загрузите JavaScript-файл reactions.js в папку js через Файловый менеджер. Этот скрипт отвечает за логику работы реакций.
4. Установка кода на страницу материала
Перейдите в шаблон «Страница материала и комментариев к нему» нужного модуля и вставьте код из файла для отображения блока с реакциями.
Для работы скрипта не забудьте подключить JS-скрипт перед закрывающим тегом </body> в шаблоне:
<script src="/js/reactions.js"></script>
5. Установка кода в вид материалов (опицонально)
Если вы хотите отображать количество реакций в каждом материале на страницах архива или главной странице модуля, скачайте и добавьте соответствующий код в шаблон «Вид материалов».
Скачать HTML-код (Вид материалов)
В коде добавленного блока:
<div class="catalog-emotion-block" data-module="news" data-id="$ID$">
замените значение data-module="news" на соответствующий модуль, в котором используется скрипт.
Дополнительно, в шаблоне «Страница архива материалов» или «Главная страница модуля» (в зависимости от используемого модуля) оберните переменную $BODY$ в следующий контейнер:
<div id="materials-list"> $BODY$ </div>
После, аналогично в шаблоне подключите JS-скрипт перед закрывающим тегом </body>:
<script src="/js/reactions.js"></script>
6. Добавление CSS-стилей
Добавьте стили в шаблон «Таблица стилей (CSS)», чтобы блок с реакциями корректно отображался:
/* Контейнер блока отзывов */
#emotion-block {
margin: 20px auto;
padding: 20px;
text-align: center;
font-family: Arial, sans-serif;
border-radius: 16px;
background: #FAFAFA;
}
/* Заголовок и общий счётчик */
#emotion-block h3 {
margin-bottom: 5px;
font-size: 24px;
}
#emotion-block > div:first-of-type {
margin-bottom: 10px;
font-size: 16px;
color: #555;
}
/* Контейнер для списка эмоций */
.emoji-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
/* Каждый блок эмоции */
.emoji-item {
flex: 1 1 100px;
max-width: 120px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 16px;
transition: border 0.3s, background-color 0.3s;
padding: 10px;
transition: transform 0.3s ease-in-out, border 0.3s ease, background-color 0.3s ease;
}
/* Эффект масштабирования для всего блока при наведении */
.emoji-item:hover {
transform: scale(1.05);
}
/* Активное состояние блока */
.emoji-item.active {
border: 1px solid #507fff;
background-color: #f0f8ff;
}
/* При активном состоянии меняем цвет счетчика и подписи */
.emoji-item.active .count,
.emoji-item.active p {
color: #507fff;
}
/* При наведении на блок (если не активен) меняем цвет счетчика и подписи */
.emoji-item:hover:not(.active) .count,
.emoji-item:hover:not(.active) p {
color: #507fff;
}
/* Эмодзи */
.emoji {
font-size: 32px;
transition: opacity 0.3s, transform 0.3s;
}
/* Счётчик голосов под эмодзи */
.count {
font-weight: bold;
font-size: 18px;
color: #333;
}
/* Подпись к эмодзи */
.emoji-item p {
margin-top: 2px;
font-size: 14px;
color: #666;
}
/* Адаптивность: при маленьких экранах элементы растягиваются */
@media (max-width: 480px) {
.emoji-item {
flex: 1 1 80px;
max-width: 90px;
}
.emoji {
font-size: 35px;
}
}
/* Скрываем блок до загрузки, анимация появления */
.catalog-emotion-block {
opacity: 0;
transition: opacity 0.5s;
}
/* Располагаем эмодзи в ряд или как нужно */
.catalog-emoji-list {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
position: relative;
top: -2px;
}
/* Каждый эмодзи-блок */
.catalog-emoji-item {
display: flex;
align-items: center;
gap: 2px; /* расстояние между эмодзи и числом */
font-size: 1.2em;
}
/* Счётчик */
.catalog-count {
display: block;
margin-top: 4px;
font-size: 0.9em;
color: #6a6e7b;
}
/* Выделяем активный элемент, увеличивая эмодзи */
.catalog-emoji-item.active .catalog-emoji {
transform: scale(1.1);
}
FAQ: Тонкая настройка скрипта
1. В каких модулях поддерживается работа скрипта?
Файл config.php используется для указания тех модулей, в которых будет работать скрипт реакций. В нём содержится массив $modules, в который вы можете добавить нужные вам модули системы:
$modules = array("news", "stuff", "load", "board", "blog", "photo", "dir", "publ");
Скрипт автоматически создаст отдельную таблицу для каждого указанного модуля в базе emotions.sqlite и будет корректно работать с материалами этих модулей.
2. Как изменить количество эмодзи в блоке реакций?
Чтобы изменить количество эмодзи в блоке реакций (например, сделать 4 вместо 6), нужно внести небольшие изменения в три части скрипта: HTML, JavaScript и PHP.
Изменяем HTML-шаблон
В блоке .emoji-list оставляем нужное количество <div class="emoji-item">. Например, если нужно оставить только 4 реакции - удаляем лишние блоки.
Обновляем JavaScript
В файле script.js найдите участок с обновлением количества реакций:
for (let i = 1; i <= 6; i++) {
const countEl = document.getElementById(`count-${i}`);
if (countEl) {
countEl.textContent = (data.emotions && data.emotions[i]) ? data.emotions[i] : 0;
}
}
Замените число 6 на актуальное количество эмодзи, например 4:
for (let i = 1; i <= 4; i++) {
const countEl = document.getElementById(`count-${i}`);
if (countEl) {
countEl.textContent = (data.emotions && data.emotions[i]) ? data.emotions[i] : 0;
}
}
Правим PHP-обработчик
В handler.php также нужно изменить количество эмоций:
а) При создании новой записи:
$emotions = array();
for ($i = 1; $i <= 6; $i++) {
$emotions[$i] = 0;
}
Замените 6 на нужное число, например:
$emotions = array();
for ($i = 1; $i <= 4; $i++) {
$emotions[$i] = 0;
}
б) Проверьте, чтобы значение эмоции было в допустимом диапазоне:
if ($emotion < 1 || $emotion > 6)
die(json_encode(array("error" => "Invalid emotion")));
Замените 6 на 4:
if ($emotion < 1 || $emotion > 4)
die(json_encode(array("error" => "Invalid emotion")));
3. Как запретить реакции для гостей и разрешить только авторизованным пользователям?
Чтобы разрешить ставить реакции только авторизованным пользователям, нужно обернуть HTML-блок реакций в шаблоне "Страница материала и комментариев к нему" в следующее условие:
<?if($USER_LOGGED_IN$)?> код вашего блока <?endif?>