Использование DISQUS для социального комментирования на WordPress-сайте

Дата публикации:Январь 8, 2014

Сервис DISQUS поддерживает системы комментирования на многих блогах, включая некоторые топовые. DISQUS обладает широким диапазоном преимуществ, среди которых улучшенная защита от спама и облегчение пользовательской задачи комментирования путем входа посредством одного универсального логина, который может использоваться на всех сайтах, где установлен сервис DISQUS. Сегодня мы посмотрим на все преимущества и недостатки DISQUS, изучим, как использовать этот сервис в WordPress (спойлер: очень просто), а также выполним некоторую базовую настройку CSS-стилей.

За и против использования DISQUS

В то время как альтернативные системы комментирования (к примеру, Facebook) работают с определенными типами блогов, DISQUS может использоваться практически повсеместно на разных блогах. В целом сервис используется по большей части сайтами традиционного формата, однако он поддерживает набор полезных преимуществ, которые делают его удачным решением для любого сайта.

Определенно, самый импонирующий мне факт, касающийся DISQUS – все, что требуется обработать, происходит на стороннем сервере. Это определенный плюс как для безопасности, так и для избавления от спама, поскольку сторонние сервисы, такие как DISQUS, зачастую предлагают улучшенные средства защиты от спама. Сервис DISQUS использует Akismet, таким образом, прослеживается определенная схожесть с регулярными комментариями WordPress, однако с меньшим процентом спама.

DISQUS отличается хорошей интеграцией. Использование DISQUS — это добавление вашего сайта к сообществу, в котором все пользуются общей системой комментирования. Мой сайт использует данную систему комментирования, а это означает, что у меня есть отдельный аккаунт для постинга и модерирования комментариев, постинга на MacStories, Cult of Mac и всех остальных сайтах с сервисом DISQUS. Это очень удобно для меня как пользователя, поскольку я могу хранить свои идентификационные данные, не создавая миллион аккаунтов для обслуживания каждого сайта.

disqus_full

Говоря про интеграцию, также можно отметить, что DISQUS является хорошо настраиваемым сервисом. В основном DISQUS прекрасно смотрится и по умолчанию, однако вы всегда можете подобрать для себя любой подходящий шаблон, управлять им с помощью CSS-стилей или приобрести платный шаблон. Мы изучим настройку шаблона чуть позже в данной статье.

Несмотря на такой солидный багаж преимуществ, сервис, к сожалению, также имеет и ряд доводов против своего использования. Справедливости ради коснемся и их, чтобы вы могли принять обдуманное решение, стоит или нет использовать DISQUS.

Главная проблема сторонних сервисов – поисковая оптимизация. Поисковые системы обычно не слишком хорошо считывают DISQUS, в результате чего некоторые страницы, на которые ведут ссылки, не будут посещены. Есть некоторые пути исправить данную проблему, однако все они по определению в разы сложнее, нежели использование простых комментариев.

Кроме того, если DISQUS утратит свою работоспособность, то основная часть вашего сайта перестанет функционировать, что может иметь катастрофические последствия для вашего ресурса. Тем не менее, я обычно всегда рекомендую использовать DISQUS для большинства пользователей, так что давайте приступим к его установке.

Установка DISQUS

Я не думаю, что нужно объяснять аудитории, как установить плагин. Лучший способ установить DISQUS заключается в том, чтобы использовать плагин, поскольку это заметно упрощает процесс установки, делая его быстрым и гладким. Когда вы обращаетесь к плагину, DISQUS меняет функцию comments_template() на поток DISQUS. Таким образом, везде, где у вас обычно подключаются комментарии WordPress, они будут заменены на систему комментирования DISQUS. Это очень просто.

Плагин – это, вне всяких сомнений, самый гладкий способ интеграции DISQUS. Однако если вы хотите, вы можете использовать универсальный код, который позволит встроить сервис, хотя такой подход не рекомендуется, и я не стану его рассматривать, чтобы сохранить руководство максимально простым.

