Каждый день в рунете создается порядка 3 тысяч новых сайтов. Владельцы стремятся как можно быстрее раскрутить свой сайт и пробиться в топы. Для этого существуют разные способы и один из них - комментарии. Комментарии позволяют создавать сообщества, постоянную аудиторию, которая со временем начинает привлекать новых клиентов. На сегодняшний день существует множество систем комментирования, но как выбрать самую подходящую для вашего сайта?

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

Основные возможности Для сравнения были выбраны: Виджет Комментариев ВКонтакте, Facebook Comments, Disqus, Cackle, Livefyre и IntenseDebate. Это самые популярные системы, которые я встречаю на сайтах или в поисковиках.

Обзорная таблица всех основных возможностей имеет примерно следующий вид:

Возможность ВК комментарии FB comments Disqus Livefyre IntenseDebate Cackle

Скорость загрузки	быстро	медленно	среднее	быстро	медленно	быстро
Кнопка Like	да	да	да	да	да	да
Вставка картинок, видео	да	нет	да	да	нет	да
Доп. модераторы	да	да	да	да	да	да
Realtime обновление	да	да	да	да	нет	да
Подгонка размера	нет	нет	да	частично	да	да
Древовидность	нет	нет	да	да	да	да
Премодерация	нет	да	да	да	да	да
Akismet (спам защита)	нет	нет	да	нет	да	да
Бан юзера/IP	только юзера	только юзера	да	да	да	да
Анонимная авторизация	нет	нет	да	да	нет	да
Разные темы	нет	нет	частично	нет	частично	да
Редактирование CSS	нет	нет	нет	частично	да	да
UI CSS редактор	нет	нет	нет	нет	нет	платно
Редактирование HTML	нет	нет	нет	нет	нет	нет
Редактор заголовков	нет	нет	нет	нет	нет	да
Whitelabel	нет	нет	нет	да	нет	платно
Индексация поисковиками	нет	да	частично	нет	нет	частично
SSO	нет	нет	платно	да	нет	платно
API	нет	нет	да	да	да	да
Модерация на сайте	нет	нет	частично	да	частично	платно

Разберем некоторые возможности, подробнее.Скорость загрузки Для анализа скорости я сделал сайт, на главной странице которого, размещены все системы комментирования. При загрузке страницы, в javascript-е по timeout-у запускается функция, которая проверяет высоту контейнера с каждой системой комментирования. Если высота больше 300px, значит система комментирования загружена, сообщение об этом идет на сервер и суммируется с предыдущим значением. В итоге после запуска Selenium IDE на нескольких машинах, было установлено что:

• ВКонтакте загружаются в среднем секунду
• FB comments около 1.6 секунды
• Disqus 1.4 секунды
• Livefyre 600 миллисекунд
• IntenseDebate чуть больше 2 секунду
• Cackle 850 миллисекунду

Данное тестирование не претендует быть абсолютно правильным, так как много зависит от скорости подключения, но в среднем оно отражает реальные результаты. Сайт http://www.kommenti.com и сам отчет http://www.kommenti.com/summary .Вставка картинки, видео Все просто, вставляем ссылку на картинку (png, jpg) и несколько ссылок на видео c YouTube, Vimeo, ВКонтакте. В этом тесте порадовал Cackle, он распознал все картинки и видео, даже RuTube.Подгонка размера Подгонка виджета под размер контейнера никаких проблем не вызвала у Disqus, IntenseDebate и Cackle. Остальные системы требуют указания ширины (при создании) или выезжают за рамки.Анонимная авторизация Часто бывает ситуация, когда пользователь хочет отставить комментарий, но у него нет аккаунта в социальной сети или же он не хочет передавать свои данные. В этом случае он может войти как гость и оставлять комментарии без повторного ввода своих данных. Disqus, Livefyre и Cackle позволяют это делать, но последний для авторизации требует распознавания Google ReCAPTCHA, что несомненно является минусом.Возможность менять css Системы комментирования работающие через iframe, а это ВКонтакте, Facebook и Disqus, не позволяют менять css. Livefyre не имеет соответствующего поля в панели администрирования. У двух оставшихся IntenseDebate и Cackle таких проблем нет, можете подгонять css через FireBug или сохранять его в панели администрирования.

PS: UI css редактора нет ни в одной системе кроме Cackle, но он платный.

