Виджет «Лента последних комментариев»
Виджет «Лента последних комментариев» — это решение, которое в автоматическом режиме подгружает и отображает последние пользовательские сообщения на странице без перезагрузки. Скрипт форматирует дату, показывает аватар и онлайн-статус автора, а при появлении новых записей воспроизводит звук. Всё это делает обсуждения на вашем сайте интерактивными и привлекает внимание посетителей к свежему контенту.
В этой инструкции вы узнаете, как интегрировать и настроить такой скрипт на вашем сайте, чтобы лента комментариев работала плавно, выглядела информативно и была максимально удобной для вашей аудитории.
Преимущества скрипта:
- Автоматическое обновление без перезагрузки: новые комментарии подгружаются по таймеру и сразу появляются в ленте, пока пользователь читает материалы или просматривает другие разделы сайта.
- Визуальное выделение по дате: скрипт автоматически окрашивает метки «Сегодня», «Вчера» и более старые даты в разные цвета — это облегчает восприятие и помогает сразу ориентироваться во времени публикаций.
- Настраиваемые звуковые оповещения: при желании в виджете можно включить звук для оповещений о новых комментариях — это удобно, если важно ничего не пропустить.
- Отображение онлайн-статуса: зелёный индикатор на аватаре автора показывает, что пользователь сейчас в сети. Это позволяет мгновенно определить активных участников обсуждения.
Пошаговая инструкция по установке скрипта
1. Активация API и создание приложения
Перейдите во вкладку «Настройки» → «Общие настройки» и включите опцию «Разрешить использование API». Кроме это, необходимо активировать опцию «Использовать API key»:
Затем откройте страницу регистрации приложения по адресу: https://api.ucoz.net/ru/join/reg
Выберите способ «Полуавтоматом», следуйте инструкции и сохраните выданные ключи и токены для дальнейшей работы в PHP-скрипте:
2. Настройка доступа к PHP
Перейдите на главную страницу панели управления сайтом и откройте раздел «PHP-скрипты». Здесь будут указаны данные для подключения. Если пароль ещё не задан — установите его.
Скачайте FTP-клиент. Мы рекомендуем FileZilla. После установки откройте программу и введите параметры подключения:
- Сервер: s2001.ucoz.net
- Логин: ваш логин из раздела «PHP детали»
- Пароль: заданный вами ранее
Нажмите кнопку «Быстрое соединение» для подключения к серверу.
3. Подготовка и загрузка PHP-скрипта на сервер
3.1 Загрузка скрипта в папку scripts
После подключения перейдите в каталог scripts — дважды кликните по папке в правой панели FileZilla. Затем загрузите в неё папку comments из скачанного архива.
Проще всего загрузить папку, просто перетащив её в правую часть окна FileZilla.
3.2 Настройка файла uAPIModule.php
Откройте файл uAPIModule.php в любом текстовом редакторе и найдите строку:
$myWebsite = 'https://lastcomments.ucoz.net/';
Замените URL на адрес вашего сайта, например:
$myWebsite = 'https://example.com/';
3.3 Заполнение ключей в comments.php
Откройте comments.php и найдите блок инициализации OAuth-запроса:
$request = new Request(array( 'oauth_consumer_key' => '', 'oauth_consumer_secret' => '', 'oauth_token' => '', 'oauth_token_secret' => '' ));
Заполните соответствующими значениями: Consumer Key, Consumer Secret, OAuth Token и OAuth Token Secret, которые вы получили при создании приложения.
4. Загрузка и установка JS-скрипта
Загрузите файл lastcomments.js в папку js через Файловый менеджер. Этот скрипт отвечает за отображение комментариев и их обновление.
Затем откройте вкладку «Дизайн» → «Управление дизайном (шаблоны)» → «Нижняя часть сайта» и вставьте подключение скрипта:
<script src='/js/lastcomments.js'></script>
5. Добавление HTML-кода в «Первый контейнер»
Для вывода блока «Лента последних комментариев» откройте: Дизайн → Управление дизайном (шаблоны) → Первый контейнер и вставьте следующий HTML-код:
<!-- Последние комментарии --> <div class="sidebar-block"> <div class="inner"> <h3 class="sidebar-block-title"> Лента последних комментариев <!-- кнопка уведомлений --> <button id="toggle-sound" class="btn-sound" aria-label="Включить уведомления" title="Включить уведомления"> <!-- по умолчанию «выключено» --> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icon-tabler-bell-off"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M9.346 5.353c.21-.129.428-.246.654-.353a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3m-1 3h-13a4 4 0 0 0 2-3v-3a6.996 6.996 0 0 1 1.273-3.707"/> <path d="M9 17v1a3 3 0 0 0 6 0v-1"/> <path d="M3 3l18 18"/> </svg> </button> </h3> <div class="sidebar-block-content"> <div id="comments-container"></div> <div class="wait-loader"></div> </div> </div> </div> <!-- Шаблон одного комментария --> <template id="comment-template"> <div class="comment"> <!-- header: аватар, автор и дата --> <div class="comment-header"> <div class="avatar-container"> <img class="comment-avatar" src="" alt="avatar" /> <!-- Кружок онлайн --> <div class="online-circle"></div> </div> <a class="comment-author" href="" target="_blank"></a> <time class="comment-date"></time> </div> <!-- тело комментария --> <div class="comment-body"></div> <!-- футер: ссылка на материал с иконкой --> <div class="comment-footer"> <a class="comment-material" href="" target="_blank"> <!-- SVG-иконка ссылки --> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-link" style="vertical-align:middle;"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M9 15l6 -6" /> <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /> <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /> </svg> <span class="comment-material-text"></span> </a> </div> </div> </template>
6. Добавление CSS-стилей
Чтобы блок корректно отображался, добавьте следующий CSS-код в шаблон «Таблица стилей (CSS)»:
/* Плавное появление контейнера комментариев */
#comments-container {
max-height: 300px;
overflow-y: auto;
padding-right: 4px;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.5s ease, transform 0.5s ease;
scrollbar-width: thin;
}
/* Прелоадер */
#comments-container:not(:empty) + .wait-loader { display: none}
/* Класс для запуска анимации появления */
#comments-container.visible {
opacity: 1;
transform: translateY(0);
}
/* Стили тонкого скролла для WebKit браузеров */
#comments-container::-webkit-scrollbar {
width: 4px;
}
#comments-container::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
#comments-container::-webkit-scrollbar-track {
background: transparent;
}
/* Стили даты комментария */
.comment-date {
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.85em;
margin-left: auto;
}
.comment-date.today {
background: #27ae6033;
color: #27ae60;
font-weight: 600;
}
.comment-date.yesterday {
background: #507fff33;
color: #507fff;
font-weight: 600;
}
.comment-date.older {
background: #80808033;
color: #808080;
font-weight: 600;
}
/* Основные стили комментариев */
.comment {
margin-bottom: 5px;
padding: 8px 0;
border-bottom: 1px solid #ddd;
}
.comment-header {
display: flex;
align-items: center;
}
.comment-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
margin-right: 5px;
}
.comment-author {
font-weight: bold;
color: #007bff;
text-decoration: none;
}
/* Стиль для гостей без аккаунта */
.comment-author.guest {
color: #333;
}
.comment-body {
margin: 10px 0;
white-space: pre-wrap;
font-size: 1em;
}
.comment-footer {
text-align: left;
}
.comment-material {
font-size: 1em;
text-decoration: none;
color: #007bff;
}
/* Аватар по умолчанию и индикатор онлайн */
.avatar-container {
position: relative;
display: inline-block;
}
.comment-avatar.default-avatar {
background: #dddde1;
display: flex;
align-items: center;
justify-content: center;
}
.online-circle {
position: absolute;
bottom: 5px;
right: 5px;
width: 10px;
height: 10px;
background-color: #27ae60;
border: 2px solid white;
border-radius: 50%;
display: none;
}
/* Блоки боковой панели и звуковая кнопка */
.sidebar-block-title {
display: flex;
align-items: center;
justify-content: space-between;
}
.btn-sound {
background: none;
border: none;
padding: 4px;
cursor: pointer;
}
.btn-sound .icon-tabler {
stroke: #6a6e7b;
}
/* Состояние включенного звука */
.btn-sound.enabled .icon-tabler {
stroke: #507fff;
}
После добавления стилей рекомендуется очистить кэш браузера и проверить отображение всех элементов.
FAQ: Тонкая настройка скрипта
1. Можно ли выводить комментарии определённого модуля?
Да. Достаточно заменить путь запроса в PHP-скрипте с общего эндпоинта /all_comments на путь конкретного модуля, например /blog/all_comments:
// Было
$raw = $request->get('/all_comments', array(
'per_page' => $per_page * 5,
'tree' => 'no'
));
// Стало
$raw = $request->get('/blog/all_comments', array(
'per_page' => $per_page * 5,
'tree' => 'no'
));
Теперь будут выводиться только комментарии из модуля «Блог».
2. Как изменить количество последних комментариев?
В начале JS-скрипта найдите строку с параметром desiredCount и укажите нужное значение:
const desiredCount = 20; // вместо 10 теперь будет 20
Скрипт начнёт запрашивать и отображать больше комментариев.
3. Как убрать звуковые уведомления?
В файле lastcomments.js найдите объект config и измените значение:
const config = {
soundEnabled: 0, /* Отключить звуковые уведомления */
showOnlineStatus: 1
};
После этого звуковое оповещение будет отключено, а кнопка уведомлений скрыта.
4. Как загрузить свой звук уведомления?
В том же объекте config добавьте или замените путь к аудиофайлу:
const config = {
soundSrc: '/sounds/my-notify.mp3' // ← здесь ваш путь
};
5. Как отключить отображение статуса «онлайн»?
Также через объект config установите следующее значение:
const config = {
soundEnabled: 1,
showOnlineStatus: 0 /* Отключить индикатор онлайн-статуса */
};
Индикатор «в сети» на аватарках пользователей исчезнет.
6. Как изменить частоту обновления комментариев?
Измените интервал в миллисекундах в вызове setInterval в JS-файле:
// по умолчанию каждые 60 000 мс (60 секунд) setInterval(() => loadComments(false), 60000);
Также настройте кэш в PHP-скрипте, если нужно увеличить частоту запроса к серверу:
// срок хранения кэша в секундах $cacheTtl = 60; // заменить на нужный интервал, например 300 (5 минут)