До тех пор пока вы не отключите плагин, сервис DISQUS будет синхронизироваться с WordPress (универсальный код не будет работать). Это означает, что комментарии будут сохраняться как в WordPress, так и в DISQUS, предлагая вам запасной выход на тот случай, если вдруг DISQUS умрет в какой-то момент времени.

Настройка

Естественно, DISQUS предлагает некоторые опции, которые вы можете устанавливать. Есть несколько опций, касающихся плагина, однако они обычно затрагивают процесс синхронизации и устранение проблем.

Кроме того в каждом аккаунте DISQUS существуют отдельные опции, которые вы можете задавать для управления функциональностью вашей сборки. Они очень простые и обычно вращаются вокруг ограничения определенных возможностей, таких как применение медиа-вложений, задание базовых требований для комментирования и т.д.

К счастью, все эти опции обрабатываются на сайте DISQUS и не требуют от нас никакого дополнительного кодирования, таким образом, мне не нужно акцентировать свое внимание на этом.

Счетчик комментариев

Вывод счетчика комментариев может оказаться достаточно хитрым действием. В большинстве случаев DISQUS займет место функции comments_number(), и будет прекрасно работать. Однако в некоторых ситуациях этого не происходит, и в таком случае ваше первое действие – это выбор опции «вывод Javascript в футере», которая находится в разделе Advanced Options настроек плагина.

DISQUS в действии

На скриншоте приведен сервис DISQUS, установленный в виде плагина на WordPress-сайте. Это была обычная установка через страницу опций DISQUS без дополнительной стилизации.

disqusunstyled

Если мы бросим беглый взгляд на DISQUS, то мы можем заметить, что сервис имеет пять основных разделов: кнопки, форма комментариев, поток комментариев, ссылки и ответы. Мы можем управлять каждым из этих элементов, используя страницу настроек DISQUS и применяя перезапись CSS-стилей. Чтобы не ходить вокруг да около, давайте посмотрим, как можно это легко сделать.

Стилизация DISQUS

Мы раскрыли все за и против использования DISQUS, коротко взглянули на его установку и работу с WordPress. Давайте теперь пойдем дальше и посмотрим, как мы можем стилизовать DISQUS, чтобы он отвечал нашей теме.

Сам DISQUS может иметь несколько видов, он поставляется с двумя дефолтными темами: Houdini и Narcissus. Они идут в бесплатном тарифе. Если вы готовы заплатить за DISQUS ($299 или $999 в месяц), вы получите также усовершенствованный редактор тем. Однако поскольку это не самый популярный выбор, мы не будем его рассматривать в данной статье. Если вы решите использовать редактор тем для DISQUS, то вы найдете его невероятно простым, во многом подобным созданию тем для Tumblr.

Вместо всего этого мы посмотрим на то, как стилизовать регулярную сборку DISQUS, используя стандартную тему Houdini с некоторой стилизацией, которая будет легко помещена в вашу таблицу стилей.

Определение классов

Чтобы создать стилизацию для DISQUS, нам нужно определить CSS-классы, входящие в систему комментирования.

  • #dsq-content – контейнер, в котором происходит встраивание DISQUS. Любые стили, применяемые к этому контейнеру, будут применяться повсюду в DISQUS.
  • .dsq-comment-header – хэдер комментария, где выводится имя комментатора.
  • .dsq-comment-message – текст комментария. Любые стили, добавленные к этому классу, будут применяться только к самим комментариям.
  • #dsq-content h3 – стилизация заголовков в DISQUS, которые используются, к примеру, для обозначения числа комментариев.
  • #dsq-global-toolbar – стилизует глобальную панель инструментов, строку кнопок, которая находится над полем комментирования.

Стилизация текста

Возможно, единственное, что вам захочется изменить – это размер текста и его цвет, чтобы он лучше вписывался в тему. Это может быть достигнуто путем стилизации контейнера, в котором встраивается DISQUS.

#dsq-content {  
    color: #333333 !important;  
    font-size: 1em !important;  
} 

style_text

Данные стили изменят текст во всех местах, где был встроен DISQUS. Естественно, вы можете применить дополнительные стили к dsq-content, чтобы они отвечали вашей теме.

В качестве альтернативного подхода вы можете стилизовать определенные части текста, такие как информация о комментаторах или заголовки. В большинстве тем нам, возможно, понадобится применять общие стили для заголовков в контенте и заголовков в комментариях. Это можно сделать, просто изменив класс.

#dsq-content h3 {  
    color: #666666 !important;  
    font-size: 1.2em !important;  
}  

Скрытие элементов

Бывают ситуации, когда нам нужно отключить некоторые части DISQUS. На моем сайте я предпочитаю скрывать заголовки, чтобы комментарии выглядели более чисто. Достигнуть этого можно путем задания стилей для display в none.

#dsq-content h3 {  
    display: none;  
}  

style_hiding

DISQUS может оказаться мощным дополнением к вашему блогу, обеспечивающим многочисленные преимущества как для блоггеров, так и для пользователей. Проблемы, которые иногда возникают, можно решить, воспользовавшись опциями в разделе Advanced Options, что обеспечит гладкий опыт комментирования. Плюс простота добавления стилей поможет быстро настроить DISQUS под свой сайт.

Источник: wp.tutsplus.com

Поделиться

24 комментария

  1. Дискус не поддерживает вконтакт и одноклассников. Это минус. Но есть альтернативы дискусу.

  2. Данный блог на движке WP тоже не поддерживает ни вконтакт, ни одноклассников, на нем нет даже никакого дискуса, что не мешает ему получать комментарии от всех желающих.

    Как говорится: не плоди сущностей без необходимости. Дискус — одна из таких лишних сущностей.

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

  3. На одном сайте у меня долгое время была стандартная вп форма комментирования. Комментарии были — один в полгода. Ради эксперимента поставил от вконтакта — посыпались комментарии.
    Пользователь ленив.
    И даже тут могло быть больше комментариев. Плюс виджета комментариев от вконтакта — в ленте пользователя друзья комментатора увидят его комментарий. Это полезно для продвижения.

    Но отдельные комментарии (виджеты) из соцсетей смотрятся как третья нога на сайте.

    • Architect Of Ruin says:

      Пользователи вообще не слишком охотно комментируют материалы, поэтому, я считаю, не стоит их лишний раз запутывать разными сложными системами авторизации.

      Привычная всем форма комментирования существует уже давно, еще до того, как появился контакт, так что многим удобно оставлять комментарии именно так — проверенным способом, который отложился у них в подкорке.

      Дискус меня самого отпугивает от комментирования, я не хочу разбираться, куда там щелкать, как там авторизовываться, да и стоит он не на всех сайтах. Что может быть проще, чем ввести почту, свой ник и комментарий в обычную форму?

      А для пользователей вк есть группа, где они могут комментировать при желании те же самые материалы, поскольку туда идет репост.

  4. Otshelnik-fm, так коменты оставленные через форму от вконтакта на вконтакте и хранятся, не? Т.е. на блоге то их нет формально и не индексируются вроде.

    Architect Of Ruin, мне тоже кажется — что такого сложного: ввести имя и коммент? Я бы вообще оставил обязательным только поле для комментов, остальные оставив на волю пользователей, кому лень заполнять разные поля. И всё, пиши без проблем хоть откуда ты, хоть с вконтакта, хоть с северного полюса.

  5. Меня тоже DISQUS отпугивает от комментирования. Бывает что после прочтения статьи действительно хочется что-то сказать, оставить комментарий, спускаешься к блоку с комментариями, видишь DISQUS и… «нет уж, лучше я пройду мимо».

    Если еще и поисковые машины плохо индексируют текст из таких комментариев — то от этой системы комментирования больше вреда, чем пользы. Ведь качественные комментарии — это уникальный контент.

    К тому же сам DISQUS, как мне показалось, достаточно тяжел, он замедляет загрузку блогов.

  6. Да, он тяжеловат, некрасив и неудобен. Кроме того его блокирует популярное расширение для браузеров Ghostery (типа adblock, но оно блокирует разные коды отслеживания, собирающие статистику, разные социальные кнопочки на сайтах, тоже замедляющие загрузку и т.д.).

  7. Волшебник — хранятся в вк конечно же. Польза виджета есть — друзья комментатора если и не присоединяются к коментариям, то видят что их друг что-то комментировал. Это + к трафику.

    Владимир — вас бесит дискус почему именно? Меня вот не остановило, да и вас тоже, зарегаться в системе граватара :) Уж почему для дискуса всё так плохо?

    Architect Of Ruin — это всё оттого что пользователь живет каждый в своей социалке. Из этой песочницы они ни вырастать, ни выходить не хотят. Были же времена гостевых книг — и все комментировали там.

    А сейчас лень.

    • Architect Of Ruin says:

      Гостевая книга — штука несколько иного рода, чем комментарии к материалам. Это скорее аналог комментариев к странице «о себе» или «о сайте», поэтому их не стоит смешивать с простыми комментариями. В гостевой книге никогда бы не стали писать комментарии с вопросами по тому или иному контенту — обычный отзыв, понравился сайт, не понравился и т.д.

      У граватаров уже была интеграция с WordPress на тот момент, когда я знакомился с системой, потому было бы глупо обходить их вниманием. DISQUS пока такой интеграции не имеет, но, возможно, что к этому все и движется.

      Удобство того же контакта, к слову, имеется — к примеру, некоторые тематические группы узкой направленности. Или некоторые магазины, у которых нет своих сайтов. Либо события, как, к примеру, разные музыкальные встречи, которые тоже никак практически не освещаются сайтами. При умелом использовании можно извлечь для себя очень даже неплохую выгоду — либо просто убивать время, листая бесполезные паблики с кучей информационного шума. Школяры обычно выбирают второе.

  8. Otshelnik-fm было б здорово сделать так, чтобы:

    — коменты можно было с легкостью оставлять как тем у кого есть контакт, так и тем у кого его нет
    — коменты вконтакта хранились на страницах сайта

  9. Otshelnik-fm, даже не знаю почему. Он меня просто отталкивает =) Возможно от того, что я не однократно наблюдал как он медленно подгружается после загрузки страницы, плюс всплывающие окна вроде есть при наведении мышкой на профиль комментирующего, отталкивает это все =)

  10. Установил, побаловался и вернулся к обычной системе комментирования. Очень заманчиво использовать сторонний сервис, но для меня минусы пока перевесили плюсы. Пока наблюдаю за развитием Disqus.. :)

  11. Крутая форма, лучше чем Cackle

  12. Подскажите пожалуйста а нет ли у вас информации о SSO Disquse. Пытался разобраться сам, но что то наверно не недопонимаю.

    • Дмитрий says:

      Нет, с SSO, к сожалению, ничем подсказать не смогу, поскольку не сталкивался с информацией по этой теме.

  13. Добрый день! Подскажите в этом плагине можно оставлять комментарии через аккаунт гугл и мне потом как админу безпрепядственно отслеживать?
    А то у меня есть самостоятельный плагин для гугла, но комментарии я не вижу, а все статьи пересматривать очень-очень неудобно.

  14. Привет, мое мнение о дискусе отрицательное. Поставил по совету друга, говорил мол трафик увеличивает данная форма, трафика за пару месяцев так и не увеличило, а вот комментарий не стало.

    • Дмитрий says:

      Disqus удобен только тем, что все уведомления об ответах на разных сайтах можно получать централизованно в одном месте, однако как форма он скорее неудобен, потому что для него нужно регистрироваться, да и грузится он не слишком быстро. Часто можно видеть на разных сайтах, как комментарии до сих пор не загрузились и висит крутящаяся иконка Дискуса.

  15. KostYa says:

    Подскажите пжлста, как можно поменять оформление тех или иных элементов дискус сейчас? Все что прописываю в таблице стилей не работает (кроме настроек #disqus_thread)

  16. Zonecash says:

    Не понимал, не понимаю и не пойму, для чего использовать сторонние системы комментариев на тех CMS где есть свои компоненты для этого.

  17. Так обдумал эту идею и нашел для себя оптимальный выход. Прикрутить социальную авторизацию к комментариям. По моему, самое удачное решение.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.