Простая система комментирования с использованием AJAX. Комментарии в HTML, CSS, PHP Комментарии с Facebook: «за» и «против»

На этот раз мы делаем простую AJAX систему добавления комментариев. Этот позволит продемонстрировать, как добиться эффективного взаимодействия между JQuery и PHP / MySQL с помощью JSON. Система работает таким образом, что добавляемые комментарии помещаются на страницу без её полной перезагрузки, давая ощущение работы сайта только на компьютере пользователя, тем самым избегая необходимости ждать некоторое время, необходимое для повторной загрузки страницы с добавленным комментарием.

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

Шаг 1 - XHTML

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

Demo.php

Имя
30 июля 2010

Комментарий

В Div-е класса avatar содержиться гиперссылка соответсвенно с аватаром (если пользователь указал действительную ссылку на аватар при отправке комментария), допустим из gravatar.com. Ну мы еще вернемся к этому когда будем работать с PHP. Наконец, у нас есть имя и время также в DIV-ах, а также комментарий то есть сам текст в параграфе.

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

Demo.php

Добавить комментарий

Шаг 2 - PHP

PHP обрабатывает связи с базой данных MySQL и создает разметку комментарий. Кроме того, на приёме в конце стоит AJAX и вставляет комментарий в таблицу комментариев. Вы можете увидеть код, который выводит комментарии к странице, ниже.

