Disqus остаётся одним из самых популярных сервисов для комментариев, но его стандартные виджеты давно выглядят устаревшими, а некоторые перестали корректно работать. Чтобы получить современный, аккуратный и полностью управляемый виджет последних комментариев, можно использовать Disqus API и создать своё решение с нуля. Такой подход позволяет:
- отображать комментарии в нужном стиле
- интегрировать их в Bootstrap
- отфильтровать нужное количество
- показывать аватарки, авторов и ссылки
- обеспечить fallback, если API недоступен
- адаптировать под тёмную тему
Ниже приведена детальная, пошаговая, максимально полная инструкция — от получения ключа до финального рабочего результата.
Введение
Стандартный виджет Disqus recent_comments_widget.js долгое время служил хорошим решением, но перестал соответствовать современным требованиям. Он ограничен в кастомизации, несовместим с адаптивной сеткой, имеет устаревшую вёрстку и не позволяет тонко управлять содержимым.
Использование Disqus API открывает доступ к структурированным данным — списку последних комментариев, включая имена авторов, аватары, текст комментариев, время, ссылки на записи и идентификаторы. На основе API можно создать собственный виджет, идеально вписывающийся в дизайн сайта.
Для примера рассматривается сайт на uCoz, адаптированный Bootstrap 5, но метод подходит для любого движка.
Шаг 1. Создание приложения Disqus и получение API-ключа
Чтобы пользоваться Disqus API, требуется публичный ключ (Public API Key). Его можно получить в разделе приложений Disqus.
1. Открытие страницы приложений
Переход:
https://disqus.com/api/applications/
Необходимо быть авторизованным под тем аккаунтом Disqus, где настроен ваш сайт (форум / shortname).
2. Создание нового приложения
Нажимается кнопка Register new application.
Заполняются основные поля:
- Application Name: произвольное название, например Recent Comments Widget
- Website: адрес вашего сайта
- Organization: можно оставить пустым
- Callback URL: не требуется
После сохранения открывается страница приложения.
3. Получение ключей
На странице приложения находятся три важные параметра:
- API Key (Public Key) — то, что будет использоваться в JS
- API Secret — НЕ нужен, хранится только в секрете
- Access Token — не используется в публичных виджетах
Для нашего виджета нужен только Public API Key.
Шаг 2. Указание разрешённых доменов
Disqus требует явно указать домены, с которых разрешается отправлять API-запросы.
В настройках приложения находится раздел:
Allowed Domains
Туда нужно добавить все домены сайта:
mybloga.com www.mybloga.com linux.mybloga.com ucozcode.com www.ucozcode.com
Если домен не указан → API может вернуть ошибку:
400 Bad Request Invalid domain
После добавления доменов изменения вступают в силу сразу.
Шаг 3. Проверка API вручную
Перед созданием виджета можно проверить работу API.
Открывается в браузере:
https://disqus.com/api/3.0/forums/listPosts.json?forum=SHORTNAME&limit=5&order=desc&related=thread&api_key=API_KEY
Где:
- SHORTNAME — ваш Disqus форум, например:
mybloga-com - API_KEY — ваш Public API Key
Если всё хорошо — откроется JSON со списком комментариев.
Если ошибка — проверяются домены, shortname и ключ.
Шаг 4. Создание каркаса Bootstrap для виджета
Виджет оформляется с помощью Bootstrap-карточки. Внутри находится два блока:
- Новый виджет Disqus
- Старый информер uCoz ($MYINF_11$) — fallback
Если API работает → выводится Disqus
Если API не работает → показывается старый информер
HTML-каркас
<div class="card mb-4 shadow-sm"> <div class="card-header fw-bold"> Последние комментарии </div> <!-- Новый Disqus-виджет --> <div id="disqus-comments-widget" class="list-group list-group-flush" style="display:none;"> <div id="recent-disqus-comments"> <div id="recent-disqus-loading" class="p-3 text-center text-muted"> Загрузка... </div> </div> </div> <!-- Старый информер uCoz --> <div id="old-comments-widget"> $MYINF_11$ </div> </div>
Такой подход гарантирует, что сайт не останется пустым, если Disqus недоступен.
Шаг 5. Подключение JavaScript для вывода комментариев
Этот скрипт:
- отправляет запрос к Disqus
- получает последние комментарии
- выводит их в виде списка Bootstrap
- скрывает старый информер
- убирает текст «Загрузка…»
- показывает аватар, автора, текст комментария и ссылку
Полный рабочий код
<script>
(function() {
const forum = 'mybloga-com'; // Ваш Disqus shortname
const apiKey = 'ВАШ_API_KEY'; // Ваш Public API Key
const limit = 10; // Количество комментариев
const oldBlock = document.getElementById('old-comments-widget');
const newBlock = document.getElementById('disqus-comments-widget');
const container = document.getElementById('recent-disqus-comments');
const loadingEl = document.getElementById('recent-disqus-loading');
function cleanHTML(str) {
return str.replace(/<\/?[^>]+>/g, '');
}
function shorten(str, max = 120) {
if (!str) return '';
if (str.length <= max) return str;
return str.substring(0, max) + '…';
}
window.handleDisqusRecent = function(data) {
if (!data || !data.response || !data.response.length) {
return;
}
let html = '';
data.response.forEach(function(post) {
const author = post.author?.name || 'Гость';
const avatar = post.author?.avatar?.permalink || '';
const message = shorten(cleanHTML(post.message || ''), 120);
const threadLink = post.thread?.link || '#';
const commentLink = threadLink + '#comment-' + post.id;
html += `
<a href="${commentLink}" class="list-group-item list-group-item-action d-flex gap-3 py-3">
${avatar ? `<img src="${avatar}" class="rounded-circle flex-shrink-0" width="40" height="40" loading="lazy" alt="${author}">` : ''}
<div class="d-flex flex-column">
<strong class="mb-1">${author}</strong>
<span class="text-muted small">${message}</span>
</div>
</a>
`;
});
if (loadingEl) loadingEl.remove();
container.innerHTML = html;
oldBlock.style.display = 'none';
newBlock.style.display = 'block';
};
const s = document.createElement('script');
s.src =
'https://disqus.com/api/3.0/forums/listPosts.jsonp'
+ '?forum=' + encodeURIComponent(forum)
+ '&limit=' + encodeURIComponent(limit)
+ '&order=desc'
+ '&related=thread'
+ '&api_key=' + encodeURIComponent(apiKey)
+ '&callback=handleDisqusRecent';
document.body.appendChild(s);
})();
</script>
Шаг 6. Поддержка темной темы
При использовании data-bs-theme="dark" карточка и элементы списка адаптируются автоматически, но при желании можно добавить усиленные стили:
<style>
html[data-bs-theme="dark"] .card {
background-color: #2a2a3a;
color: #e0e0e5;
}
html[data-bs-theme="dark"] .list-group-item {
background-color: #2a2a3a;
border-color: #3a3a4a;
}
</style>
Шаг 7. Резервный вывод комментариев через $MYINF_11$
Если API Disqus вернул пустой ответ или сервер временно недоступен:
- блок Disqus не показывается
- автоматически показывается старый информер uCoz
Такой подход защищает сайт от ситуаций, когда Disqus недоступен.
Заключение
Создание собственного виджета последних комментариев Disqus через API — это современный и гибкий подход, который полностью заменяет устаревшие встроенные виджеты Disqus. Использование API даёт возможность:
- оформлять вывод комментариев под дизайн сайта
- использовать Bootstrap 5
- выводить аватарки, авторов, текст и ссылки
- адаптировать виджет под тёмную тему
- корректно обрабатывать ошибки и сохранять fallback
- размещать виджет в любой части сайта
Готовый код полностью автономен, прост в установке и работает одинаково хорошо на любых платформах, включая uCoz.
Оцените полезность материала!
Лицензия: CC BY-SA 4.0
Автор: Юрий Герук
Комментарии