Как сделать комментарий
Готовый код скрипта комментариев с пошаговой инструкцией, где его разместить, как осуществить связь с MySQL, и что и куда залить и подключить, чтоб всё заработало.
Я покажу вам готовый код скрипта и расскажу пошагово где его разместить, как осуществить связь с MySQL, и что и куда залить и подключить, чтоб всё заработало.
Сразу уточню, что весь представленный здесь код преобразуется в файлы в Notepad++ с соответствующим расширением и в кодировке utf8
Сначала сам скрипт
Разместить этот скрипт на странице можно двумя способами.
1. Скрипт размещается непосредственно на странице между тегами
2. В корневой директории сайта создаётся папка c названием, например js, если таковой ещё нет, и в неё помещается файл скрипта под названием, допустим script_comments.js
Тогда на странице, в тег прописывается подключение этого файла к странице.
Какой из этих вариантов лучше, я сказать затрудняюсь, но второй мне представляется более удобным.
Следующим шагом размещаем на странице код вывода комментариев и код формы комментариев.
Вставляется это всё одним блоком в том месте страницы, где вы хотите отобразить комментарии, обычно сразу после статьи.
" .$comment[ 'author' ]. "
Так, с клиентской частью закончили, теперь пойдём на сервер.
Первым делом нужно скачать маленькую библиотеку jquery-1.5.1.min.js. (82kb)
Обычно представлена она открытым кодом, значит нажимаем правой клавишей и Сохранить как… сохраняем файл себе на компьютер.
Затем этот файл загружаем на сервер в папку js, которую мы создали на предыдущем шаге, и подключаем этот файл к странице, на которой будут выводится комментарии в тег .
У нас там уже есть один подключенный скрипт, рядом с ним прописываем ещё один.
Затем в директорию в которой находится файл страницы с комментариями, нужно загрузить файл с командами для БД.
include ( "connect.php" );
header ( "Content-type: text/html; charset=UTF-8" );
if ( empty ($_POST[ 'js' ])) if ($_POST[ 'message' ] != '' && $_POST[ 'author' ] != '') $author = @ iconv ( "UTF-8" , "UTF-8" , $_POST[ 'author' ]);
$author = addslashes ($author);
$author = htmlspecialchars ($author);
$author = stripslashes ($author);
$author = mysql_real_escape_string ($author);
$message = @ iconv ("UTF-8", "UTF-8", $_POST[ 'message' ]);
$message = addslashes ($message);
$message = htmlspecialchars ($message);
$message = stripslashes ($message);
$message = mysql_real_escape_string ($message);
$stranica = @ iconv ("UTF-8", "UTF-8", $_POST[ 'stranica' ]);
$stranica = addslashes ($stranica);
$stranica = htmlspecialchars ($stranica);
$stranica = stripslashes ($stranica);
$stranica = mysql_real_escape_string ($stranica);
$date = date ( "d-m-Y в H:i:s" );
$result = mysql_query ( "INSERT INTO messages (author, message, stranica, date) VALUES ('$author', '$message', '$stranica', '$date')" );
if ($result == true) > else
> else >
if ($_POST[ 'js' ] == 'no' ) if ($_POST[ 'message' ] != '' && $_POST[ 'author' ] != '')
$author = $_POST[ 'author' ];
$author = addslashes ($author);
$author = htmlspecialchars ($author);
$author = stripslashes ($author);
$author = mysql_real_escape_string ($author);
$message = $_POST[ 'message' ];
$message = addslashes ($message);
$message = htmlspecialchars ($message);
$message = stripslashes ($message);
$message = mysql_real_escape_string ($message);
$stranica = $_POST[ 'stranica' ];
$stranica = addslashes ($stranica);
$stranica = htmlspecialchars ($stranica);
$stranica = stripslashes ($stranica);
$stranica = mysql_real_escape_string ($stranica);
$date = date ( "d-m-Y в H:i:s" );
$result = mysql_query ( "INSERT INTO messages (author, message, stranica, date) VALUES ('$author', '$message', '$stranica', '$date')" );
if ($result == true) > else
> else >
?>
Следующий файл в ту же директорию — файл связи с базой данных connect.php
mysql_connect ( "localhost" , "name_BD" , "3Pt3yeRg" );
mysql_select_db ( "name_BD" ,$db);
mysql_query ( "SET NAMES utf8" );
?>
И последнее, что нам осталось сделать — это соединить нашу страницу, на которой будут выводится комментарии, с БД.
Для этого в самом верху страницы, перед !DOCTYPE html, вставляем следующий код
Теперь идём в БД MySQL. если у вас ещё нет БД, то её нужно создать.
На разных хостингах это делается по разному, поэтому я не буду подробно объяснять как это делается, а как создать БД на Денвере, можно прочитать здесь.
Когда база данных создана, заходим в phpMyAdmin, там должна быть строчка с именем вашей БД, и всё. Нам необходимо создать в ней таблицу.
Проходим во вкладку SQL — верхнее меню.
И в открывшемся окне пишем следующий запрос
CREATE TABLE `messages` (
`id` int(3) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`author` varchar(30) NOT NULL,
`message` text NOT NULL,
`date` varchar(25) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Обратите внимание на левые апострофы, на клавиатуре на букве Ё.
Нажимаем Вперёд — всё таблица создана.
Блин, забыл привязку к конкретной странице. Переходим в таблицу во вкладку Структура, и добавляем одно поле с названием stranisa
Ну вот и всё, можно идти на свою страницу и тестировать комментарии.
Со стилевым оформлением, я надеюсь, вы справитесь самостоятельно.
После тестирования заходим снова в БД, в phpMyAdmin, в нашу созданную таблицу — все комментарии здесь
Нажимаем Отметить все и Изменить, вам откроются все отправленные комментарии, с указанием страниц, с которых они были отправлены.
Здесь их можно редактировать, удалять и переносить на другие страницы.
На этом всё. Вы можете изменить имена файлов и таблиц, но тогда внимательно просмотрите весь представленный код, и замените имена везде, где они фигурируют.
Чтобы пользователи могли легко и быстро оставлять комментарии на сайте, надо подключать сервис отзывов. Обычно они подбираются под CMS веб-ресурса, но в этой статье мы дадим универсальные виджеты комментариев для сайта – те, которые можно встроить в любую основу.
Платные системы комментариев
Если Вы хотите получить максимальную пользу от систем комментариев и быстро продвинуть сайт в топ, то лучше обратить внимание на платные варианты с множеством дополнительных функций. Для крупных международных проектов выбирайте сервисы, поддерживающие авторизацию пользователей как через зарубежные соцсети, так и через отечественные.
| Сервис | Цена (в месяц) | Бесплатный период | Авторизация через |
| Cackle | От 500 ₽ | 5 дней | Facebook, Twitter, ВКонтакте, Одноклассники, Google+ |
| Tolstoy comments | 700 ₽ | 14 дней | ВКонтакте, Одноклассники, Telegram, Facebook, Google, Twitter, Яндекс |
| Disqus | 11 $ | 30 дней | Facebook, Twitter, Google+, Disqus |
Почитать подробные отзывы о системах комментирования для сайта можно тут.
Как сделать комментарии на сайте
Просто добавить блок с комментариями к сайту мало, нужно еще адаптировать его дизайн и сделать удобным для посетителей. В этом помогут дополнительные возможности программ для комментариев на сайте.
1. Отзывы для сайта
Сервисы отзывов для сайта автоматически индексируются в Google. Имеют адаптивный дизайн и хорошо смотрятся, как на компьютере, так и на мобильных устройствах. Также можно дополнительно подключить рассылку, в которой размещено приглашение оставить отзыв.
2. Онлайн-консультант
Онлайн-чат поддерживает социальную авторизацию пользователей. Если такой вариант Вас не устроит, то можно начать разговор анонимно.
После авторизации пользователя в чате, модератор получает его данные: имя, фото, адрес почты, ссылки на соцсети. Это позволит точнее таргетировать клиентов и предложения.
Интересно. Новая фишка сайтов – видеовиджет. Повысит вовлеченность и вызовет wow-эффект. Кликайте и тестируйте -> Getreview
3. Опросы
Позволит создать на сайте опросы с возможностью голосования через соцсети, IP или cookie браузера. Это прекрасно реализовано в Cackle.
4. Геймификация
Когда пользователи комментируют материал, они получают определенные значки-награды и повышают свой рейтинг. Все полученные награды и рейтинг отображаются в профиле, который могут видеть остальные посетители сайта.
Рейтинг всех комментаторов собран в сводную таблицу. То есть присутствует соревновательный момент, который заставляет юзеров больше активничать ради выхода в топ. Такая функция сильно увеличивает вовлеченность, но есть она только в платных сервисах комментариев для сайта вроде Tolstoy comments.
5. Монетизация
Монетизация ресурса с помощью нативной рекламы, которая адаптируется к внешнему виду сайта. Вы сами выбираете, где разместить рекламу: перед комментариями, после них или между ними.
Можно выбрать тип рекламного объявления: спонсорская история, рекламные ссылки, изображение, видео. Объявления будут лаконично встраиваться в виджет комментариев для сайта и приносить деньги владельцу.
Бесплатные сервисы комментариев для сайта
Для небольших проектов с маленьким бюджетом лучше всего подойдут бесплатные виджеты отзывов для сайта. Все сервисы в подборке бюджетны и просты в установке, но у них мало дополнительных функций, либо они не имеют их вовсе.
1. VKcomments
Виджет от ВКонтакте прост в подключении, так как устанавливается напрямую: достаточно скопировать код виджета и вставить в сайт. Комментарии смогут оставлять все пользователи, авторизованные в соцсети.
2. Facebook Comments
Плагин, подобен виджету ВК, только для юзеров Facebook. Инструкция по установке есть на странице плагина. Из минусов: не подойдет для русскоязычных сайтов, так как в России у FB мало пользователей.
3. Social Login
Плагин для сайтов, созданных на WordPress. Авторизоваться можно через 40+ соцсетей. Имеет много дополнительных функций, таких как возможность рассылки email-уведомлений, аналитика пользователей, интеграция с большим количеством соцсетей. Нет русского языка.
4. SigComments
Система комментирования с возможностью вызова внимания. Количество дополнительных функций сравнимо с платными аналогами. Можно оформлять виджет комментариев на свой вкус без ограничений, размещать несколько разных систем комментирования на одном сайте.
5. IntenseDebate
Уведомления по электронной почте предупредят Вас и Ваших читателей о новых комментариях. Вы сможете отвечать и модерировать комментарии также по электронной почте. Еще любой пользователь может узнать, кому именно отвечает, открыв виджет с его данными.
Кроме того, у сервиса отзывов для сайта есть автоматическая фильтрация комментариев по ключевым словам, электронной почте и IP-адресам и удаление нежелательных комментариев.
Как получать больше комментариев на сайт
Даже если Вы подключили хороший сервис с системой геймификации, пользователи все равно могут игнорировать комментарии. Что же тогда делать? Вот несколько советов, как поддержать комьюнити и мотивировать посетителей оставлять комментарии.
Лайфхак. Вывести сайт в ТОП поисковиков несложно с сервисом комплексного SEO-маркетинга. Буквально в два клика Вы узнаете текущие позиции вашего сайта по ключевым словам, посмотрите как продвигаются конкуренты и составит эффективную стратегию SEO-продвижения. Кликайте и тестируйте -> SE Ranking
Коротко о главном
Системы комментирования облегчают жизнь как веб-мастерам, так и пользователям. Первым они дают возможность продвинуть свой сайт в топ и повысить прибыль. Вторые смогут легко общаться на интересующие темы без прохождения нудных регистраций.
Мой совет – не зацикливайтесь на каком-то одном сервисе. Протестируйте каждый, чтобы понять, какой больше подходит Вам, учитывая Ваши цели и масштаб проекта или сайта.
В сегодняшней статье я хотела бы вам рассказать, как можно делать в html комментарии в коде, а так же в css-стилях и php-файлах.
Навигация по статье:
Для чего нужно оставлять комментарии в коде?
Привычка оставлять пометки и пояснения в коде – это одна из самых полезных привычек программиста или веб-разработчика! Так как это позволяет, во-первых вам самим лучше и быстрее ориентироваться в своём файле, а во-вторых если вы работаете в команде или планируете передавать проект на доработку – то комментарии в html-коде – это незаменимая вещь.
Кроме того это пригодиться вам, в случае если вам нужно какой-то фрагмент кода временно убрать, например, отключить какие-то css-стили, или убрать определённый элемент на html-странице.
Получается, что такая мелочь как умение правильно расставлять комментарии в коде, позволит вам сэкономить много времени и нервов и привести его в более опрятный и понятный вид.
Комментарии в html задаются с помощью конструкции . Визуально на странице они никак не отображаются.
Комментарий в html можно растянуть на несколько строк
Комментарий будет продолжаться до тех пор, пока не встретится первая закрывающаяся конструкция --> . Вложенный комментарий не поддерживается.
Комментарии можно писать прямо внутри тегов:
Практическая польза комментариев html
Комментарии в html позволяют значительно улучшить читаемость кода в дальнейшем. Да и просто удобнее понимать какой тег где закрывается, особенно, если много вложенных друг в друга тегов.
Каждый день в рунете создается порядка 3 тысяч новых сайтов. Владельцы стремятся как можно быстрее раскрутить свой сайт и пробиться в топы. Для этого существуют разные способы и один из них — комментарии. Комментарии позволяют создавать сообщества, постоянную аудиторию, которая со временем начинает привлекать новых клиентов. На сегодняшний день существует множество систем комментирования, но как выбрать самую подходящую для вашего сайта?
Я выбрал несколько самых популярных систем комментирования, сравнил по множеству параметров и сделал обзор каждой.
Основные возможности
Для сравнения были выбраны: Виджет Комментариев ВКонтакте, Facebook Comments, Disqus, Cackle, Livefyre и IntenseDebate. Это самые популярные системы, которые я встречаю на сайтах или в поисковиках.
Обзорная таблица всех основных возможностей имеет примерно следующий вид:
| Возможность | ВК комментарии | FB comments | Disqus | Livefyre | IntenseDebate | Cackle |
|---|---|---|---|---|---|---|
| Скорость загрузки | быстро | медленно | среднее | быстро | медленно | быстро |
| Кнопка Like | да | да | да | да | да | да |
| Вставка картинок, видео | да | нет | да | да | нет | да |
| Доп. модераторы | да | да | да | да | да | да |
| Realtime обновление | да | да | да | да | нет | да |
| Подгонка размера | нет | нет | да | частично | да | да |
| Древовидность | нет | нет | да | да | да | да |
| Премодерация | нет | да | да | да | да | да |
| Akismet (спам защита) | нет | нет | да | нет | да | да |
| Бан юзера/IP | только юзера | только юзера | да | да | да | да |
| Анонимная авторизация | нет | нет | да | да | нет | да |
| Разные темы | нет | нет | частично | нет | частично | да |
| Редактирование CSS | нет | нет | нет | частично | да | да |
| UI CSS редактор | нет | нет | нет | нет | нет | платно |
| Редактирование HTML | нет | нет | нет | нет | нет | нет |
| Редактор заголовков | нет | нет | нет | нет | нет | да |
| Whitelabel | нет | нет | нет | да | нет | платно |
| Индексация поисковиками | нет | да | частично | нет | нет | частично |
| SSO | нет | нет | платно | да | нет | платно |
| API | нет | нет | да | да | да | да |
| Модерация на сайте | нет | нет | частично | да | частично | платно |
Разберем некоторые возможности, подробнее.
Скорость загрузки
- ВКонтакте загружаются в среднем секунду
- FB comments около 1.6 секунды
- Disqus 1.4 секунды
- Livefyre 600 миллисекунд
- IntenseDebate чуть больше 2 секунду
- Cackle 850 миллисекунду
Вставка картинки, видео
Все просто, вставляем ссылку на картинку (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, но платно.
Индексация поисковиками
Теперь не много подробнее о каждой системе.
ВКонтакте и Facebook комментарии
- Пользователю не надо входить заново, если он уже авторизован в ВКонтакте или Facebook
- Автоматический кросспостинг комментария в социальную сеть
- Стабильная работа 24 часа в сутки
Disqus
Это наверно самая старая система комментирования, была основана в 2007 году. Имеет достаточно широкий и мощный функционал. С помощью их API, можно реализовывать практически любые интеграции.
Из недостатков это частые глюки. К примеру, после сохранения настройки, они не применяются сразу, или комментарии после удаления остаются на странице.
Стоит отметить, что в 2012 году вышла новая версия виджета. Ребята перенесли Disqus в iframe, тем самым сделав невозможным переопределение дизайна (css), что конечно является большим минусом для веб-мастеров.
Livefyre
Отличная система, в бесплатной версии имеет много возможностей. Например SSO (Единую авторизацию), Callback публикации комментария (при публикации вызывается сторонний сервис). Так же на мой взгляд у Livefyre не плохой дизайн.
Основная идея Livefyre — это платная интеграция в крупные интернет порталы (у них нет тарифов). Цена начинается от 3000$ в месяц.
Интересной особенностью является то, что для создания виджета ваш сайт должен быть online, то есть при создании он пингуется.
IntenseDebate
Об этом сервисе я знаю довольно не много и честно говоря не самое лучшее. Например то, что он очень медленно работает, не поддерживает Realtime, не распознает картинки и видео. Почему по Alexa у него достаточно высокий рейтинг остается загадкой.
Cackle
Система комментирования Cackle появилась недавно (2011 год), но почти за 1.5 года, смогла завоевать большу́ю часть рунета. По публичным данным системой пользуются более чем 17 000 сайтов. Основное преимущество перед остальными, практически все провайдеры авторизации как Российские так и зарубежные.
Из плюсов следует отметить гибкость, простоту в настройке и установке, возможность легко менять дизайн (например их css вообще можно отменить, передав виджету параметр var mcNoStyle = true).
В заключении для полноты картины предлагаю вашему вниманию небольшой опрос.
Читайте также: