Как сделать комментарии на сайте

HTML, как добавить комментарий

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

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

Или ты просто хочешь оставить себе напоминание, о том, что должно быть сделано.

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

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

HTML комментарий из одной строки

Простейший комментарий состоит из одной строки. Текст нужно разместить между последовательностью символов :

 h1>А это - заголовок. Он будет отображаться на странице.h1>

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

HTML комментарий из нескольких строк

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

 Многострочный комментарий. В нем поместится очень много информации. Может даже целая книга. --> 

Если внутри комментария будут расположены какие-то HTML теги, то их на странице видно не будет.

 
Закомментированный заголовок
 
Этот абзац тоже не будет виден
 --> 

Ошибки

Ошибки в HTML комментариях чаще всего связаны с лишним пробелом или пропущенным восклицательным знаком:

 !-- Неправильный комментарий #1 --> -- Неправильный комментарий #2 --> 

Оба комментария написаны неправильно и будут отображаться на HTML странице.

Как сделать комментирование на сайте

Очень часто у меня спрашивают, как сделать комментирование на сайте на PHP. Я решил не объяснять на пальцах каждому, а просто написать статью, в которой показать, как делается комментирование на сайте с использованием PHP и MySQL.

Мы сейчас будем разбирать PHP-код для создания комментирования на сайте, где имеется множество страниц, на каждой из которых свои комментарии. Например, таким образом, реализовано у меня. Это самый популярный вариант, когда у каждой страницы (статьи, поста и прочего) свой набор комментариев.

Первым делом, создаём таблицу в базе данных (пусть она называется comments), где будут храниться комментарии со следующими полями:

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

После создания таблицы, давайте создадим HTML-форму, которую нужно будет размещать на каждой странице, где Вы хотите разрешить добавление комментариев:

Единственная особенность данного HTML-кода — это input hidden. В value должен находиться уникальный идентификатор текущей страницы (статьи или поста).

Теперь займёмся обработкой формы. Для этого создаём файл comment.php с таким кодом:

/* Принимаем данные из формы */
$name = $_POST[«name»];
$page_id = $_POST[«page_id»];
$text_comment = $_POST[«text_comment»];
$name = htmlspecialchars($name);// Преобразуем спецсимволы в HTML-сущности
$text_comment = htmlspecialchars($text_comment);// Преобразуем спецсимволы в HTML-сущности
$mysqli = new mysqli(«localhost», «root», «», «db»);// Подключается к базе данных
$mysqli->query(«INSERT INTO `comments` (`name`, `page_id`, `text_comment`) VALUES (‘$name’, ‘$page_id’, ‘$text_comment’)»);// Добавляем комментарий в таблицу
header(«Location: «.$_SERVER[«HTTP_REFERER»]);// Делаем реридект обратно
?>

И, наконец, последняя стадия — это вывод комментариев на странице:

$page_id = 150;// Уникальный идентификатор страницы (статьи или поста)
$mysqli = new mysqli(«localhost», «root», «», «db»);// Подключается к базе данных
$result_set = $mysqli->query(«SELECT * FROM `comments` WHERE `page_id`=’$page_id'»); //Вытаскиваем все комментарии для данной страницы
while ($row = $result_set->fetch_assoc()) print_r($row); //Вывод комментариев
echo «
«;
>
?>

Вот и всё. Безусловно, это лишь база, необходимая для создания возможности комментирования на сайте. Здесь самое минимальное, что придётся сделать — это оформить внешний вид комментариев. Также надо обязательно проверить поступившие данные из формы. Также можно добавить дополнительные поля (например, e-mail ещё запрашивать).

Но всё это уже детали, а комментирование на PHP уже сделано.

Чтобы понять весь алгоритм и, главное, научиться самостоятельно создавать подобные скрипты, обязательно изучите PHP и MySQL, и в этом Вам поможет мой Видеокурс «PHP и MySQL с Нуля до Гуру«: http://srs.myrusakov.ru/php

Создано 01.02.2012 14:47:38

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 159 ):

fulky 01.02.2012 20:02:42

не понял с пунктом «вывод комментариев на странице» это создаётся ещё один php файл?? или все в одном? и ещё один вопрос, создал форму, как у вас и пхп файл, как нажимаю в форме кнопку отправить пишет вот такое: query(«INSERT INTO `comments` (`name`, `page_id`, `text_comment`) VALUES (‘$name’, ‘$page_id’, ‘$text_comment’)»);// Добавляем комментарий в таблицу header(«Location: «.$_SERVER[«HTTP_REFERER»]);// Делаем реридект обратно ?>

