Система комментариев для сайта с помощью PHP
Общение всегда привлекало пользователей. Ведь люди хотят общаться, делиться впечатлениями и задавать различные вопросы. Но создавая сайт не каждый начинающий разработчик может осуществить систему комментариев у себя на сайте, да и так, чтобы она имела привлекательным вид, кроме того пользователям присваивался персональный аватар. На нашем сайте уже не раз возникали просьбы, объяснить, показать или просто навести пример как данную функцию можно реализовать у себя на сайте.
Вы можете найти много интересных материалов для себя, а также бесплатные шаблоны и не только у наших партнеров ниже, попробуйте и не пропустите интересные предложения:
В данном уроке мы расскажем и наглядно покажем как сделать отличную систему комментариев для сайта с помощью PHP ,MySQL и AJAX. Также будет использована интеграция с
demo.php
div avatar содержит ссылку (если пользователь ввел правильный URL при размещении комментария) и изображение аватара, которое мы получаем с
demo.php
Добавить комментарий |
Форма отправляется с помощью AJAX. Проверка выполняется в фоновом режиме в submit.php. Каждое поле имеет соответствующий элемент label, с установленным атрибутом for.
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 код, готовый для вывода на страницу. Ниже приведены определения класса и метода. Класс получает строку из базы данных (получаемую с помощью
comment.class.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
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’].' ‘; } |
Скрипт определяет адрес URL, на котором выполняется, и определяет точный адрес изображения default_avatar.gif. Данное изображение передается на параллельно с хэшем md5, и если никакого аватар не было найдено для переданного email адреса, то будет выведено альтернативное изображение.
comment.class.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
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)
comment.class.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
private static function validate_text($str) { /* / Данный метод используется как FILTER_CALLBACK */
if(mb_strlen($str,’utf8′) 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/* / Данный массив будет наполняться либо данными, / либо сообщениями об ошибке. /*/
$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 проходит циклом по объекту ошибок и выводит сообщения рядом с полями, в которых есть ошибки.
Теперь, когда разметка правильно генерируется и отображается на странице, мы можем перейти к заданию стилей.
styles.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
.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[type=text], #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=text], который выделяет элементы в зависимости от атрибута type. Теперь рассмотрим jQuery.
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
$(document).ready(function(){ /* Следующий код выполняется только после загрузки DOM */
/* Данный флаг предотвращает отправку нескольких комментариев: */ var |
Скрипты комментариев на PHP. Скрипт добавления комментариев PHP. Скрипт комментариев для сайта на языке PHP.
Главная Страница » Скрипт добавления комментариев
eComment
PHP скрипт «eComment», распространяется под слоганом «экологически чистое комментирование». Он не требует базы данных, сложной интеграции или отдельных страниц администрирования. Вся система состоит из трех файлов: исполняемого РНР …
SkyCom
Бесплатный скрипт комментариев, написанный на PHP. Использует базу данных MySQL. Код содержит комментарии и всегда можно внести нужные изменения.
rche
Вашему вниманию скрипт комментарием на PHP с использованием Ajax, jQuery (отправка комментариев без перезагрузки страницы), для хранение комментариев используется база данных mySQL. Данный скрипт подойдет …
MPCS — Multi-Page Comment System
Код скрипта комментариев генерируется отдельно для каждой страницы и может быть использован бесконечно. В программу MPCS так же интегрирована защита от спаммеров – CAPTCHA, которая позволяет отсечь всех роботов.
Commentics
Commentics – это бесплатный скрипт комментариев для сайта, на языке PHP который включает в себя множество функций. Профессионально написанный скрипт открытого программного обеспечения.
GentleSource Comments
GentleSource Comments – это скрипт написанный на языке PHP, который может быть легко интегрирован в любой сайт. Скрипт Comments позволяет посетителям оставлять свои комментарии на определённой странице.
Поделиться с друзьями
15 WordPress плагинов для комментариев / WordPress плагины / Постовой
Комментарии — важнейший блок в любом блоге. Они способствуют росту трафика и повышению лояльности посетителей. WordPress имеет встроенную систему комментариев. Однако, она не идеальна, и в большинстве случаев нуждается в доработке. В этой статье собраны плагины, которые расширяют стандартный функционал системы комментариев WordPress или же заменяют ее вовсе.
Смотрите также:
8 плагинов отзывов и комментариев для WordPress
20 лучших плагинов чата на WordPress
HyperComments
Почему люди заменяют стандартные комментарии WordPress на такие, которые работают с помощью стороннего API? Стандартные комментарии неудобны. В частности, для гостей. Нет возможности авторизации через социальные сети и пр.HyperComments решает все проблемы. Как по мне — это лучшее и наиболее удобное решение на рынке. В отличии от тех же Disqus, HyperComments имеет намного более удобный механизм авторизации через социальные сети. В остальном они очень похожи.
На Постовом, кстати, также используются комментарии от HyperComments.
Стоимость: Бесплатно (Есть тарифные планы, включая FREE)
Postmatic
Postmatic позволит пользователям оставлять комментарии под постами и подписываться на email рассылку о комментариях от других людей. Можно отвечать на чужие комментарии, не переходя на сайт, прямо из своего почтового ящика.Стоимость: Бесплатно
Comments Leaderboard
Comments Leaderboard разработан, чтобы мотивировать пользователей вашего сайта комментировать посты. Плагин очень простой в настройке, просто добавьте виджет на страницу и настройте оформление.Стоимость: Бесплатно
Disqus Comment System
Этот сервис и инструмент специально разработан для обсуждений. Он сделает комментирование на вашем сайте более интерактивным. Плагин Disqus для WordPress использует Disqus API и синхронизируется с комментариями на WordPress.Стоимость: Бесплатно (Есть тарифные планы)
WordPress Comment Rating Plugin
WordPress Comment Rating Plugin добавляет иконки для оценки комментария. Плагин также позволит сортировать комментарии по их рейтингу.Стоимость: $21
User Agent Comments
Плагин определяет, какие браузеры и операционные системы используют пользователи вашего сайта и добавляет соответствующие иконки рядом с их именами в комментариях.Стоимость: Бесплатно
Commentator
WordPress плагин Commentator добавит на ваш сайт полноценную систему комментариев.Стоимость: $17
WP Ajaxify Comments
Плагин WP Ajaxify Comments интегрируется в любую WordPress тему и расширяет функционал формы для комментирования. Он отправляет комментарии пользователей на сервер, не обновляя всю страницу. В случае ошибок, плагин отображает их причины, и пользователь может исправить всё, не возвращаясь на предыдущую страницу. Если комментарий успешно прошел на сайт, то плагин добавит его к уже существующим, не покидая страницы.Стоимость: Бесплатно
wpDiscuz
Новая и интерактивная система комментирования, которая использует AJAX. Разработана, чтобы заменить стандартное комментирование в WordPress. Очень быстрая, адаптивная и с множеством полезных функций. Если вы хотите хранить комментарии в своей базе данных, то это лучшая альтернатива Disqus.Стоимость: Бесплатно
Simple Ajax Insert Comments
Simple Ajax Insert Comments это маленький, но функциональный плагин, который позволяет просто и быстро добавлять комментарии. Плагин не перегружает страницу при отправке комментариев, так как использует Ajax, jQuery и PHP.Стоимость: $19
Disable Comments
Плагин позволяет отключить комментирование всех постов в независимости от их вида. Плагин также убирает из меню редактирования все поля, связанные с комментариями в случае их отключения.Стоимость: Бесплатно
No Page Comment
Этот плагин позволяет настроить блокировку комментирования постов по умолчанию, а также с ним можно блокировать комментирование отдельных постов.Стоимость: Бесплатно
Hotspots with Comments
Hotspots with comments позволит вашим пользователям оставлять на изображениях так называемые хот-споты — активные места с комментариями.Стоимость: $17
Comment Attachment
Благодаря этому плагину пользователи смогут добавлять к своим комментариям файлы: документы, изображения и тому подобное.Стоимость: Бесплатно
Comments Lightbox
Этот плагин будет открывать комментарии на вашем сайте с эффектом lightbox, не перегружая при этом страницу. Comments Lightbox не требует настройки и автоматически настраивает свой внешний вид под тему сайта.Стоимость: $16
Какую форму комментариев использовать / Habr
Функциональная вещь красива. Если вещь некрасива — вероятно, она и нефункциональна. Это касается и нашего случая с комментариями: мало того, что это выглядит неэстетично — это ещё и неудобно. Например, иногда можно просто не заметить, что на сайте есть плагин второй соцсети, если не промотать страницу вниз.
Что дальше?
Во-первых, надо зафиксировать факт: форма комментария в которой ты уже залогинен действительно увеличивает количество комментариев. Поэтому социальным плагинам Фейсбука и Вконтакте — быть.
Во-вторых, собственная форма комментариев не нужна. Только если вы не обладает собственной базой активных зарегистрированных пользователей — в этом случае, вероятно, вы не используете плагины социальных сетей. Если же вы недавно запустились и/или вас никто не комментирует — не льстите себе надеждой, что однажды люди начнут регистрироваться, чтобы оставить у вас комментарий. Не начнут.
Как должно быть?
На мой взгляд, всё очень просто: необходимо разнести форму комментирования через ФБ и комментарии через Вконтакте по отдельным вкладкам.
Сорри за пейнт
в WordPress, как выяснилось, такое уже есть:
А вот так это выглядит на сайте Russia Today:
Основной должна стоять та соцсеть, пользователи которой заходят к вам чаще. Выбор пользователя нужно запоминать, и при повторном визите уже показывать ему вкладку с его соцсетью. Т.к. основной ресурс любого сайта — это всё-таки возвращающиеся пользователи, заходящие на него с той или иной периодичностью, такой подход себя окупит.
В принципе, такую форму комментариев можно выпустить в виде отдельного плагина, как тот же Disqus, только проще и удобнее. Ведь не все захотят переделывать форму комментариев, делать вкладки, запоминание выбора пользователей. На плагин, в котором это всё уже есть будет спрос.
Ну а что же Disqus? Это замечательная система, но она не поддерживает Вконтакте. Это портит всю малину. Если Disqus сделает поддержку Вконтакте, то у него отличные перспективы на нашем рынке. Или если у нас кто-то сделает свой Дискус с блэкджеком и шлюхами авторизацией через ВК. Тоже мысль.
Плагин комментариев WordPress | WordPress Mania
Здравствуйте, товарищи! Сегодня предлагаю вашему вниманию для вашего сайта отличный плагин комментариев WordPress. Естественно, если у вас веб-ресурс, как мой данный блог, то можно обойтись и родными комментариями, а вот для сайта с другой тематикой (новости, кулинария, медицина и т. д.) нужна более удобная форма комментариев. Желательно конечно — комментарии в реальном времени, особенно на новостных сайтах, где комментируют много и часто.
Комментарии отзывчивые, подходят для всех размеров экрана
Предлагаемый мной плагин называется wpDiscuz, разработанный специально, чтобы расширить собственные WordPress комментарии. Главное, вам не придётся подключать сторонний сервис системы комментариев, таких как Disqus, Livefyre или hypercomments, если вы хотите сохранять все комментарии в вашей базе данных.
Disqus — один из лучших плагинов WordPress для комментариев. Однако разработчики добавили рекламу в плагин и создали платные планы, которые включают возможность отключения рекламы. Этот сервис стал менее привлекательным, и пользователи начали переходить на другие решения.
Плагин wpDiscuz бесплатный и есть наш родной и могучий русский язык. 100% настраиваемый — цвета, поля, кнопки, фон, функции и так далее. Есть также функция подписки на комментарии и поэтому от плагина Subscribe To Comments можно смело избавиться. Вообщем, достоинств много, все и не перечислить.
Дополнительная инфа на странице плагина — https://wordpress.org/plugins/wpdiscuz/. А теперь, дамы и господа, немного пройдёмся по настройкам плагина комментариев и посмотрим, как форма комментирования выглядит.
Плагин — комментарии wpDiscuz для WordPress
Плагин комментариев WordPress это — система комментариев в реальном времени AJAX с настраиваемой формой комментариев и полями. Плагин комментариев WordPress предназначен для замены собственных/стандартных комментариев WP. Супер быстрый и отзывчивый с десятками функций.
Комментарии wpDiscuz
Установить модуль можно стандартным способом, через админ панель. После активации wpDiscuz переходите к его настройкам, для этого на панели управления «Комментарии» нажимаете нужный раздел:
Раздел настроек комментариев
Порядок настройки выбирайте сами. Как уже сказано, плагин поддерживает русский язык и поэтому проблем у вас не возникнет. В разделе Forms настройте нужные поля для формы, не нужные можно не отображать (убрать галочку) или наоборот, добавить новые (нажав плюсик):
Настройка полей для формы комментариев
По умолчанию форма состоит из 4 полей:
- Имя; Емейл;
- Веб-сайт;
- капча.
Многие вебмастера удаляют поле вебсайт (зависит от тематики сайта), так как у многих комментаторов его просто нет. Поле можно убрать при редактирование (в стандартных комментах поле для ввода сайта удаляется просто, читаем тут) — нажимаете на карандашик и снимаете галочку на против Enable. И после всех изменений не забудьте нажать кнопку «Обновить».
Основные настройки плагина происходят в пункте «Настройки». Страница с основными настройками состоит из нескольких вкладок, где вы можете настроить Comments-wpDiscuz под свои нужды:
Основные настройки wpDiscuz Вкладка — Styling
Не забудьте заглянуть во вкладку Вход через социальные сети. Вы можете использовать одну из наиболее популярных плагинов входа через социальные сети, чтобы комментировать с учетной записи Facebook, Twitter, WordPress, Вконтакте и т.д. Все кнопки социальных сетей будут интегрированы в форму комментарий:
Вход через социальные сети
С остальными настройками сами разберётесь, там всё понятно и просто.
Важно: Если у вас установлен плагин кэширования, то удалите все кэши после обновления wpDiscuz.
После настроек загляните на сайт и вы увидите вот такую красоту (цвета по умолчанию):
Комментарии для сайта WordPress
И так, с комментариями:
WordPress комментарии
Как вы видите в форме комментариев есть всё, что нужно для полноценного общения с посетителями сайта. К стати, есть функция обновления комментариев в реальном времени, очень удобно для общения. А так выглядят комментарии в тёмном стиле:
Комментарии wpDiscuz — тёмный стиль
Что будет со старыми комментариями?
Ничто не будет потеряно! Комментарии — wpDiscuz покажет все старые комментарии.
Вот пожалуй и всё, о чём я хотел вам поведать, а напоследок, для разнообразия взгляните ещё на один простой плагин.
Эпоха (Epoch) — 100% чат в реальном времени и комментирования, который полностью кэш-совместимый. Тоже можно использовать, как альтернативу Disqus.
WordPress комментарии Epoch
WordPress комментарии плагин Epoch
Прочитать полное описание можно на странице плагина — https://wordpress.org/plugins/epoch/. Поток комментариев обновляется в режиме реального времени. Сам не устанавливал его и поэтому скриншотов своих нет. Покажу картинки чужие:
Форма интегрируется с любой темой и гармонирует с вашим сайтом
И ещё:
Эпоха — 100% мобильный и полностью отзывчивый
Пробуйте. Хотя первый мне больше нравится. Сейчас с вами попрощаюсь и пойду установлю его (wpDiscuz) на свой кулинарный сайт — Я Поварёнок. Давно хотел там заменить невзрачную форму комментирования на более удобную и естественно — симпатичную.
В заключение
Есть плюсы и минусы в каждой системе комментирования в Вордпресс. Поэтому утверждать что, это — самая, самая лучшая в мире система комментирования для WordPress — невозможно.
Для кого то, встроенная система комментариев блога вполне подходит, а кому то нет. Если вы в настоящее время используете систему комментирования, которой вы недовольны , то смело меняйте её. Для большей функциональности для вашего раздела комментариев, я рекомендую выбрать одну из систем комментирования — wpDiscuz или AnyComment.
Друзья, пожалуйста, оставляйте комментарии — угодил ли вам я с WordPress комментариями или как? До встречи. Пока, пока! А женский пол — чмоки, чмоки. Увидимся. 🙂
P.S. Установил комментарии на сайт Я Поварёнок, как и обещал:
Комментарии на сайте Я Поварёнок
По умолчанию цвета принимают дизайн веб-ресурса, надо бы сделать кнопки «Ответить» и «Редактировать» чуть ярче. Хотя, может так и лучше, зато в глаза не бросаются. Как и просил вас, оставьте отзыв свой — понравились комментарии или нет?
Комментарии для современного сайта | htmlbook.ru
В наше время многие популярные сайты это не только источник информации, но и место, где эту информацию можно обсудить с другими пользователями, сайты зачастую превращаются в центры, вокруг которых формируется сообщество.
Комментарии помогают строить сообщество
Теперь пользователи приходят к вам не просто что бы прочитать какую-то новость или статью, но ещё и для того что бы её обсудить.
Что характерно — узнать саму новость читатель мог и в другом месте, но именно сообщество интересных людей, возможность высказаться и услышать их мнение — вот что приведёт к тому, что он посетит ваш сайт и зайдёт на страницу с новостью, которую и так знает.
Ещё лет десять назад центрами, вокруг которых кипела вся жизнь, были форумы. Однако в наше время это уже не так удобно и популярно, сейчас большинство популярных сайтов работают в формате блогов, а общение пользователей происходит в комментариях.
Таким образом, именно комментарии являются тем фактором, который отличает обычные сайты от сайтов, по настоящему успешных в своей сфере. Это касается новостных сайтов, блогов, сообществ по интересам, порой даже интернет-магазинов и различных специализированных сайтов.
Комментарии это обратная связь и мотивация
Так же важно помнить, что комментарии это источник обратной связи с читателями, который позволяет узнать что именно им нравится и на что читатели реагируют. А чем лучше и интереснее для посетителей ваш сайт, тем чаще они к вам возвращаются и рекомендуют его.
К тому же обратная связь — это всегда хорошая мотивация для самих авторов и администраторов, которая почти мгновенно позволяет почувствовать, что людям интересно и то что вы делаете и ваш сайт. Простым счётчиком посетителей такого не добьешься.
Что нам нужно от системы комментирования?
Так какими же должны быть «правильные» комментарии на современном сайте?
- Простыми и понятными для читателей.
- Удобными и функциональными для администраторов.
Какие варианты есть на данный момент у веб-мастера ?
- Если сайт построен на популярной CMS, то можно использовать готовый плагин.
- Воспользоваться сторонним универсальным скриптом.
- Воспользоваться сторонним сервисом.
Скрипт или сервис?
Сервисы комментирования появились несколько лет назад и за это время обрели огромную популярность на западе, а в последние годы начали набирать популярность в Рунете
Преимущества
- Простая установка и использование, никакой возни со скриптами, файлами, базами данных. Достаточно просто вставить простой html там, где должен быть блок с комментариями.
- Облачная система уменьшает нагрузку на ваш сервер, все данные грузятся независимо.
- Специализированная система — это богатый функционал, регулярные обновления и дополнения.
Из чего можно выбрать?
- Сервисы от социальных сетей — виджеты комментариев Вконтакте и Facebook.
- Западные сервисы типа Disqus, Livefyre, IntenceDebate.
- Русскоязычные аналоги.
Виджеты социальных сетей
Плюс только один — довольно высока вероятность того, что пользователь уже залогинен в социальной сети и поэтому ему не придется регистрироваться.
Множество минусов
- Позволяют писать комментарии только пользователям своей социальной сети, ограничивая всех остальных.
- Не индексируются поисковиками.
- Имеют крайне бедный функционал, вплоть до невозможности вывести количество комментариев.
Западные сервисы комментирования
Практически все платные, с начальной ценой от 2000-3000$ в месяц.
Исключение — Disqus, который предоставляет большинство своих функций бесплатно. Однако в русскоязычном интернете его использование довольно неудобно по ряду причин:
- нет поддержки русскоязычных социальных сетей — а западные Facebook и Twitter покрывают крайне малую долю нашей сети;
- нет полной локализации, регулярно встречающиеся не переведённые надписи и англоязычные письма могут оттолкнуть пользователей.
Русскоязычные сервисы
Русскоязычные аналоги зачастую полностью платные и не могут похвастаться привлекательным дизайном.
Сервис Cackle
SV Kament
Единственным исключение тут стоит система SV Kament (svkament.ru) которая полностью бесплатна и собирает воедино функционал различных западных систем комментирования, но при этом ориентирована на русскоязычный сегмент.
Давайте вкратце рассмотрит что бы мы хотели видеть в нашей системе комментирования.
Древовидные комментарии с возможностью сворачивать отдельные ветки обсуждения. Очень помогают ориентироваться в обсуждении, когда комментариев становится много.
Социальный логин — значительно упрощает регистрацию и как результат увеличивает количество комментариев. Западные исследования показывают что использование социального логина порой увеличивает конверсию более чем на 60%.
Оценка комментариев — во-первых помогает выделить самые интересные и стоящие комментарии, что крайне удобно для читателей, а во-вторых стимулирует пользователей писать интересные сообщения.
Работа в реальном времени — чем удобнее и быстрее работает система, тем больше ей пользуются и чаще пишут комментарии.
Уведомления на почту — как часто мы теряем потенциальные комментарии только потому, что пользователь не знает, что кто-то ответил на его предыдущее сообщение.
С точки зрения управления
- Управление прямо на сайте.
- Информация о пользователях.
- Единая панель управления комментариями всего сайта.
- Возможность назначать модераторов.
- Простота установки.
Так же есть ряд интересных возможностей у системы SV Kament.
- Социальные трансляции — позволяют «вернуть» общение на ваш сайт из социальных сетей. Если у вас есть группа в Вконтакте, в которой вы размещаете анонсы новых статей на сайте, то зачастую часть обсуждения статей остаётся в комментариях к самой записи, и было бы здорово транслировать эти комментарии обратно на ваш сайт.
-
Рейтинг и статус пользователей — позволяет выделить самых активных и популярных посетителей, таким образом стимулируя ваших пользователей чаще заходить, больше общаться и писать сообщения интересные другим людям.
Всё и сразу?
Есть довольно распространенная практика размещать сразу несколько систем комментирования, например отдельно виджет ВКонтакте, отдельно Facebook, отдельно для всех остальных.
На мой взгляд это одно из худших решений, однако важно понимать какие именно цели преследуются.
Если нужно просто собрать отзывы пользователей — то этот способ имеет право на жизнь, хотя для этого может быть достаточно простой гостевой книги или даже адреса электронной почты.
Если же наша цель — создание сообщества и стимулирование общения пользователей, то такой подход крайне вреден, ведь разделяя комментарии, мы разделяем и само общение, таким образом вместо единого диалога получается кучка не связанных между собой сообщений.
А какими комментариями пользуетесь вы? Считаете ли вы комментарии важными для вашего сайта, и насколько удобной и эффективными считаете комментарии на своём сайте?
Конструируем форму для комментариев / Habr
Я, разумеется, не претендую на идеал, но сотни заполненных подобных форм позволяют мне высказать несколько мыслей.
Для начала предлагаю четче поставить задачу: необходимо сделать простую в использовании форму анонимного комментирования для сайта общего назначения. Под анонимностью я подразумеваю, что пользователь не зарегистрирован на этом сайте.
Шаг первый: ревизия полей
Проведем ревизию полей для заполнения и их необходимсть. Первое поле «Имя», не является обязательным. У некоторых сайтов анонимные комментарии вообще являются частью культуры. Убираем звездочку и подправляем метку (это понадобиться в дальнейшем). Аналогично поступаем с полем «E-mail». Поле «Веб-сайт» не является критически важным, во-первых, не у всех есть сайты и даже блоги, а, во-вторых, сайт автора не редко относиться к теме комментария, в противном случае его можно указать в теле комментария. Удаляем это поле.
Переставлять поля ввода местами не стоит, ведь на всех остальных сайтах они идут в таком же порядке.
Шаг второй: контролы
Делаем контролы стандартными, даже если они в результате «хуже смотрятся», но пользователь к ним привык. Я вставил контролы моего браузера и ОС. Также необходимо вставить кнопку «Просмотреть», и сменить название у кнопки «Комментировать» на стандартное в данном случае «Отправить», хотя второй момент немного спорный.
Опять теперь расположим кнопки в самом низу формы, как это обычно бывает. Для этого поднимем чекбокс над ними и сделаем более ясную метку.
Шаг третий: Web 2.0
Веб-два-ноль уже на дворе, так что и мы не останемся в стороне. Сделаем поддержку для логина через OpenID и ЖЖ. Первый вариант — просто разместить соответсвующие логотипы (с поясняющим тултипом) справа от поля для логина и спрашивать пароль при вводе соответствующего логина (например, [email protected]). Пароль придется справшивать через JS, чтобы не создавать поле ввода пароля, ненужное для тех, кто не пользуется OpenID.
Также надо добавить пояснения к полю ввода адреса электронной почты, чтобы пользователь не боялся ее оставлять. И дополнительно добавим ссылку на RSS с комментариями.
Шаг четвертый: визуальный редактор
Не все знают HTML, но многие хотят создавать комментарии с ссылками, картинками и элементами форматирования. Нужно ли позволять делать это анонимным посетителям вопрос, конечно, спорный, и какие элементы форматирования разрешать должен решать владелец сайта (и не забываем про XSS!).
Я вставил обычный визуальный редактор Tiny MCE и добавил к нему счетчик символов.
Шаг пятый: контекст или как сделать форму легче
Форма у нас получилась немного тяжеловатая. Этот пункт шаг — для тех, кто так считает. Форма у нас не сама по себе, а находиться на сайте. Поэтому мы можем убрать ссылку на RSS, и добавить ленту с комментариями в саму страницу. Также можно заменить логотоипы OpenID и ЖЖ на текст, как итог форма полегчала.
Постскриптум: что еще можно доработать
- каптча — поскольку форма для «анонимусов»
заголовок формы
ввод пароля для OpenID в этой же форме
растягивающееся поле ввода
большее по размеру поле ввода (вы знаете почему в супермаркетах такие большие тележки? 🙂 )Думаю, если данная статья заинтересует читателей можно воплотить в жизнь все выше описанное.Изображения при загрузке на хабр почему-то немного утратили резкость 🙁
Update: несколько людей сделали очень интересное предложение по оптимизации — показывать поле для ввода E-mail, только если стоит чекбокс для подписки на новости.
Отправить ответ