Новый взгляд на комментарии. Hypercomments.com — комментируем фрагменты текста

О проекте

Что собой представляет стандартный блог или публикация? Комментарии как правило обособлены от текста и пользователям приходится цитировать фрагменты текста, чтобы прокомментировать их. А если спор между читателями завязывается вокруг определенного высказывания в статье, как зачастую бывает на хабре, то только что зашедшему в пост читателю трудно уловить эту интересную часть статьи. Как можно сделать коментарии более контекстными, интерактивными, привлекающими внимание? Хочу поделиться с хабравчанами проектом, который разрабатывает одна из наших команд. Он будет полезен блогерам, интернет-СМИ, да и просто сайтам с большим текстовым контентом. Проект Hypercomments предлагает новый взгляд на комментарии. Комментировать можно как фрагменты текста, так и отдельные слова, картинки. Это позволяет автору оживить статью, увидеть наиболее обсуждаемые, горячие участки текста, сделать содержание статьи более насыщенным за счет активности читателей.

Как пользоваться

• На сайт устанавливается очень просто: есть плагины для WordPress, Blogger, Joomla, а также простой универсальный скрипт виджета вида

• при даблклике на тексте или при его выделении появляется кнопка комментирования:
• после создания комментария текст подсвечивается и становится кликабельным:
• на коментарии можно отвечать, прикреплять к ним мультимедиа (картинки, видео, презентации), также есть система рейтинга комментариев
• можно лайкать статью через Facebook, Twitter, Google+
• можно выбрать тему для виджета комментариев
• комментарии группируются по топикам и авторам

Посмотреть как это работает и поиграться можно в песочнице

Дополнительные плюшки

• разрешение/запрет комментирования отдельных классов/id элеменов в тексте

  Содержимое ­тега, или Содержимое ­тега</pre>

• отображение N первых комментариев на странице, остальные сворачиваются
• установка одного виджет комментариев для нескольких страниц и/или новый виджет для каждой страницы
• онлайн слежение за комментариями, а также звуковое уведомление и уведомление через трей о новых комментариях
• кросс-постинг в социальные сети
• подписка на rss
• индексация комментариев поисковиками
• импорт старых комментариев из блога или экспорт текущих в xml файл
• модерация комментариев и управление модераторами (их может быть несколько)
• черный/белый список комментаторов
• аналитика активности комментаторов и эффективность комментариев
• мультиязычность
• спам-фильтр
• рейтинг авторов
• любой тарифный план можно пользовать в течении 30-ти дневного периода бесплатно

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

Сейчас существует достаточно много разных систем комментирования, которые реализованы с помощью сторонних сервисов и могут подключаться к блогам/сайтам. Использовать их можно, если ваша CMS предоставляет не лучшую реализацию данной функции (например для Blogspot) либо вы хотите значительно расширить базовые возможности связанные с комментариям (добавить социальных функций и т.п.). Как-то я рассказывал про Disqus для wordpress сегодня поговорим об одном весьма интересном сервисе — HyperComments. Детальный обзор HyperComments уже делал в одном из блогов, поэтому сейчас сконцентрирую внимание на функциях и установке системы в WordPress.

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

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

Проще, наверное, один раз увидеть как работает HyperComments:

Основные особенности системы HyperComments:

• возможность комментировать конкретное место в тексте;
• работа в реальном времени — посетителю не нужно ждать перезагрузки страницы + модерация тоже может происходить в реальном времени.
• гиперкомментарии индексируются поисковыми системами;
• импорт/экспорт существующих комментариев;
• не нужна регистрация;
• социальные функции (например, репостинг комментария в Facebook);
• защита от спама;
• белый и черный листы для пользователей;

Кроме того в HyperComments достаточно простая установка. Для популярных CMS таких как WordPress, Joomla, Blogger есть специальные плагины.

Установка HyperCommentsдляWordPress

Плагин для установки системы HyperComments можете скачать с официального сайта вордпресс, после чего традиционно загрузить все содержимое распакованного архива в директорию ФТП блога wp-content/plugins/. Дальше заходим в админку и активируем модуль. Второй вариант — изначально в разделе «Плагины» кликнуть по ссылке «Добавить новый» и найти его по названию HyperComments. Там, кстати, будет 2 варианта — последняя версия на данный момент 1.1.0 (появилась совсем недавно — 15 августа).

Дабы настроить плагин HyperComments вам нужно будет авторизироваться через Google аккаунт. Если честно, до конца и не понял зачем так все сделано, возможно, дабы использовать сервис без регистрации. Как бы там ни было все достаточно быстро:)