Whitelabel Whitelabel - это возможность использовать продукт без копирайта (ссылок, баннеров или иконок компании). Есть только в Cackle, но платно.Индексация поисковиками На сегодняшний день, Google научился индексировать Facebook комментарии. Так же на сайте Disqus одна из возможностей это индексация в Google out-of-the-box, то есть без всякой дополнительной работы гемора. Но похоже, что в реальности это не работает, по крайней мере после запуска Disqus 2012 комментарии на главной странице (disqus.com) до сих пор не были проиндексированы. В остальных системах, например Cackle, придется сохранять комментарии, через API, в свою БД и отрисовывать в HTML.SSO Единая авторизация, то есть возможность авторизации и комментирования пользователей зарегистрированных на вашем сайте. Порадовал Livefyre, он предоставляет данную возможность абсолютно бесплатно, в отличии от остальных систем.

Теперь не много подробнее о каждой системе.

Инструкция

В том случае, если для сайта используется профессиональная платформа, обычно платная, в ней уже есть все необходимые модули, в том числе и блок комментариев. Но как поступить, если вы только осваиваете веб-дизайн, создали простой сайт на чистом html и хотите дать посетителям возможность оставлять сообщения?

Для добавления на сайт блока комментариев воспользуйтесь сервисом Disqus . После установки данной платформы на сайт его посетители смогут оставлять свои реплики.

Зарегистрируйтесь на сервисе. В поле Site URL введите адрес нашего сайта. В поле Site Name – его название. Чуть сложнее с полем Site Shortname – здесь надо ввести короткое имя сайта, то есть без http, www и ru. Например, если ваш сайт имеет название httр://site12345.ru, то в качестве короткого имени введите site12345. В результате будет создан поддомен site12345.disqus.com. Перейдя на него, вы попадете в панель настройки комментариев.

Введя все данные, нажмите кнопку Continue, откроется панель настроек. Выберите русский язык, потом настройте Optional Features. В пункте Facebook Connect вы можете дать пользователям Facebook возможность оставлять комментарии из своего аккаунта. Для этого вам надо ввести API Key: вы можете получить его, нажав на ссылку чуть ниже пункта Facebook Connect, но для этого у вас должен быть аккаунт на данном сервисе. В поле Twitter @Replies впишите имя вашего -аккаунта, оно будет использоваться при ответах.

Теперь настройте чекбоксы (переключателя). Если отметите Media Attachments, то все ссылки на медиафайлы будут показаны внизу комментария как прикрепленные файлы. Trackbacks – показывает трекбеки к странице. Akismet – подключение антиспамового сервиса. Reactions – показывает упоминания в сети о вашем сайте. Наконец, если отметить чекбокс Display login buttons with comment box, над формой комментариев появятся кнопки сервисов – Facebook, Twitter и пр.

Заполнив форму, нажмите Continue. На новой странице появятся варианты подключения к различным платформам. Если вы писали код сайта сами, выберите пункт Universal Code. Для установки кода скопируйте его из пункта 1, после чего вставьте в то место вашей страницы, где должны находиться комментарии. Затем скопируйте код из пункта 2 и вставьте его до закрывающего тега /body.

Вам осталось правильно оформить ссылки, ведущие на страничку с комментариями. Например, если страница для комментариев имела вид httр://site12345.ru/comment.html, то ссылку надо сделать такой: httр://site12345.ru/comment.html #disqus_thread. После этого проверьте возможность оставлять комментарии, все должно работать.

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

Шаг 1. Разбираемся в функцией comment_form и ее аргументами

Рассмотрим функцию WordPress comment_form . Она отвечает за вывод формы комментариев, которая выводится на странице или записи. Вызов данной функции в основном можно встретить в файле comments.php в папке темы. Данный файл включается в различных местах, например, в файлах single.php и page.php , непосредственно или через вызов функции comments_template .

Описание функции можно найти в кодексе WordPress .

Если использовать функцию comment_form для вывода формы, то она будет выводиться с использованием параметров по умолчанию и будет содержать такие поля как имя, email (оба поля являются обязательными), веб сайт и содержание комментария. В теме по умолчанию Twenty Eleven форма будет выглядеть следующим образом.

Некоторые важные аргументы функции comment_form:

• fields -с его помощью можно управлять выводом полей в форме комментария.
• comment_notes_before и comment_notes_after - используются для вывода информации перед и после формы.
• title_reply - используется для изменения названия ответа, которое по умолчанию имеет значение ‘Leave a Reply’.
• label_submit - используется для изменения текста на кнопке отправки комментария.

Шаг 2. Настраиваем форму комментария с помощью функции comment_form

Теперь настроим нашу форму комментария с помощью передачи аргументов в функцию comment_form .

В случае, если нам нужно настроить поля в форме комментариев, нужно передать их список в функцию comment_form . По умолчанию для функции используется следующий список полей:

$fields = array("author" => "

" . "" . __("Name") . " " . ($req ? "*" : "") . "

", "email" => "

" . __("Email") . " " . ($req ? "*" : "") . "

", "url" => "

" . __("Website") . "" . "

",);

Если нам нужно удалить поле, например, website , нужно просто исключить его из массива и передать массив в функцию comment_form .

$commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("author" => "

" . "" . __("Name") . " " . ($req ? "*" : "") . "

", "email" => "

" . __("Email") . " " . ($req ? "*" : "") . "

",); $comments_args = array("fields" => $fields); comment_form($comments_args);

В дополнение также сменим название формы на ‘Please give us your valuable comment’, а надпись на кнопке на ‘Send My Comment’.

Для выполнения задачи передаем в функцию comment_form следующие аргументы:

$commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("author" => "

" . "" . __("Name") . " " . ($req ? "*" : "") . "

", "email" => "

" . __("Email") . " " . ($req ? "*" : "") . "

",); $comments_args = array("fields" => $fields, "title_reply"=>"Please give us your valuable comment", "label_submit" => "Send My Comment"); comment_form($comments_args);

Теперь форма комментария будет выглядеть следующим образом:

Шаг 3 . Удаляем поля из формы с помощью крюка

Также форма комментария WordPress может быть изменена с помощью крюков и фильтров. Такая настройка может быть особенно полезна при работе с плагином, когда нужно настроить несколько элементов, но не изменять файлы темы. Фильтр для добавления иди удаления полей из формы - ‘ comment_form_default_fields ‘

Удалим поле адреса URL с помощью фильтра. Приведенный код можно использовать в плагине или в файле functions.php активной темы.

Function remove_comment_fields($fields) { unset($fields["url"]); return $fields; } add_filter("comment_form_default_fields","remove_comment_fields");

Шаг 4. Добавляем данные в форму комментария с помощью крюка

Мы можем добавить поля в форму с помощью фильтра ‘ comment_form_default_fields ‘. Добавим поле возраста автора с помощью фильтра и сохраним данное поле дополнительные данные и будем их выводить в комментарии.

Добавляем поле следующим образом:

Function add_comment_fields($fields) { $fields["age"] = "

" . __("Age") . "" . "

"; return $fields; } add_filter("comment_form_default_fields","add_comment_fields");

#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-age label, #respond .comment-form-comment label { background: #eee; -webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); -moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); box-shadow: 1px 2px 2px rgba(204,204,204,0.8); color: #555; display: inline-block; font-size: 13px; left: 4px; min-width: 60px; padding: 4px 10px; position: relative; top: 40px; z-index: 1; }

Теперь наша форма комментария будет выглядеть следующим образом:

Теперь возраст хранится как дополнительная информация. Нужно использовать крюк в ‘ comment_post ‘:

Function add_comment_meta_values($comment_id) { if(isset($_POST["age"])) { $age = wp_filter_nohtml_kses($_POST["age"]); add_comment_meta($comment_id, "age", $age, false); } } add_action ("comment_post", "add_comment_meta_values", 1);

Как только данные сохранены, их можно выводить в комментарии следующим образом:

Шаг 5 . Настройка комментариев для определенных типов записей

Иногда требуется использовать поля в комментариях только для определенных типов записей. Изменим код для вывода поля возраста только для записи типа book :

Function add_comment_fields($fields) { if(is_singular("books")) { $fields["age"] = "

" . __("Age") . "" . "

"; } return $fields; } add_filter("comment_form_default_fields","add_comment_fields");

Шаг 6. Создаем возвратную функцию для вывода комментариев

Функция wp_list_comments используется для вывода комментариев в записях. В кодексе WordPress функция описана подробно.

wp_list_comments имеет аргумент ‘ callback ‘ в котором можно определить функцию, которая вызывается при выводе комментария.

В теме Twenty Eleven в файле comments.php можно найти строку:

Wp_list_comments(array("callback" => "twentyeleven_comment"));

Изменим ее на:

Wp_list_comments(array("callback" => "my_comments_callback"));

Функция my_comments_callback будет вызываться для каждой записи.

Шаг 7. Стилизация комментариев

Теперь мы немного изменим стиль комментария. Просто будем выводить содержание записи и поле возраста, которое было добавлено нами ранее. Мы также изменим цвет фона для комментариев.

Код функции ‘ my_comments_callback ‘:

Function my_comments_callback($comment, $args, $depth) { $GLOBALS["comment"] = $comment; ?>