Admin 01.02.2012 20:06:20

Вы либо невнимательно читаете, либо Вам ещё просто рано про это вообще читать. Вы основы точно знаете? Теперь по вопросам: 1. Вывод комментариев на той же странице, где форма. 2. Как он может такое писать? Только если, конечно, Вы не открываете через file:///Z:\home. Если так, то забудьте про эту статью. С такой проблемой новички сталкиваются в первый день обучения PHP.

lion337 01.02.2012 22:51:51

Евгений вы для начала разберите алгоритм создания комментариев. Всё создаётся на одной или двух страницах. Допустим если на двух то: text.php //это файл для формы и вивода комментов update_comment.php //это фаил обработчик Вот и всё!

fulky 01.02.2012 20:14:16

сорри поспешил, ушел дальше разбираться

Nikitoz01 02.02.2012 13:00:10

Спасибо Михаил всё это знал только вот не знал как id страницы отправить спасибо!!

Karlen 03.02.2012 23:18:43

Салам! Михайил У меня вывод комментариев на странице не выходить. В базе MySQL данные есть но на странице нету!

Admin 03.02.2012 23:31:19

Тысяча причин, все перечислить невозможно. Могу лишь назвать парочку: по-другому названы поля в таблице, соответственно, неверный запрос. Либо ещё файл не обрабатывает PHP вообще, либо он имеет расширение html, либо запускается неправильно (допустим, просто открывается через двойной клик в браузере).

Arthur 16.02.2012 08:01:35

Михаил, а идентификатор страницы, обычная строка или с Auto_increment

Admin 16.02.2012 08:27:49

Это уникальный номер страницы (число). А какой он, неважно, главное, чтобы число и уникальный.

mg_loima 17.04.2012 15:23:32

хорошая статья)) попробую ))

10 лучших сервисов комментирования для сайта

Комментарии на информационном сайте – это важный элемент SEO-продвижения. С их помощью происходит взаимодействие между посетителями и улучшается ранжирование в поисковых системах.

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

Чем хороши сервисы комментариев?

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

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

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

Но и это еще не все, вот несколько пунктов, играющих в пользу сервисов:

• Модерация комментариев. Многие сервисы позволяют настраивать модерацию, например, можно сделать так, чтобы новые комментарии не публиковались, если в них содержатся ссылки или нецензурная лексика.
• Вовлечение аудитории. С помощью сервисов комментирования можно подключить уведомления, которые будут приходить пользователям, участвующим в дискуссии. Дополнительно можно добавить лайки и возможность писать личные сообщения другим пользователям.
• Хранение комментариев. При подключении инструмента для комментирования, вы сэкономите место на диске и сократите нагрузку на сервер. Связано это с тем, что сторонние сервисы хранят все данные на собственных серверах.
• Охват аудитории. Аудитория будет расти за счет того, что пользователи могут делиться своими комментариями в социальных сетях.
• Дополнительные возможности. В комментарии можно вносить не просто текст, но и добавлять графический контент. При необходимости это все можно удобно отредактировать.

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как комментарии влияют на SEO?

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

При этом есть одно важное замечание: комментарии будут индексироваться только в том случае, если они указаны в HTML-коде страницы. Чтобы это организовать на любой популярной CMS, достаточно подключить плагин из официального магазина. В случае с самописным движком это можно реализовать через API.

Топ-10 сервисов для комментариев

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

Cackle

Первый сервис в нашем списке – Cackle. Это инструмент от российских разработчиков, который позволяет реализовать не только комментирование, но и отзывы, опросы и даже онлайн-консультанта.

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

Особенности:

• можно авторизоваться через многие сервисы, в числе которых ВКонтакте, Одноклассники и даже Яндекс;
• есть рейтинг, который добавится в сниппет сайта в поиске Google;
• система комментариев адаптирована под все размеры устройств – от смартфонов до мониторов;
• аналитика комментариев, юзеров, лайков, публикаций постов, полный отчет и лог работы модераторов;
• все комментарии хранятся в БД сервера;
• виджет комментариев поддерживает микроразметку Schema.org рейтинга и комментариев, благодаря чему происходит более быстрая индексация контента.