В любом случае, по сервису нужна только ваша почта и некоторые базовые данные аккаунта. Перед тем как перейти к настройке вам нужно выбрать «Тарифный план». Если бы вы начинали работу с HyperComments на официальном сайте сервиса, а не через модуль, то сразу же перешли на выбор тарифов. Находятся они здесь. Для любого варианта первые 30 дней бесплатны.

Как видите, тут есть варианты для разных типов сайтов и финансовых возможностей. Можно начать с бесплатного тарифа, который, в принципе, содержит все необходимые моменты для классического простого блога. Остальные тарифные планы как-то персональный и профессиональный также вполне доступны, если нужно установить систему комментирования HyperComments для какого-то коммерческого проекта. За 2 и 10 баксов в месяц получите темы оформления, экспорт комментариев, отчеты модераторов, аналитику и White label.

Я выбрал тариф Free, нажимаем на кнопку «Установить». Если вы находитесь на сайте HyperComments, то увидите множество разных настроек и опций для системы комментирования.

В пункте «Настройки» — «Основные» вы найдете код виджета для HyperComments, которые нужно будет установить в файле, где выводятся комментарии, то есть в Single.php. Там же есть возможность выбрать добавление социальных кнопок, изображений, видео, включить модерацию, уведомления, поменять цвет подсветки и т.п. Опций достаточно много, но часть из них недоступна из-за тарифного плана. Чуть меньше параметров отображается в плагине в админке вордпресс.

Закладка «Комментарии» служит для модерации свежих записей, «Управление» открывает возможности сервиса, а «Настройка» позволяют задать некоторые опции для работы плагина с блогом. В целом, нет ничего сложного, но нужно разбираться и тщательно просмотреть все пункты.

Система комментирования HyperComments предлагает весьма интересное и неординарное решение для сайтов или блогов. Устанавливать ее или нет это, конечно, вопрос каждого, но безусловно некоторые преимущества и улучшения проекту она может дать. Если говорить о пользе для сайта, то вы получите возможность интерактивного общения непосредственно привязанного к контенту страниц, что увеличит активность обсуждений. Кроме того, выделение слов или фраз может создать определенные «точки фокусировки» для других посетителей, на которые они бы сразу обращали внимание. Если посмотреть на это с точки зрения пользователя, то HyperComments помогает обсуждать именно те части статей, которые вас заинтересовали + получается интерактивное интересное общение с другими комментаторами.

P.S. Прогон по каталогам сейчас используется достаточно часто, хорошая база каталогов сайтов которая собирается вебмастерами представлена в Seocatalogs. Онлайн проекты с афишами мероприятий весьма популярны среди молодежи, так LifeCrowd будет интересен в первую очередь увлекающимся музыкой и киберспортом.

Заработай на сайте –> Все мы знаем, что комментарии в блогах, будь то Blogger или какой-либо другой движок,если по каким-либо причинам не устраивает встроенный дефолтовый вариант (к примеру, снять нагрузку с WordPress), заменяют на стороннее решение. И это будет Disqus, IntenseDebate или малораспространённый Cackle. Об этих системах комментирования я писал в заметке “Сервисы комментариев для блога (Blogger, WordPress и других платформ)”. А теперь новый игрок на “рынке веб-разработки” – HyperComments или по-русски “Гиперкомментарии“. Если вы откроете страницу сайта по ссылке, то увидите (в русской версии сайта) следующий слоган: “Гиперкомментарии – система комментирования, позволяет комментировать слово или фрагмент текста“. И это правда, система Hyper позволяет превращать текст в подсвеченные, и главное, кликабельные сигменты, которые, по словам разработчиков, “становятся контекстно связанными”. А происходит это по щелчку правой клавиши мыши на интересном участке текста:

Смотрим на HyperComments

Демо есть на офсайте (ссылка выше), а здесь будут скриншоты. Установка проходит без затруднений. Жмём в бесплатном тарифном плане на кнопку регистрация/установить, даём “добро” на доступ, выбираем платформу:

Поддерживаемые плтаформы HyperComments

Где можно выбрать заточенный код под:

• Blogger
• WordPress
• Joomla

Либо универсальный для тех, у кого голова соображает или наоборот, когда ничего не получается. Затем нужно будет ввести название блога и его url: После этого вы попадёте на страницу плагинов, где скорее всего разбегутся глаза: Здесь мы во всей красе видим реальные плюсы системы комментирования HyperComments:

