Честно говоря, когда увидел, что по этому поводу пишут и советуют новичкам на других сайтах, немного ужаснулся и решил запилить свою заметку на эту тему без фатального недостатка . В основном я видел длинные полотнища кода, которые реализуют добавление комментариев на сайт . Обычно для этого создают форму, реализуют ее обработку, сохранение, а так же выборки для отображения. Но преимуществ подобного подхода чем дальше, тем все меньше.
В этой заметке вы узнаете один из самый простых (но, субъективно, один из наиболее предпочтительных) способов добавить комментарии на сайт - простой пример для новичков + варианты для более продвинутых веб-мастеров.
Действительно, для чего изобретать велосипед и писать кучу кода, который в будущем еще придется поддерживать, фиксить и т.д., если есть куча готовых решений от сторонних сервисов (речь идет о социальных сетях + 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!) в месте, где нужно вывести виджет комментариев :
Но этот вариант не самый лучший, хоть и самый простой. Проблема в том, что при таком подходе при загрузке страницы будут инициализироваться все виджеты, независимо от того, понадобятся они пользователю, или нет.
Этого можно избежать, реализовав ленивую инициализацию виджетов комментариев . Сначала код целиком, потом разъяснение:
(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. Пример работы - внизу (примеры кода взяты с этого сайта)
Здравствуйте, друзья и гости блога! Сегодня расскажу при помощи PHP и MySQL. А также мы с вами поговорим о системах комментирования для сайта и выберем из предложенных мной лучшую для вашего сайта.
Вопрос первый : с помощью PHP и MySQL ?
Для этого нам с вами нужно перво на перво создать таблицу в базе данных вашего сайта, которая будет носить название — comments . В этой созданной таблице будут храниться комментарии в полях с такими обозначениями:
id
— это уникальный идентификатор.
page_id
— в этом поле будет хранится идентификатор страницы сайта, на которой располагается данный комментарий.
name
— это имя того комментатора, который оставил данный комментарий.
text_comment
— соответственно это текст текущего комментария.
Следующим этапом, после создания таблицы для комментариев в базе данных, нам нужно внедрить специальный код для наших будущих комментариев на сайт. Этот код на сайте позволит нашим комментаторам добавить свои комментарии к нашим статьям. Вот этот код:
Ваше имя:
Ваш комментарий:
Это простая HTML форма комментариев для сайта. Вы ее располагаете на своем сайте в том месте, где это удобно для оставления комментария к посту — естественно под самим постом.
Последний шаг в создании формы комментариев для сайта на PHP и MySQL — Делаем вывод наших комментариев на странице сайта. Вот код для этого:
Вот и все! Наша простая форма комментариев ля сайта создана и может работать на сайте.
Но это конечно не для новичка, который не станет копаться со всеми этими кодами HTML, PHP и MySQL. Также не станет изучать, как создать базу данных. Ему нужно все сразу, быстро и без головной боли. Я прав? Конечно прав!
Тогда давайте перейдем к следующему разделу моего материала и узнаем все об уже готовых системах комментариев для сайта и выберем наиболее удобную, функциональную и приемлемую для вашего сайта …
Системы комментариев для сайта. Какую выбрать?Как сделать комментарии на сайте — это вопрос важный потому, что комментарии на сайте играют важную роль не только для общения владельца сайта и посетителя, но также комментарии важны для сео продвижения и раскрутки.
С помощью комментариев на сайте повышаются позиции сайта в поисковой выдаче, улучшаются поведенческие факторы, растет трафик на сайт, а следственно и увеличивается ваш заработок. Вот видите, как важны комментарии для сайта!
Поэтому давайте рассмотрим как сделать комментарии на сайте и какую систему комментирования выбрать, как наиболее оптимальный вариант?
Вообще комментарии на сайтах выводятся многими способами. Это и специальные плагины для wordpress движков и комментарии от социальных сетей всевозможные, такие как например Вконтакте , Facebook , Disqus . Также есть независимые сервисы, которые предлагают свои системы комментариев для сайта, например .
Я сейчас вам приведу одну табличку, которая сразу расставит все на свои места и вопросов уже не возникнет по поводу выбора системы комментариев для сайта:
Здесь все четко и ясно видно какая система комментариев является лучшей и нескольких представленных, которые чаще всего используются вебмастерами на своих ресурсах. Думаю, что пояснения здесь излишни и выбор остается только за Вами!
На этот раз мы делаем простую AJAX систему добавления комментариев. Этот позволит продемонстрировать, как добиться эффективного взаимодействия между JQuery и PHP / MySQL с помощью JSON. Система работает таким образом, что добавляемые комментарии помещаются на страницу без её полной перезагрузки, давая ощущение работы сайта только на компьютере пользователя, тем самым избегая необходимости ждать некоторое время, необходимое для повторной загрузки страницы с добавленным комментарием.
Вот примерная демонстрация того, что мы планируем реализовать:
Шаг 1 - XHTML
Во-первых, давайте взглянем на разметку комментариев. Этот код генерируется PHP в комментарии, который мы собираемся посмотреть в одно мгновение.
Demo.php
Комментарий
В Div-е класса avatar содержиться гиперссылка соответсвенно с аватаром (если пользователь указал действительную ссылку на аватар при отправке комментария), допустим из gravatar.com. Ну мы еще вернемся к этому когда будем работать с PHP. Наконец, у нас есть имя и время также в DIV-ах, а также комментарий то есть сам текст в параграфе.
Другим важным элементом в части XHTML является сама форма отправки комментария (все поля, кроме поля URL обязательны для заполнения).
Demo.php
Добавить комментарий
Ваше имя? Вашь Email? Ваш аватар? (не обязательно) Что вы хотели сказать?Шаг 2 - PHP
PHP обрабатывает связи с базой данных MySQL и создает разметку комментарий. Кроме того, на приёме в конце стоит AJAX и вставляет комментарий в таблицу комментариев. Вы можете увидеть код, который выводит комментарии к странице, ниже.
Demo.php /* / Выбрать все коммнтарии и заполнить массив $comments */ $comments = array(); $result = mysql_query("SELECT * FROM comments ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) { $comments = new Comment($row); }
MySQL запрос выбирает все записи из базы данных и заполняет массив $comments с объектом класса комментарий, который вы видите ниже. Этот массив выводится после выполнения скрипта.
Demo.php /* / Выводим комментарии один за другим */ foreach($comments as $c){ echo $c->markup(); }
Каждый комментарий имеет markup() метод, который генерирует HTML код для печати страницы. Вы можете увидеть этотот метод и класс ниже.
Класс принимает строку из базы данных (fetched with mysql_fetch_assoc()) и сохраняет его в переменной $data. Она доступна только для методов этого класса и не может быть доступна извне.
Comment.class.php – Шаг 1
class Comment
{
private $data = array();
public function __construct($row)
{
/*
/ Конструктор
*/
$this->data = $row;
}
public function markup()
{
/*
/ Этот метод выводит разметки XHTML комментарий
*/
// Создание псевдонима, так что мы не должны писать
// $this->data данные каждый раз:
$d = &$this->data;
$link_open = "";
$link_close = "";
if($d["url"]){
// Если человек заполнил URL при
//добавлении комментария
// Определяем гиперссылку
$link_open = "";
$link_close = "";
}
// Преобразование времени
$d["dt"] = strtotime($d["dt"]);
// Необходим для изображений Gravatar по умолчанию:
$url = "http://".dirname($_SERVER["SERVER_NAME"].
$_SERVER["REQUEST_URI"])."/img/default_avatar.gif";
return "
".$link_open."
submit.php получает данные комментария в виде запроса AJAX. Она проверяет его и выдает JSON объект либо разметки XHTML который успешно выведен, или список сообщений об ошибках. JQuery использует статус собственности определить, следует отображать сообщения об ошибках или добавить комментарий разметки страницы.
Вы можете увидеть два примера ниже.
В наше время многие популярные сайты это не только источник информации, но и место, где эту информацию можно обсудить с другими пользователями, сайты зачастую превращаются в центры, вокруг которых формируется сообщество.
Комментарии помогают строить сообществоТеперь пользователи приходят к вам не просто что бы прочитать какую-то новость или статью, но ещё и для того что бы её обсудить.
Что характерно - узнать саму новость читатель мог и в другом месте, но именно сообщество интересных людей, возможность высказаться и услышать их мнение - вот что приведёт к тому, что он посетит ваш сайт и зайдёт на страницу с новостью, которую и так знает.
Ещё лет десять назад центрами, вокруг которых кипела вся жизнь, были форумы. Однако в наше время это уже не так удобно и популярно, сейчас большинство популярных сайтов работают в формате блогов, а общение пользователей происходит в комментариях.
Таким образом, именно комментарии являются тем фактором, который отличает обычные сайты от сайтов, по настоящему успешных в своей сфере. Это касается новостных сайтов, блогов, сообществ по интересам, порой даже интернет-магазинов и различных специализированных сайтов.
Комментарии это обратная связь и мотивацияТак же важно помнить, что комментарии это источник обратной связи с читателями, который позволяет узнать что именно им нравится и на что читатели реагируют. А чем лучше и интереснее для посетителей ваш сайт, тем чаще они к вам возвращаются и рекомендуют его.
К тому же обратная связь - это всегда хорошая мотивация для самих авторов и администраторов, которая почти мгновенно позволяет почувствовать, что людям интересно и то что вы делаете и ваш сайт. Простым счётчиком посетителей такого не добьешься.
Что нам нужно от системы комментирования?Так какими же должны быть «правильные» комментарии на современном сайте?
- Простыми и понятными для читателей.
- Удобными и функциональными для администраторов.
Какие варианты есть на данный момент у веб-мастера?
Виджеты социальных сетейПлюс только один - довольно высока вероятность того, что пользователь уже залогинен в социальной сети и поэтому ему не придется регистрироваться.
Множество минусов Русскоязычные сервисыРусскоязычные аналоги зачастую полностью платные и не могут похвастаться привлекательным дизайном.
SV KamentЕдинственным исключение тут стоит система SV Kament (svkament.ru) которая полностью бесплатна и собирает воедино функционал различных западных систем комментирования, но при этом ориентирована на русскоязычный сегмент.
Давайте вкратце рассмотрит что бы мы хотели видеть в нашей системе комментирования.
Древовидные комментарии с возможностью сворачивать отдельные ветки обсуждения. Очень помогают ориентироваться в обсуждении, когда комментариев становится много.
Социальный логин - значительно упрощает регистрацию и как результат увеличивает количество комментариев. Западные исследования показывают что использование социального логина порой увеличивает конверсию более чем на 60%.
Оценка комментариев - во-первых помогает выделить самые интересные и стоящие комментарии, что крайне удобно для читателей, а во-вторых стимулирует пользователей писать интересные сообщения.
Работа в реальном времени - чем удобнее и быстрее работает система, тем больше ей пользуются и чаще пишут комментарии.
Уведомления на почту - как часто мы теряем потенциальные комментарии только потому, что пользователь не знает, что кто-то ответил на его предыдущее сообщение.
С точки зрения управления- Управление прямо на сайте.
- Информация о пользователях.
- Единая панель управления комментариями всего сайта.
- Возможность назначать модераторов.
- Простота установки.
Так же есть ряд интересных возможностей у системы SV Kament.
- Социальные трансляции - позволяют «вернуть» общение на ваш сайт из социальных сетей. Если у вас есть группа в Вконтакте, в которой вы размещаете анонсы новых статей на сайте, то зачастую часть обсуждения статей остаётся в комментариях к самой записи, и было бы здорово транслировать эти комментарии обратно на ваш сайт.
- Рейтинг и статус пользователей - позволяет выделить самых активных и популярных посетителей, таким образом стимулируя ваших пользователей чаще заходить, больше общаться и писать сообщения интересные другим людям.
Есть довольно распространенная практика размещать сразу несколько систем комментирования, например отдельно виджет ВКонтакте, отдельно Facebook, отдельно для всех остальных.
На мой взгляд это одно из худших решений, однако важно понимать какие именно цели преследуются.
Если нужно просто собрать отзывы пользователей - то этот способ имеет право на жизнь, хотя для этого может быть достаточно простой гостевой книги или даже адреса электронной почты.
Если же наша цель - создание сообщества и стимулирование общения пользователей, то такой подход крайне вреден, ведь разделяя комментарии, мы разделяем и само общение, таким образом вместо единого диалога получается кучка не связанных между собой сообщений.
А какими комментариями пользуетесь вы? Считаете ли вы комментарии важными для вашего сайта, и насколько удобной и эффективными считаете комментарии на своём сайте?
