Как создать современный виджет последних комментариев Disqus через API

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-карточки. Внутри находится два блока:

1. Новый виджет Disqus
2. Старый информер 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.