Простых добавить комментарий comment. Комментарии в HTML, CSS, PHP

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

В этой заметке вы узнаете один из самый простых (но, субъективно, один из наиболее предпочтительных) способов добавить комментарии на сайт - простой пример для новичков + варианты для более продвинутых веб-мастеров.

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

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

Преимущества сторонних решений:

• Простота в реализации.
• Защищенность от спама "с коробки" (в своем решении пришлось бы это дополнительно реализовать, так что, теоретически, связано с предыдущим пунктом).
• В меньшей степени подвержено ошибкам, багам и т.д., так как сторонние решения проверили миллионы пользователей (опять связано с первым: вы тоже можете написать все без багов, но уйдет дополнительное время на отладку).
• Как правило, сервисы предоставляют готовую админку, статистику, уведомления для админов, иногда модерацию, несколько админов, премодерацию и т.д., на реализацию чего у веб-мастера, особенно начинающего, могут уйти месяцы, если не годы.
• Пользователю не нужно регистрироваться, вводить свое имя и т. д. - предполагается, что у него уже есть аккаунт в популярной соцсети.
• Скорее всего, выдержит большую нагрузку из-за того, что соц. платформы изначально рассчитаны на большие нагрузки.

Недостатки:

• Скудное или полное отсутствие возможности изменить внешний вид блока с комментариями.
• Индексация в поисковых системах.

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

Но довольно теории, перейдем к практике.

1. Простейший вариант - добавить комментарии с использованием какой-то выбранной соцсети.

Например, vk. Смотрим документацию . Копируем предоставленный код, и добавляем на странице (куски кода взяты с доки по ссылке, в будущем может поменяться, так что всегда копируйте с сайта с документацией. Здесь только возможный пример):

1) Добавляем в :

VK.init({apiId: 2951023, onlyWidgets: true});

2) Добавляем в том месте, где хотим видеть виджет комментариев (например, после заметки, если речь идет о блоге):

VK.Widgets.Comments("vk_comments", {redesign: 1, limit: 10, width: "665", attach: "*"});

2. Добавить виджеты из нескольких сервисов. Например, как на этом ресурсе. Переключаются табами:

Добавляем в разметку (для корректной работы должен быть подключен twitter bootstrap!) в месте, где нужно вывести виджет комментариев :

• Discuss
• Vkontakte

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

Этого можно избежать, реализовав ленивую инициализацию виджетов комментариев . Сначала код целиком, потом разъяснение:

(function(global, $) { "use strict"; $(function() { var $tabToggler, initComments, initialized; initialized = { "#vk-comments": false, "#disqus_thread": false }; initComments = function(type) { var discussUserName, disqus_config, pageUrl; if (initialized) { return; } pageUrl = "page_url"; switch (type) { case "#disqus_thread": // You need to set this params using your platform"s appropriate way discussUserName = "discussUserName"; disqus_config = function() { this.page.url = pageUrl; return this.page.identifier = "page_identifier"; }; (function() { var d, s; d = document; s = d.createElement("script"); s.src = "//" + discussUserName + ".disqus.com/embed.js"; s.setAttribute("data-timestamp", +new Date()); return (d.head || d.body).appendChild(s); })(); break; case "#vk-comments": VK.Widgets.Comments("vk-comments", { limit: 5, attach: "*", pageUrl: pageUrl }); break; default: return; } initialized = true; }; $tabToggler = $(".comments-wrapper a"); $tabToggler.on("shown.bs.tab", function(e) { initComments($(e.target).attr("href")); }); initComments($tabToggler.closest(".active").find("a").attr("href")); }); })(window, jQuery);

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

Для начала создаем маппинг типов виджетов комментариев , переменная initialized . Дальше, функция initComments(type) позволяет инициализировать виджет комментария , причем она ничего не делает, если он уже был инициализирован.

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

Готовый скрипт на и coffeescript на gist. Пример работы - внизу (примеры кода взяты с этого сайта)

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

Как внедрить комментарии Facebook на свой сайт мы расскажем немного позже, а для начала попытаемся определить все «за» и «против» такой замены.

Комментарии с Facebook: «за» и «против»

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

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

В отличие от других систем комментариев, как например Disqus, комментарии Facebook не синхронизируются с родными комментариями WordPress. Они полностью их заменяют. Если в старых записях уже есть комментарии WordPress, то они будут отображаться до или после новых комментариев, добавленных через форму Facebook.

Вот, пожалуй, и все плюсы и минусы Facebook-комментариев.

Если вы еще не передумали установить их на своем сайте WordPress, то читайте ниже, как это сделать.

Плагин Facebook Comments для WordPress

Для начала установим и активируем плагин Facebook Comments и настроим его в появившемся меню в разделе Настройки → Комментарии Facebook.

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

Если вы ранее уже создавали приложение, то можете использовать его данные ID прямо сейчас. Иначе вам придется создать новое на странице Facebook Apps :

В панели управления только что созданного приложения отобразится его ID, которое нужно скопировать и вставить в настройки плагина. Но перед этим настройте приложение на своем сайте в «Настройках» с помощью кнопки «Add Platform».

Появится новое окно, в котором нужно кликнуть на веб-сайт и выбрать его в качестве своей платформы.

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

Сохраните изменения, скопируйте ID приложения и разместите его в настройках плагина своего сайта.

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

Этот плагин Facebook-комментариев имеет очень много параметров для настроек. Стандартные настройки должны работать с большинством сайтов. Однако можно их изменить на собственное усмотрение и сохранить изменения.

Теперь можете протестировать, корректно ли работает новая система комментариев на вашем сайте.

Модерация комментариев

Так как у вас есть админские права, вам будут приходить уведомления о новых комментариях. Вы можете ими управлять и решать, публиковать их или нет.

А еще в настройках можно добавить нового модератора:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Множество минусов Русскоязычные сервисы

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

SV Kament

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Всё и сразу?

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

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

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

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

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

В данном уроке я расскажу о том, как делаются комментарии в HTML, CSS, PHP . Комментарии представляют собой текст, который не виден на веб-странице. Они используется для разного рода пояснений, напоминаний, описаний для вебмастеров, что позволяет структурировать документ. Комментарии незаменимы при отладке кода, позволяют быстро сориентироваться в разметке веб-страницы и найти нужный блок. Часто комментарии применяются для отладки кода HTML. К примеру, можно временно закомментировать конкретный блок кода, чтобы он не исполнялся, а в случае необходимости легко его восстановить.

Комментарии в HTML

В HTML комментарии формируются с помощью символов: . Таким образом, любой текст, находящийся между этими символами, является комментарием. Рассмотрим пример:

Пример комментариев в HTML

Комментарии в CSS

Комментарии в CSS создаются с помощью символов: /* и */. Для создания комментария нужно просто поместить код-веб страницы между этими символами:

/* Начало блока со стилями для Body*/ body { background: #efeded; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; } /* Конец блока со стилями для Body*/ Комментарии в PHP

Комментарии в PHP могут быть однострочными и многострочными:

1) Однострочные комментарии в PHP создаются с помощью символов: //. Достаточно просто поставить этот символ перед строкой и она будет закомментирована.Такой вариант применятся в том случае, когда комментарий состоит только их одной строки.

2) Для реализации многострочных комментариев используются символы: /* и */. Такой вариант полезен, если комментарий занимает несколько строк.

Таким образом, мы научились делать

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

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

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

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

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

Ваше имя:

Ваш комментарий:

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

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

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

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

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

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

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

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

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

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

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

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