Стоимость: 700 рублей в месяц за 1 сайт

Официальная страница: Cackle

Disqus

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

Особенности:

• авторизация через Facebook, Twitter и Google;
• возможность создать свою учетную запись на Disqus;
• уведомления о новых комментариях;
• пользователи могут редактировать обсуждения, а также делиться ими в социальных сетях и ставить лайки;
• монетизация ресурса с помощью рекламы;
• возможность подписаться на интересных комментаторов или отдельные ветки.

Стоимость: от $12 в месяц

Официальная страница: Disqus

Tolstoy

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

Умная система уведомлений – это push, почта, получение уведомлений в самом виджете. Работает все как социальной сети – в принципе, этот виджет и стремится сделать комментирование в таком формате.

Особенности:

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

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

Официальная страница: Tolstoy

Commenton

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

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

Особенности:

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

Стоимость: 1000 рублей

Официальная страница: Commenton

IntenseDebate

Еще одна бесплатная система комментирования под названием IntenseDebate. Она была разработана корпорацией Automattic Inc, у которой один из главных проектов – сервис хостинга сайтов WordPress.com, поэтому IntenseDebate легко интегрируется с CMS WordPress.

Особенности:

• уведомления по email;
• регистрация через социальные сети;
• сохранение комментариев в формате .xml;
• фильтрация сообщений.

Стоимость: бесплатно

Официальная страница: Intensedebate

HyperComments

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

Особенности:

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

Стоимость: есть 14-дневный пробный период, тарифы начинаются от $11 в месяц либо $24 в год

Официальная страница: HyperComments

AnyComment

AnyComment – это бесплатный виджет, который подойдет для любого проекта. В нем доступны оценки, модерация и комментарии из социальных сетей. Можно синхронизироваться с ВКонтакте, Facebook, Твиттер, Одноклассники и другими социальными сетями.

Особенности:

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

Стоимость: бесплатно, есть тарифы от 810 рублей

Официальная страница: AnyComment

SigComments

SigComments – бесплатная система для комментирования. Она позволяет создавать модернизируемый и адаптивный виджет с функцией «вызов внимания» – уведомлением модератора сайта о комментариях по определенным критериям. Дизайн выглядит довольно устаревшим, но за такую доступность большего ожидать и не стоит.

Особенности:

• полностью бесплатный функционал;
• удобное управление модерацией;
• рейтинги для сниппетов;
• любая вложенность ответов;
• вывод последних комментариев.

Стоимость: бесплатно

Официальная страница: SigComments

VKComments

VKComments – это полноценный виджет от всеми известной социальной сети ВКонтакте. Его можно установить на сайт, где пользователи смогут оставлять отзывы, если они авторизованы в ВК. Реализовать виджет можно как через код, так и плагин для CMS.

Особенности:

• пользователь ВК может сразу комментировать материал сайта от своего имени;
• записи автоматически публикуются на стене в аккаунте комментирующего;
• виджет позволяет просматривать ответы на комментарии;
• можно прикреплять медиафайлы;
• защита от спама.

Стоимость: бесплатно

Официальная страница: VKComments

Social Login

Social Login – сервис для сайтов, созданных на CMS WordPress. Он добавляет простую форму для комментирования, в которой можно авторизоваться через аккаунт от Google, Facebook, Twitter или LinkedIn.

Особенности:

• авторизация через популярные социальные сети;
• модерация и обновления в режиме реального времени;
• расширенный профиль пользователя;
• возможность рассылки email-уведомлений.

Стоимость: бесплатно

Официальная страница: Social Login

Выводы

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

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

HTML-комментарии

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.

Комментарий в HTML-коде задаётся так:

Текст внутри комментария не отображается браузером на странице. Комментарии обычно используются в следующих случаях:

• Для комментирования кода. Всегда полезно оставить подсказку.
• Для временного отключения кода. Удалять код неудобно, так как его надо будет восстанавливать, а закомментировать и потом раскомментировать — самое лучшее решение.

Комментарии можно использовать в любом месте страницы, кроме тега — внутри него они не работают. Внутри тега HTML-комментарии тоже не работают, так как в CSS код комментируется другим способом, о котором вы узнаете в части «Знакомство с CSS».

Чтобы быстро закомментировать или раскомментировать строку кода в HTML или CSS редакторе, можете использовать сочетание клавиш ctrl + / или cmd + / .

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим