Disqus — удобная форма комментариев для сайта

Меня тут «зарядили» пост написать о форме добавления комментариев установленной на pervushin.com. Думал паимаишь на диване поваляться, а после таких комментариев разве можно без толку лежать? «Нет!» — сказал я себе и пролежням моим, выпрыгнул из под одеяла и за ноутбук :).

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

Disqus - удобная форма комментариев для сайта

Под постом Вас ждет жирный бонус и сладкое, приятного «аппетита».

Сначала давайте разберемся в чем преимущества этой системы перед стандартной формой комментариев. Плюсы:

1. Удобная авторизация. Оставить на сайте комментарий можно не только как «гость» с простым указанием имени, сайта и email, но и как зарегистрированный пользователь одной из поддерживаемых систем: disqus, facebook, twitter, openid, yahoo.

2. Удобные древовидные комментарии. Уровень вложений можно регулировать, у меня стоит до 5.

3. AJAX. Никакой перезагрузки страниц. Добавление комментариев, нажатие кнопки «Нравится» и т.д. происходит на лету.

4. Никаких потерь комментариев. В сети бытует мнение (где-то видел), что все комментарии уходят на сервер disqus и дескать если что, то все потеряется, это не так! Все комментарии остаются на месте, т.е. в Вашей базе на Вашем сервере. Дискус просто синхронизируется с основной базой и копирует их себе.

5. Назначение прав пользователей. Пример: какой-то пользователь, Ваш знакомый, написал для Вашего блога гостевой пост, Вы в дискус назначаете его модератором этого поста и пусть он сам «расхлебывает» все поступающие комментарии :).

6. Симпатичный внешний вид. Я бы даже сказал очень симпатичный, на любом сайте эта форма смотрится куда лучше, чем «родная», стандартная.

7. Управление коментариями по e-mail. Да-да, это не просто очередная функция, это классная фишка! Вот приходит Вам сообщение, что кто-то оставил комментарий, а Вы ему в ответ пишете: approve — разрешить; spam — отправить в спам; delete — удалить; а если напишите просто сообщение, оно станет Вашим ответом на этот комментарий.

8. Единый админ-центр для всех Ваших комментариев и сайтов. У Вас несколько сайтов? Поставив дискус на них, Вам не придется бегать из одного админ-центра Вашего сайта в другой, все комментарии в одном месте.

Ну что, решились? Давайте ставить.

Установка и настройка disqus

Идем на disqus.com и регистрируемся, для этого жамкаем большую зеленую кнопку:

Регистрация на disqus

Перед нами несколько полей для заполнения:

Регистрация на disqus.com

Подробнее:

  • Site URL — адрес Вашего сайта (блога)
  • Site Name — имя Вашего сайта (блога)
  • Site Shortname — короткое имя сайта, которое будет отображено в URL, у меня так и написано — pervushincom

Учетная запись главного модератора, т.е. Вас:

  • Username — Ваш логин
  • Password — пароль
  • Email address — электронная поста

Жмем «Continue» и попадаем на страницу быстрых настроек нашей будущей формы комментариев. Не переживайте, если что-то не так настроите, эти параметры можно будет изменить позже.

Первым делом выбираем язык, нам нужен русский:

Выбор языка

Затем переходим к опциональным настройкам (Optional Features). На очереди Facebook Connect и Twitter @Replies.

В facebook connect следует вписать свой API, получить который можно кликнув по ссылке «(Click here to get one)», Вы должны быть зарегистрированы и авторизованы в facebook. Моя страница в facebook.

Twitter @Replies нужен для ответов в твиттер. Сюда можно вписать свой твиттер логин с @.  У Вас нет аккаунта в twitter? Так зарегистрируйтесь скорее, я уже там.

Ниже чекбокс Disable Like Buttons. Если поставите галочку, пользователи не смогут голосовать за Ваши посты, соответственно посты не появятся на главной странице disqus.com, а значит Вы не получите дополнительный трафик :). И хотя там большая конкуренция, я все же рекомендую эту галочку не ставить.

Настройка Facebook Connect, Twitter @Replies и like buttons

Следующая колонка, правее, по порядку сверху вниз:

  • Media Attachments — дискус в комментариях может автоматически распознать ссылки на изображения и видео, сделать к ним превью и разместить их ниже, под самим комментарием. Думаю нам пригодится эта опция, потому ставим галочку.
  • Trackbacks — из-за навалившегося большого количества спама у меня в блоге, трекбеки были отключены, потому и здесь я не ставлю галочку в этой опции. Если кто не знает, трекбеки показывают ссылки на сайты, которые ссылаются непосредственно на пост.
  • Akismet — очень популярный спам-фильтр. Он у меня изначально стоял в виде плагина и тут есть эта опция, радует. Для его полноценной работы нужен API, который можно получить здесь (требуется регистрация). Рекомендую включить эту опцию.
  • Reactions — полезная штука! Будет искать и выводить какие-либо упоминания о Вашем посте в различных сервисах (twitter, friendfeed, digg и т.д.). Я включил все сервисы.

Дополнительная настройка disqus: включение опций media, akismet, reactions

Спускаемся чуть ниже, следующая опция «Display login buttons with comment box«. Очень удобная функция. Любой пользователь, имеющий аккаунт на одном из указанных сервисов (а это facebook, twitter, openid, yahoo) сможет авторизоваться без каких-либо проблем и оставить комментарий. «Развяжем» руки пользователям? Я да!

Сервисы авторизации в disqus: facebook, twitter, openid, yahoo

Тут все, нажимаем кнопку «Continue ->«. На следующей странице выбираем движок, на котором будет установлен disqus:

Список движков и сервисов на который можно установить дискус

Обратите внимание, дискус можно установить на любой сайт, если в списке нет Вашего движка, тогда на выручку придет «Universal Code«. Но сейчас я установлю его на wordpress. Он первый в списке..видимо самый популярный :). Клик.

Установка disqus на wordpress

Установка disqus на wordpress не вызовет у Вас каких-либо проблем, как впрочем и установка на другие движки.

Скачиваем плагин здесь, распаковываем и выкладываем на сервер в папку с плагинами, обычно она располагается здесь: /wp-content/plugins/.

Затем идем в админ-панель Вашего wordpress блога, переходим в раздел «Плагины». Если Вы правильно положили плагин (в нужную папку), тогда вордпресс его определит, Вы его увидите. Его надо активировать. Сделали? Идем в раздел «Комментарии». Disqus потребует авторизации, вводим логин и пароль (Вы же их записали, верно?). После авторизации нам предлагают завершить настройку дискуса, что также можно будет сделать позже, тем более что новая форма комментариев уже работает!

Кстати, имеющиеся у Вас в блоге комментарии автоматически скопируются дискусом..ну где-то в течении часа.

Дополнительные инструменты disqus

Саму систему я больше не настраивал, там и по-умолчанию все отлично выглядит, но на этом мы не заканчиваем. Есть еще очень полезные инструменты: вывод горячих тем, вывод последних комментариев (как у меня в сайдбаре), вывод топ комментаторов (самых комментирующих пользователей) и вывод количества комментариев в rss фиде от feedburner. Подробнее.

В панели дискуса нам потребуется вкладка «Tools» (инструменты):

Инструменты disqus

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

Универсальный виджет дискуса с вкладками

Лучше внедрять нужные инструменты по отдельности. Мне, пока, понадобился лишь один виджет «Последние комментарии», если Вам тоже, тогда кликаем на ссылку «Recent comments». Что мы здесь можем настроить:

  • Number of items to display — количество отображаемых записей. У меня так и осталось — 5.
  • Show avatars — показывать аватары или нет. У меня так и осталось — yes.
  • Avatar size -размер аватаров. У меня так и осталось — 32px.
  • Comment Excerpt Length — ширина области с комментариями. Там стоит 200, мне понадобилось уменьшить до 180… вроде, не помню уже.

Ниже нас ждет уже готовый к «употреблению» код.

Обратите внимание, на изображении ниже я выделил одну строку зеленым — ее надо переименовать, она на английском, а Вы напишите, ну например, «Последние комментарии», оригинально правда? Вторая строка выделена желтым, удалите ее вообще. Это абсолютно бессмысленная для нас лишняя ссылка на disqus.com. Остальной код вставляете в нужное место Вашего шаблона.

Настройка виджета последних комментариев

Остальные виджеты можно настроить по аналогии, там все также.

Вы пользуетесь feedburner? Тогда надо бы еще одну настроечку сделать :). Мы же хотим, чтоб в rss отображалось количество уже оставленных комментариев, вот как у меня сейчас:

