Как внедрить систему комментариев Disqus в AngularJS приложение

Disqus - это простой, удобный и бесплатный сервис, который позволяет добавить возможность комментирования и обсуждения на страницы вашего сайта. В данном блоге используется этот сервис. Также его я решил внедрить и в свой проект, написанный на AngularJS. Однако простого руководства я не нашел, а при добавлении сторонних решений столкнулся с некоторыми трудностями. Об этом и попробую рассказать в данной статье.

Поиск готовых решений

Гуглим. Находим несколько проектов на гитхабе. Некоторые отметаем из-за срока давности, некоторые из-за малого количества звезд. В итоге я остановился вот на этом решении. Инструкция по применению выглядит просто. Код тоже весьма лаконичен и представляет собой AngularJS директиву, которую в нужном месте требуется добавить в шаблон. В контроллере прописать пару строк конфига и все. Поехали!

Установка

1. Скачиваем файл dirDisqus.js,

• либо bower install angular-utils-disqus,

• либо npm install angular-utils-disqus

2. Добавляем этот файл в index.html:

    <script src="modules/components/dirDisqus.js"></script>
   

3. Добавляем директиву angularUtils.directives.dirDisqus в список зависимостей приложения:

    angular.module('app', [
        ...
        'angularUtils.directives.dirDisqus',
    ])
   

Использование

В шаблоне страницы, там, где должен находиться блок с комментариями, нужно вставить директиву:

 <dir-disqus config="disqusConfig"></dir-disqus>

А в соответствующем контроллере:

$scope.disqusConfig = {
    disqus_shortname: 'Ваше Disqus shortname',
    disqus_identifier: 'Идентификатор комментариев',
    disqus_url: 'url страниц с комментариями',
    disqus_title: 'Заголовок страницы'
};

На сайте Disqus добавляйте свой сайт. По адресу https://ВАШ_САЙТ.disqus.com/admin/settings/general/ в настройках смотрите ваш shortname.

Идентификатор комментариев - это строка, которая должна быть уникальна для данного трэда комментов. Хорошим вариантом будет, например, строка '/december-2010/the-best-day-of-my-life/'.

В качестве url используется полный адрес страницы, на которой располагается трэд: 'http://example.com/helloworld.html'.

Проблемы

Блок комментариев появился на странице и работает. Но в консоли выводится ошибка:

TypeError: Cannot read property 'disqus_shortname' of undefined

и ссылается на строки

if (!scope.config.disqus_shortname ||
    !scope.config.disqus_identifier ||
    !scope.config.disqus_url) {
    return;
}

Pull request на фикс этой ошибки висит уже 8 месяцев, так что, видимо, автор забил. Поэтому ручками. Добавляем перед этими строками условие:

if (typeof scope.config === 'undefined'){
    return;
}

Для ленивых коммит фикса.

Теперь все работает. Почти...

Еще обнаружил, что Prerender, который скармливает поисковым ботам снэпшоты страниц сайта, не отрендеривает блок комментариев. То ли Disqus не успевает загрузиться до момента снимка, то ли это из-за iframe и отсутствия скриптов в снэпшоте. Если важна индексация, и используется данный сервис, то на это нужно обратить внимание. А если найдете решение проблемы, то обязательно поделитесь со мной в комментариях.