• Топики (где обещано отображение в отдельной вкладке сообщений с большим числом комментариев)
• Авторы (авторские комментарии с сортировкой по рейтингу)
• Гиперкомментарии (комментарии, которые оставляются фактичекси прямо в тексте; об этом написано выше)
• Like – оценка поста (фу и класс) + кросспостинг в соц сети (Facebook, Twitter, Google+)

Последний шаг – выбор темы и получение кода. Здесь меня ожидал “арррррр!!!”, тема доступна всего одна, остальные неактивны и даются только в платных версиях. После этого система установки перебросит вас на страницу с кнопкой “Установить в Blogger“. И там же будет сказано об импорте уже имеющихся комментариев и назначении модератора. В-общем, нажал я на кнопку и получил готовые комменты в своём блоге (обратите внимание: счётчик комментариев от Blogger работает!):

Комментарии в Blogger от HyperComments

Помимо перечисленных плюшек здесь мы наблюдаем приятные функции и бонусы:

• Смайлы
• Вставка изображений в комментарии
• Вставка кода ролика с Youtube
• Вставка Html кода (только для Google документов)
• Подсказки, появляющиеся на чёрном прозрачном фоне
• Древовидная структура
• Админка
• Премодерация
• Доступ для гостей
• Фильтр запрещённых слов и доступа
• Оповещение администратора по email

RSS лента к комментариям конкретного поста тоже имеется. Вот так выглядит постинг ютубовского ролика в HyperComments: В самих комментах на блоге: А вот так выглядит админка, в которую можно попасть с офсайта по гугловской учётке:

Админка HyperComments

Здесь же можно модерировать комментарии своего блога.

Халява?

Да, простым блогерам предлагается бесплатный тарифный план по схеме один блог = один модератор:

Тарифные планы в HyperComments

Ну а дальше чем выше цена, тем круче возможности. Описывать я не буду (страница с тарифами), всё это для коммерческих сильных проектов, и наверное стоит своих денег. От себя добавлю, что доверяю коммерческим и полукоммерческим проектам намного больше, чем бесплатным. Причины, полагаю, ясны.

Аккаунты

Комментирование в Hypercomments разрешается:

• анонимусам
• одноклассникам
• гугл
• вконтакте
• фейсбук
• твиттер
• мейл.ру

Авторизация предлагается после написания текста комментария (появляется такое окно):

Авторизации в Hypercomments

Что приятно – это аватарки из соц. сетей. Они отображаются. На скриншоте можно увидеть мой гуглоплюсовский юзерпик.

Цитирование

Возможность создания “горячих цитат” – это фирменная фишка в HyperComments. Происходит это таким образом: в тексте статьи вы выделяете область, появится стрелка после нажатия на которую, вы увидете окно для написания комментария. Сама (выделенная) станет в тексте активной (будет вести прямо к комментарию), а в списке комментов появится ещё один с цитатой этой области:

Горячее цитирование в HyperComments

Статистика по автору (я на тестовом блоге единственный комментатор):

Выводы

Эта заметка написана в рамках моего предложения “Честный обзор”. То есть, что вижу, то и пишу. С ошибками, с “имхо” и со всеми сопутствующими этому заблуждениями =). Перед тем, как приступить к тестированию HyperComments (а оно производилось исключительно на платформе Blogger/Blogspot) я думал, что это просто клон системы Disqus, и ничем меня здесь не удивить. Но по мере углубления в subj у меня несколько изменилось мнение (как это было уже не раз), а сейчас вовсе хочу отрубить эти дурацкие блоггеровские комменты и поставить Гиперкомментарии. Тем более, что импорт и экспорт предусмотрены (я пока не пробовал):

Импорт комментариев в HyperComments

Импорт комментариев из Blogger в HyperComments

Что можно ещё добавить? При поверхностном осмотре (я ставил и попробовал только на тестовом блоге) впечатляет! Меню, элементы, комментирование – всё очень дружелюбно и юзабельно, на русском языке, косяков пока не заметил.Хотелось бы: кнопка и чекбокс для мгновенной подписки по email на комментарии к данному посту (что-то я такой не заметил у себя)). Вдобавок можете посмотреть тур по системе комментариев HyperComments (надеюсь, разработчики не против размещения ролика здесь):

И ещё раз ссылка (для тех, кто не заметил): hypercomments.comИспользуемые источники:

• https://habr.com/ru/post/140287/
• http://wordpressinside.ru/plugins/hypercomments/
• http://archive.tehpodderzka.ru/2012/04/hypercomments-novaya-sistema.html