Мой rss

Чтобы реализовать это дело у себя, нужно хлопнуть три раза в ладоши войти в свой feedburner аккаунт, выбрать вкладку «Optimize«, в панели слева выбрать пункт «Feedflare«:

Настройка feedflare

Прокручиваем страницу вниз и в поле «Personal Feedflare» добавляем строчку:

http://pervushin.com/ВАШ_НИК.disqus.com/~feedflare/comments_link.xml

И соответственно жмем кнопку «Add New Flare«:

Добавление disqus в feedburner

Устали? Да все уже, думаю этого более чем достаточно, чтобы легко работать и управлять своими (и чужими) комментариями.

Удачи Вам и побольше положительных комментариев Вашим блогам!

Snapshot / @pervushin_com в twitter

Сладкое на сегодня: очередной пример креативной и забавной рекламы. Девушку так колбасит, а в замедленном действии это выглядит очень смешно 🙂 Вот так работе надо отдаваться!

Комментарии

115 на запись "Disqus — удобная форма комментариев для сайта"
  1. Ahawks says:

    )))Свой аватар заценил в статье) Дискус может и хороший, но когда изменил шаблон на блоге и убрал его то 4 моих читателей сказали спасибо. Многие жаловались, что письма с ответом им не доходят, сам я замечал другой минус, в основном на комментарии свои отвечаю через консоль и когда я там писал комментарий, то в базе он оставлялся, а на самом блоге не отображался, поэтому необходимо было писать через сам дискус или оставлять комментарий через сайт.
    И не так много людей зарегистрированы на фейсбуке и на дискусе, а если отвечать через твиттер, у меня был случай когда человеку надо было ответить на мыло, а при входе через твитер оно не отображается.

  2. Algin says:

    Дискус хороша штука, только пр одном условии, что этой штукой все пользуются, а так многих смущает, да и в лом регистрироваться и попросту не комментируют

    • Snapshot says:

      Не факт. Прелесть дискуса в том, что и регистрироваться то в общем-то не обязательно. Оставил свой емайл и имя (как в стандартных формах) и вуаля.

  3. Goodman says:

    Здравствуйте. Подскажите, пожалуйста, как отредактировать текст (цвет и расположение) в окоше, которое появляется при нажатии на «Like» в «Disqus». У меня текст в окошке таким же цветом как и окошко, а хотелось бы, чтоб был белый как у Вас.
    P.S. Чуть не забыл, как спустить окошко «Добавить комментарий» вниз, чтобы былопосле комментариев?

    • Snapshot says:

      Вообще я с дизайном ничего не делал и шрифт у меня такого цвета стоял по-умолчанию. Попробуйте зайти в disqus.com, далее на вкладку «Settings», затем слева выбираем «Appearance», посмотрите, первым пунктом «Current Theme» у Вас стоит «Narcissus»?

      >>как спустить окошко «Добавить комментарий» вниз

      Там же, в «Appearance» прокручиваем страницу вниз до пункта «Comment Form Position», в выпадающем меню выбираем «Bottom of thread».

  4. Отличная статья! Я и сам подумываю заменить у себя систему комментирования на Disqus, но сначала надо поменять дизайн 🙂

    • Snapshot says:

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

  5. doyarkanasene says:

    а скажите пожалуйста…когда на самом сайте disqus входишь в свой

    • Snapshot says:

      Как нет, есть, вот http://disqus.com/profile/logi…/ , пробуйте.

      • doyarkanasene says:

        Спасибо, но раз сто пробовала…значит OID глючит у меня. 🙂

        а в моем профайле я могу сделать мои комментарии и ответы не видимыми для всех, кроме меня? или нет такой функции, найти не могу.

        • Snapshot says:

          А разве они видимы кому-то? Вот я например вижу только два Ваших комментария, так как они оставлены у меня в блоге.

          • doyarkanasene says:

            потому что я написала только 2 коммента вообще, сейчас вот третий.)))

            я вижу все ваши комментарии в профайле в Activity и мне интересно, можно ли их сделать видимыми только для себя

          • Snapshot says:

            А, извиняюсь, не сразу понял, что в activity. Насколько я знаю такой функции нет, отписал руководителям проекта, как ответят — сообщу.

          • Snapshot says:

            Пришел ответ от разработчиков:
            «Hi Sergey,

            This is not currently possible. Sorry for the inconvenience. Contact us with any more questions.

            Thanks, Tyler.»

            Переводится примерно так:

            «Привет Сергей,

            На данный момент это не возможно. Извините за причиненные неудобства. Если есть другие вопросы, пишите.

            Спасибо, Тайлер.»

  6. Svjatoslav says:

    У меня раньше стоял дискус… но что-то грузится долго… решил оставить всё по другому

    • Стас says:

      Есть аналог дискуса — getrate.me. Скорость загрузки не привышает 0,5 секунды. Я в свое время перешел на этот сервис из-за быстрой загрузки, причем функционал такой же

  7. kmboldyrev says:

    Сергей, спасибо за статью.

    Есть вопрос важный. Может я чего-то не доделал…

    Я получил нужный эффект — комменты стало возможно оставлять без перезагрузки страницы. Это здорово.

    ОДНАКО!!!!!!!

    Обещанное восстановление ВСЕХ ПРЕЖДЕ ПРИСУТСТВОВАВШИХ комментариев НЕ ПРОИЗОШЛО!!

    А это, согласитесь, существенная потеря для блога….

    Что порекомендуете предпринять?

    • Snapshot says:

      >>существенная потеря для блога…
      Нет никакой потери, у некоторых сутки проходят, как дискус проиндексирует все комментарии.

      Попробуйте ускорить процесс, для этого зайдите в панель управления комментариями disqus, затем на вкладку «Tools», далее в меню справа «Import/Export», затем выберите свою платформу (я так понимаю blogger) и в первом пункте «Import existing comments» нажмите кнопку «Import». Также включите опцию ниже «Keep new comments synced», для последующей автоматической синхронизации.

      Из Вашего емайл:
      >>Может Вам стоит таки добавить в пост о disqus предупреждение о том, что все предыдущие комменты исчезнут?
      4. Никаких потерь комментариев. В сети бытует мнение (где-то видел), что все комментарии уходят на сервер disqus и дескать если что, то все потеряется, это не так! Все комментарии остаются на месте, т.е. в Вашей базе на Вашем сервере. Дискус просто синхронизируется с основной базой и копирует их себе.

  8. xcode says:

    Спасибо за статью, все расписано и все понятно, пойду себе так же делать, если что буду писать, что получаться не будет или неставиться.

  9. zlobusz says:

    Я чет не пойму, а как комментировать блоги с такой системой? Я целый час потратил на то, что бы понять в чем фишка блога с этим дискусом…

  10. Максим says:

    Спасибо. Очень доступно.

    Но после установки плагина у меня верх поста выглядит так:
    http://s48.radikal.ru/i121/1102/d4/c80659d2a684.jpg

    Не подскажите, что делать?

  11. YuPo says:

    вопрос такой — когда пользователь комментирует заметку с помощью фейсбука, то аватарка профиля отображается сжатой по длине. то есть в фейсбуке аватарка прямоугольная, а disqus ee впихивает в квадрат. это смущает.
    подскажите, где можно исправить размеры аватарки? appearance — avatar picture — size просто увеличиваютуменьшают квадрат, искажение остается

  12. Aspiring says:

    Есть минус, потому что надо логинится, а делать это с разных компов неудобно

    • Snapshot says:

      Логиниться не обязательно, можно оставить комментарий как «гость», оставив свой ник и емайл, в принципе, также как это сделано в обычных формах комментариев.

  13. Спасибо за подробную инструкцию. У меня вопрос, вы пишете что отредактированный код (в котором можно изменить ширину области коммментирования) нужно вставлять в нужное место шаблона. Вот я не могу найти где это место)) Может подскажете, весь код уже перерыл.

  14. Аноним says:

    не могу увеличить размер шрифта

  15. paschenkomax says:

    А как сделать чтоб имя было ссылкой на свой блог

  16. Аноним says:

    У меня не отображается кнопка «Отправить от имени» как её поставить?
    И как поставить отправить как Гость?
    Как вы руссифицировали DISQUS? У меня на англ всё! Спасибо!

    • Snapshot says:

      «Отправить от имени» отдельно никак не ставится, это часть дискуса.

      По «гостю». Идем в настройки. disqus.com->settings, прокручиваем список опций вниз до пункта «Who Can Comment?». В этом пункте ставим точку в «Anyone».

      Там же, в настройках ищем пункт «Language», в котором выбираем «Russian».

      • Аноним says:

        Всё так и стоит! Но выглядит совсем по другому! Вернулся на родную систему комментов!

  17. отлично, спасибо

  18. тоже пользуюсь disqus — отличная система

  19. вАрона says:

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

  20. Аноним says:

    Сергей, так значит, после установки Disqus, необходимо подождать до 24 часов, и только после этого появятся старые комментарии на блоге ? (Чуть больше 500).

    • Snapshot says:

      Примерно да. Там где-то в опциях есть возможность ускорить процесс, отдать «приказ» скрипту пройтись по всем старым комментариям, не могу сейчас посмотреть, не за компьютером нахожусь.

  21. Аноним says:

    Сергей, так значит, после установки Disqus, необходимо подождать около 24 часов, прежде чем появятся старые комментарии ? (Чуть больше 500 шт.)

  22. dimkeff says:

     Код там где зеленое и желтое не меняется, что
    посоветуете?

    • Snapshot says:

      Вы видимо пытаетесь изменить код непосредственно в поле с этим кодом? Скопируйте этот код и редактируйте его в блокноте, например. его в блокноте, например.

      • dimkeff says:

        Да, но потом как изменения вставить, если само окно кода не
        хочет изменяться??

         

        • Snapshot says:

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

          • dimkeff says:

            Понял спасибо, иду делать после отпишусь.. 

          • dimkeff says:

            не подскажете куда именно в шаблон нужно скопировать?
            comments.php? вниз кода? 

          • Snapshot says:

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

          • dimkeff says:

            Понял буду лечить.. Спасибо за небольшую информацию.. 

  23. Этот дискус полная ерунда — выдает такую ошибку — при переходе на страницу — Warning: Parameter 1 to dsq_maybe_add_post_ids() expected to be a reference, value given in /var/www/h1021/data/www/world-ens.co.cc/wp-includes/plugin.php on line 220

    Warning: Parameter 1 to dsq_add_request_post_ids() expected to be a reference, value given in /var/www/h1021/data/www/world-ens.co.cc/wp-includes/plugin.php on line 220

    • Snapshot says:

      >> Этот дискус полная ерунда

      Ну зачем же так категорично. Вы сейчас оставили свой комментарий, увидели ли Вы какую-либо ошибку?

      Я все же копал бы в сторону настроек Вашего сервера и самого движка, тем более что «точка опоры» у Вас уже есть, это файл plugin.php, который вызывает ошибку.

  24.  Да в общем да…Вот загадка — ГДЕ И ЧТО НЕ ТАК НАСТРОЕНО…..даже наводки нет. Увы -хостер не дает доступа к php.ini но тут то конкретная ошибка —  «on line 220????» Я не сильна в  php больше по дизайну потому трудновастенько!

  25.  Забавно. Переустановила плагин — теперь вообще не отображается, ошибок правда нет, а вот стандартная форма комменетариев от wordpress осталась на месте. Хм. Сотру как этот «чудо-плагин» корявый.

  26. Аноним says:

    Сергей, установил Disqus по Вашей статье. Все работает, нравиться. Но вылезла такая несуразица — на фото. Как убрать или сделать текст меньше под квадратом комментов на блоге?Такое только на главной стр.Помогите пожалуйста решить проблему. Спасибо.

    • Snapshot says:

      Меньше или больше шрифт — это CSS. Посмотрите какой стиль у вас прописан в коде и в style.css правьте размеры.
      Другое дело, что у Вас вообще текстовая информация для вывода количества комментариев не предусмотрена, она просто не поместится в нужном месте. В этом случае вообще можно убрать этот стиль и создать новый для вывода над постом, скажем там, где у Вас «Опубликовал: Aleks …….» будет «| Комментариев: 5».

  27. Я погорячилась! Все дело было в настройках хостинга! Всегда проверяйте настройки и перед регистрацией внимательно читайте про доступные директивы php!

  28. А как перенести комментарии которые были раньше? 
    Что это означает? 

    • Snapshot says:

      disqus их сам автоматически должен просканировать. Там где-то в опциях есть возможность ускорить процесс, отдать «приказ» скрипту пройтись по всем старым комментариям 

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

  29. dsfgdsfgs says:

    Хуйло

Спасибо, что оставили свой комментарий

banner