Demo.php /* / Выбрать все коммнтарии и заполнить массив $comments */ $comments = array(); $result = mysql_query("SELECT * FROM comments ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) { $comments = new Comment($row); }

MySQL запрос выбирает все записи из базы данных и заполняет массив $comments с объектом класса комментарий, который вы видите ниже. Этот массив выводится после выполнения скрипта.

Demo.php /* / Выводим комментарии один за другим */ foreach($comments as $c){ echo $c->markup(); }

Каждый комментарий имеет markup() метод, который генерирует HTML код для печати страницы. Вы можете увидеть этотот метод и класс ниже.

Класс принимает строку из базы данных (fetched with mysql_fetch_assoc()) и сохраняет его в переменной $data. Она доступна только для методов этого класса и не может быть доступна извне.

Comment.class.php – Шаг 1 class Comment { private $data = array(); public function __construct($row) { /* / Конструктор */ $this->data = $row; } public function markup() { /* / Этот метод выводит разметки XHTML комментарий */ // Создание псевдонима, так что мы не должны писать // $this->data данные каждый раз: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url"]){ // Если человек заполнил URL при //добавлении комментария // Определяем гиперссылку $link_open = ""; $link_close = ""; } // Преобразование времени $d["dt"] = strtotime($d["dt"]); // Необходим для изображений Gravatar по умолчанию: $url = "http://".dirname($_SERVER["SERVER_NAME"]. $_SERVER["REQUEST_URI"])."/img/default_avatar.gif"; return "

".$link_open." ".$link_close."
".$link_open.$d["name"]. $link_close."

".$d["body"]."

"; }

Этот сценарий использует Gravatar чтобы показать аватары в комментариях. Для тех, кто не использовали Gravatar, это очень полезная услуга, которая позволяет связывать аватар с вашим адресом электронной почты. Аватар может быть легко взят передавая хеш по md5().

Уведомление на линии 39 над ней - скрипт пытается выяснить, URL, на которой он находится, и определяет точный адрес default_avatar.gif изображения. Этот GIF передается Gravatar по md5 хеш, поэтому если аватар был найден на данном электронном адресе, вместо него отображается запасное штатное изображение.

Comment.class.php – Шаг 2 public static function validate(&$arr) { /* / Данный метод используется для проверки данных, / передаваемых через AJAX. / / Это возвращение true/false (истина/лож) в зависимости / от данных является действительным, и заполняеться / Масив $arr передается в качестве paremter / (обратите внимание, амперсанд выше) / Либо действительно ввод данных, или сообщения об ошибках. */ $errors = array(); $data = array(); // Использование filter_input функция, введенная в PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))) { $errors["email"] = "Please enter a valid Email."; } if(!($data["url"] = filter_input(INPUT_POST,"url",FILTER_VALIDATE_URL))) { // Если поле URL не соответствует не правильный URL $url = ""; } // Использование фильтров с пользовательской // функцией обратного вызова: if(!($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK, array("options"=>"Comment::validate_text")))) { $errors["body"] = "Ошибака комментариев."; } if(!($data["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK, array("options"=>"Comment::validate_text")))) { $errors["name"] = "Ошибка имени."; } if(!empty($errors)){ //Если есть ошибки, записываем $errors в массив $arr: $arr = $errors; return false; } foreach($data as $k=>$v){ $arr[$k] = mysql_real_escape_string($v); } // Убедимся, что письма в нижнем регистре // (для правильного хэш Gravatar): $arr["email"] = strtolower(trim($arr["email"])); return true; }

validate() описанным выше способом определяется как статический. Это означает, что он может быть вызван как непосредственно Comment::validate(), без необходимости создания объекта этого класса. Этот метод не является проверкой входных данных, который представлен через AJAX.

Этот метод использует новые функции фильтра, которые доступны в PHP 5.2.0. Это позволяет нам легко проверить и фильтр любых вводных данных, которые передаются в сценарий. Например filter_input (INPUT_POST, "URL", FILTER_VALIDATE_URL) означает, что мы проверяем $_POST["url"] является действительный адрес URL. Если это так, то функция возвращает значение переменной, в противном случае возвращения являются ложными.

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

У нас также есть возможность указать пользовательскую функцию, которая собирается применить некоторые более продвинутые модификации данных, как видно из строк 31 и 37.

Comment.class.php – Шаг 3 private static function validate_text($str) { /* / Этот метод используется внутри как FILTER_CALLBACK */ if(mb_strlen($str,"utf8") , ", и т.д. ..) и преобразовать // Символы новой строки в
теги: $str = nl2br(htmlspecialchars($str)); // Удалить символы новой строки, которые остались $str = str_replace(array(chr(10),chr(13)),"",$str); return $str; }

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

Submit.php /* / Этот массив будет заполнен либо / Данные, которые были отправлены в сценарий, или / Сообщения об ошибках: /*/ $arr = array(); $validates = Comment::validate($arr); if($validates) { /* Все хорошо, вставляем в базу данных: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]."", "".$arr["url"]."", "".$arr["email"]."", "".$arr["body"]."")"); $arr["dt"] = date("r",time()); $arr["id"] = mysql_insert_id(); /* / Данные в $arr вставляем query, / но неэкранированный текста, / так что мы используем, stripslashes / для всех элементов массива: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); /* Вывод разметку */ echo json_encode(array("status"=>1, "html"=>$insertedComment->markup())); } else { /* Вывод сообщений об ошибках */ echo "{"status":0,"errors":". json_encode($arr)."}"; }

submit.php получает данные комментария в виде запроса AJAX. Она проверяет его и выдает JSON объект либо разметки XHTML который успешно выведен, или список сообщений об ошибках. JQuery использует статус собственности определить, следует отображать сообщения об ошибках или добавить комментарий разметки страницы.

Вы можете увидеть два примера ниже.

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

Вопрос первый : с помощью PHP и MySQL ?

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

id — это уникальный идентификатор.
page_id — в этом поле будет хранится идентификатор страницы сайта, на которой располагается данный комментарий.
name — это имя того комментатора, который оставил данный комментарий.
text_comment — соответственно это текст текущего комментария.

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


Это простая HTML форма комментариев для сайта. Вы ее располагаете на своем сайте в том месте, где это удобно для оставления комментария к посту — естественно под самим постом.

query("INSERT INTO `comments` (`name`, `page_id`, `text_comment`) VALUES ("$name", "$page_id", "$text_comment")");// Добавляем комментарий в таблицу header("Location: ".$_SERVER["HTTP_REFERER"]);// Делаем редирект обратно?>

Последний шаг в создании формы комментариев для сайта на PHP и MySQL — Делаем вывод наших комментариев на странице сайта. Вот код для этого:

query("SELECT * FROM `comments` WHERE `page_id`="$page_id""); //Вытаскиваем все комментарии для данной страницы while ($row = $result_set->fetch_assoc()) { print_r($row); //Вывод комментариев echo "
"; } ?>

Вот и все! Наша простая форма комментариев ля сайта создана и может работать на сайте.

Но это конечно не для новичка, который не станет копаться со всеми этими кодами HTML, PHP и MySQL. Также не станет изучать, как создать базу данных. Ему нужно все сразу, быстро и без головной боли. Я прав? Конечно прав!

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

Системы комментариев для сайта. Какую выбрать?

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

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

Поэтому давайте рассмотрим как сделать комментарии на сайте и какую систему комментирования выбрать, как наиболее оптимальный вариант?

Вообще комментарии на сайтах выводятся многими способами. Это и специальные плагины для wordpress движков и комментарии от социальных сетей всевозможные, такие как например Вконтакте , Facebook , Disqus . Также есть независимые сервисы, которые предлагают свои системы комментариев для сайта, например .

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

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

Шаг 1 - XHTML

Сначала посмотрим на разметку комментария. Данный код генерируется PHP с классом Comment .

demo.php

Имя пользователя
30 Jun 2010

Текст комментария

div avatar содержит ссылку (если пользователь ввел правильный URL при размещении комментария) и изображение аватара, которое мы получаем с gravatar.com . Мы вернемся к формированию разметки на шаге PHP. В завершении следуют div name div time и текст комментария.

Другим важным элементом в XHTML является форма комментария. Она отправляется с помощью POST . Все поля, кроме URL, должны быть заполнены.

demo.php

Добавить комментарий

Форма отправляется с помощью AJAX. Проверка выполняется в фоновом режиме в submit.php . Каждое поле имеет соответствующий элемент label , с установленным атрибутом for .

Шаг 2 - PHP

PHP обрабатывает коммуникацию с базой данных MySQL и генерирует разметку для комментария. Он также получает окончание запроса AJAX и вставляет данные комментария в таблицу comments .

demo.php

/* / Выбираем все комментарии и наполняем массив $comments объектами */ $comments = array(); $result = mysql_query("SELECT * FROM comments ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) { $comments = new Comment($row); }

Запрос MySQL выбирает все записи из таблицы и заполняет массив $comments объектами класса comment . Данный массив выводится далее при выполнении скрипта.

demo.php

/* / Вывод комментариев один за другим: */ foreach($comments as $c){ echo $c->markup(); }

Каждый комментарий имеет метод markup() , который генерирует правильный HTML код, готовый для вывода на страницу. Ниже приведены определения класса и метода.

Класс получает строку из базы данных (получаемую с помощью mysql_fetch_assoc() ) и сохраняет ее в переменной $data . Она доступна только методу класса.

comment.class.php - Часть 1

class Comment { private $data = array(); public function __construct($row) { /* / Конструктор */ $this->data = $row; } public function markup() { /* / Данный метод выводит разметку XHTML для комментария */ // Устанавливаем псевдоним, чтобы не писать каждый раз $this->data: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url"]){ // Если был введн URL при добавлении комментария, // определяем открывающий и закрывающий теги ссылки $link_open = ""; $link_close = ""; } // Преобразуем время в формат UNIX: $d["dt"] = strtotime($d["dt"]); // Нужно для установки изображения по умолчанию: $url = "http://".dirname($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])."/img/default_avatar.gif"; return "
".$link_open." ".$link_close."
".$link_open.$d["name"].$link_close."
".date("d M Y",$d["dt"])."

".$d["body"]."

"; }

Скрипт использует gravatar для представления аватара в комментариях. Gravatar - это очень полезный сервис, который устанавливает соответствие аватара с email адресом. Изображение аватара может быть легко получено с помощью передачи кодированного функцией md5() вашего email адреса на gravatar.com.

Скрипт определяет адрес URL, на котором выполняется, и определяет точный адрес изображения default_avatar.gif . Данное изображение передается на параллельно с хэшем md5, и если никакого аватар не было найдено для переданного email адреса, то будет выведено альтернативное изображение.

comment.class.php - Часть 2

public static function validate(&$arr) { /* / Данный метод используется для проверки данных отправляемых через AJAX. / / Он возвращает true/false в зависимости от правильности данных, и наполняет / массив $arr, который преается как параметр либо данными либо сообщением об ошибке. */ $errors = array(); $data = array(); // Используем функцию filter_input, введенную в PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))) { $errors["email"] = "Пожалуйста, введите правильный Email."; } if(!($data["url"] = filter_input(INPUT_POST,"url",FILTER_VALIDATE_URL))) { // Если в поле URL был введн неправильный URL, // действуем так, как будто URL не был введен: $url = ""; } // Используем фильтр с возвратной функцией: if(!($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) { $errors["body"] = "Пожалуйста, введите текст комментария."; } if(!($data["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) { $errors["name"] = "Пожалуйста, введите имя."; } if(!empty($errors)){ // Если есть ошибки, копируем массив $errors в $arr: $arr = $errors; return false; } // Если данные введены правильно, подчищаем данные и копируем их в $arr: foreach($data as $k=>$v){ $arr[$k] = mysql_real_escape_string($v); } // email дожен быть в нижнем регистре: $arr["email"] = strtolower(trim($arr["email"])); return true; }

Метод validate() (также часть класса) определен как static . Это означает, что его можно вызвать непосредственно с помощью конструкции Comment::validate() , без создания объекта класса. Данный метод проверяет данные, которые передаются через AJAX.

Метод использует новую функцию фильтра, которая стала доступна в PHP 5.2.0 . Таким образом мы можен легко проверить и отфильтровать данные, которые передаются скрипту. Например, filter_input(INPUT_POST,’url’,FILTER_VALIDATE_URL) означает, что мы проверяем, является ли $_POST["url"] правильным адресом URL. Если это так, то функция возвращает значение переменной, в другом случае она возвращает значение false .

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

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

comment.class.php - Часть 3

private static function validate_text($str) { /* / Данный метод используется как FILTER_CALLBACK */ if(mb_strlen($str,"utf8")<1) return false; // Кодируем все специальные символы html (<, >, ", & .. etc) и преобразуем // символ новой строки в тег
: $str = nl2br(htmlspecialchars($str)); // Удаляем все оставщиеся символы новой строки $str = str_replace(array(chr(10),chr(13)),"",$str); return $str; }

Последний метод validate_text передаётся в качестве возвратной функции в два вызова filter_input . Он преобразует все специальные символы HTML, что эффективно блокирует атаки XSS. Также он заменяет символы новой строки тегами
.

submit.php

/* / Данный массив будет наполняться либо данными, / которые передаются в скрипт, / либо сообщениями об ошибке. /*/ $arr = array(); $validates = Comment::validate($arr); if($validates) { /* Все в порядке, вставляем данные в базу: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]."", "".$arr["url"]."", "".$arr["email"]."", "".$arr["body"]."")"); $arr["dt"] = date("r",time()); $arr["id"] = mysql_insert_id(); /* / Данные в $arr подготовлены для запроса mysql, / но нам нужно делать вывод на экран, поэтому / готовим все элементы в массиве: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); /* Вывод разметки только-что вставленного комментария: */ echo json_encode(array("status"=>1,"html"=>$insertedComment->markup())); } else { /* Вывод сообщений об ошибке */ echo "{"status":0,"errors":".json_encode($arr)."}"; }

submit.php получает комментарий из данных через запрос AJAX. Проверяет его и выводит объект JSON, в котором содержится либо разметка XHTML с вставленным комментарием, либо список ошибок. jQuery использует свойство status для определения того, что нужно выводить - либо сообщение об ошибках, либо добавлять разметку комментария к странице.

Ниже приводятся два примера.

Успешный ответ

{ "status": 1, "html": "Html Code Of The Comment Comes Here..." }

Свойство html содержит код комментария.

Ответ об ошибке

{ "status": 0, "errors": { "email": "Please enter a valid Email.", "body": "Please enter a comment body.", "name": "Please enter a name." } }

При наличии ошибки jQuery проходит циклом по объекту ошибок и выводит сообщения рядом с полями, в которых есть ошибки.

Шаг 3 - CSS

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

styles.css - Часть 1

.comment, #addCommentContainer{ /* Стиль для комментариев */ padding:12px; width:400px; position:relative; background-color:#fcfcfc; border:1px solid white; color:#888; margin-bottom:25px; /* Скругленные углы и тени CSS3 */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow:2px 2px 0 #c2c2c2; -webkit-box-shadow:2px 2px 0 #c2c2c2; box-shadow:2px 2px 0 #c2c2c2; } .comment .avatar{ /* / Аватар позиционируется абсолютно. / Внешнее смещение для div комментария /*/ height:50px; left:-70px; position:absolute; width:50px; background:url("img/default_avatar.gif") no-repeat #fcfcfc; /* Центрируем вертикально: */ margin-top:-25px; top:50%; -moz-box-shadow:1px 1px 0 #c2c2c2; -webkit-box-shadow:1px 1px 0 #c2c2c2; box-shadow:1px 1px 0 #c2c2c2; }

div .comment и #addCommentContainer имеют одинаковый стиль. Используется несколько правил CSS3 для скругления углов и отражения теней.

styles.css - Часть 2

.comment .avatar img{ display:block; } .comment .name{ font-size:20px; padding-bottom:10px; color:#ccc; } .comment .date{ font-size:10px; padding:6px 0; position:absolute; right:15px; top:10px; color:#bbb; } .comment p, #addCommentContainer p{ font-size:18px; line-height:1.5; overflow-x:hidden; } #addCommentContainer input, #addCommentContainer textarea{ /* Стиль для ввода */ display:block; border:1px solid #ccc; margin:5px 0 5px; padding:3px; font-size:12px; color:#555; font-family:Arial, Helvetica, sans-serif; } #addCommentContainer textarea{ width:300px; } label{ font-size:10px; } label span.error{ color:red; position:relative; right:-10px; } #submit{ /* Кнопка "Отправить" */ background-color:#58B9EB; border:1px solid #40A2D4; color:#FFFFFF; cursor:pointer; font-family:"Myriad Pro",Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold; padding:4px; margin-top:5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } #submit:hover{ background-color:#80cdf5; border-color:#52b1e2; }

Во второй части мы задаем стили для комментариев и элементов формы. Отметим селектор input, который выделяет элементы в зависимости от атрибута type .

Шаг 4 - jQuery

Теперь перейдем к jQuery.

script.js

$(document).ready(function(){ /* Следующий код выполняется только после загрузки DOM */ /* Данный флаг предотвращает отправку нескольких комментариев: */ var working = false; /* Ловим событие отправки формы: */ $("#addCommentForm").submit(function(e){ e.preventDefault(); if(working) return false; working = true; $("#submit").val("Working.."); $("span.error").remove(); /* Отправляем поля формы в submit.php: */ $.post("submit.php",$(this).serialize(),function(msg){ working = false; $("#submit").val("Submit"); if(msg.status){ /* / Если вставка была успешной, добавляем комментарий / ниже последнего на странице с эффектом slideDown /*/ $(msg.html).hide().insertBefore("#addCommentContainer").slideDown(); $("#body").val(""); } else { /* / Если есть ошибки, проходим циклом по объекту / msg.errors и выводим их на страницу /*/ $.each(msg.errors,function(k,v){ $("label").append(""+v+""); }); } },"json"); }); });

Мы используем вызов функции $(document).ready() , которая привязывает функцию к событию . Переменная working действует как флаг, который сигнализирует о том, что запрос AJAX находится в работе (таким образом предотвращается дублирование одного и того же комментария).

В возвратной функции для запроса POST AJAX мы проверяем свойство status , чтобы определить, был ли успешно вставлен комментарий. Если да, мы добавляем полученную разметку на страницу после последнего комментария с анимацией slideDown .

Если были проблемы, то мы выводим сообщения об ошибках, добавляя span error к соответствующему элементу label (атрибут элемента label содержит id ввода, который имеет ошибку).

Готово!

Заключение

Чтобы запустить скрипт на вашем сервере нужно создать таблицу comments в вашей базе данных MySQL. Вы можете сделать это с помощью кода SQL из файла table.sql , который надо ввести на закладке SQL в phpMyAdmin. Затем нужно установить параметры соединения с базой данных MySQL в файле connect.php .

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

Комментарии помогают строить сообщество

Теперь пользователи приходят к вам не просто что бы прочитать какую-то новость или статью, но ещё и для того что бы её обсудить.

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

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

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

Комментарии это обратная связь и мотивация

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

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

Что нам нужно от системы комментирования?

Так какими же должны быть «правильные» комментарии на современном сайте?

  • Простыми и понятными для читателей.
  • Удобными и функциональными для администраторов.

Какие варианты есть на данный момент у веб-мастера?

Виджеты социальных сетей

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

Множество минусов

Русскоязычные сервисы

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

SV Kament

Единственным исключение тут стоит система SV Kament (svkament.ru) которая полностью бесплатна и собирает воедино функционал различных западных систем комментирования, но при этом ориентирована на русскоязычный сегмент.

Давайте вкратце рассмотрит что бы мы хотели видеть в нашей системе комментирования.

Древовидные комментарии с возможностью сворачивать отдельные ветки обсуждения. Очень помогают ориентироваться в обсуждении, когда комментариев становится много.

Социальный логин - значительно упрощает регистрацию и как результат увеличивает количество комментариев. Западные исследования показывают что использование социального логина порой увеличивает конверсию более чем на 60%.

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

Работа в реальном времени - чем удобнее и быстрее работает система, тем больше ей пользуются и чаще пишут комментарии.

Уведомления на почту - как часто мы теряем потенциальные комментарии только потому, что пользователь не знает, что кто-то ответил на его предыдущее сообщение.

С точки зрения управления

  • Управление прямо на сайте.

  • Информация о пользователях.

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

Так же есть ряд интересных возможностей у системы SV Kament.

  • Социальные трансляции - позволяют «вернуть» общение на ваш сайт из социальных сетей. Если у вас есть группа в Вконтакте, в которой вы размещаете анонсы новых статей на сайте, то зачастую часть обсуждения статей остаётся в комментариях к самой записи, и было бы здорово транслировать эти комментарии обратно на ваш сайт.

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

Всё и сразу?

Есть довольно распространенная практика размещать сразу несколько систем комментирования, например отдельно виджет ВКонтакте, отдельно Facebook, отдельно для всех остальных.

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

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

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

А какими комментариями пользуетесь вы? Считаете ли вы комментарии важными для вашего сайта, и насколько удобной и эффективными считаете комментарии на своём сайте?