Контакты

Заполняться комментарии страницы. Тонкая настройка формы комментирования

Инструкция

В том случае, если для сайта используется профессиональная платформа, обычно платная, в ней уже есть все необходимые модули, в том числе и блок комментариев. Но как поступить, если вы только осваиваете веб-дизайн, создали простой сайт на чистом html и хотите дать посетителям возможность оставлять сообщения?

Для добавления на сайт блока комментариев воспользуйтесь сервисом Disqus . После установки данной платформы на сайт его посетители смогут оставлять свои реплики.

Зарегистрируйтесь на сервисе. В поле Site URL введите адрес нашего сайта. В поле Site Name – его название. Чуть сложнее с полем Site Shortname – здесь надо ввести короткое имя сайта, то есть без http, www и ru. Например, если ваш сайт имеет название httр://site12345.ru, то в качестве короткого имени введите site12345. В результате будет создан поддомен site12345.disqus.com. Перейдя на него, вы попадете в панель настройки комментариев.

Введя все данные, нажмите кнопку Continue, откроется панель настроек. Выберите русский язык, потом настройте Optional Features. В пункте Facebook Connect вы можете дать пользователям Facebook возможность оставлять комментарии из своего аккаунта. Для этого вам надо ввести API Key: вы можете получить его, нажав на ссылку чуть ниже пункта Facebook Connect, но для этого у вас должен быть аккаунт на данном сервисе. В поле Twitter @Replies впишите имя вашего твиттер -аккаунта, оно будет использоваться при ответах.

Теперь настройте чекбоксы (переключателя). Если отметите Media Attachments, то все ссылки на медиафайлы будут показаны внизу комментария как прикрепленные файлы. Trackbacks – показывает трекбеки к странице. Akismet – подключение антиспамового сервиса. Reactions – показывает упоминания в сети о вашем сайте. Наконец, если отметить чекбокс Display login buttons with comment box, над формой комментариев появятся кнопки сервисов – Facebook, Twitter и пр.

Заполнив форму, нажмите Continue. На новой странице появятся варианты подключения к различным платформам. Если вы писали код сайта сами, выберите пункт Universal Code. Для установки кода скопируйте его из пункта 1, после чего вставьте в то место вашей страницы, где должны находиться комментарии. Затем скопируйте код из пункта 2 и вставьте его до закрывающего тега /body.

Вам осталось правильно оформить ссылки, ведущие на страничку с комментариями. Например, если страница для комментариев имела вид httр://site12345.ru/comment.html, то ссылку надо сделать такой: httр://site12345.ru/comment.html #disqus_thread. После этого проверьте возможность оставлять комментарии, все должно работать.

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

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

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

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

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

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

Недостатки:

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

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

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

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

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

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

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

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. Пример работы - внизу (примеры кода взяты с этого сайта)

Как добавить возможность комментирования на сайт? Система комментирования контента IntenseDebate

IntenseDebate (ID) - визуально привлекательная система, являющаяся на данный момент лидером среди онлайн сервисов комментирования контента. Система IntenseDebate отличается легкостью и удобством в использовании, как для комментаторов, так и для административного персонала. К примеру, для ускорения процесса модерирования в IntenseDebate встроена функция одобрения комментариев посредством E-mail.

Преимущества системы комментирования контента IntenseDebate:

Установка IntenseDebate

IntenseDebate предлагает плагины автоматизации процесса установки для WordPress, Blogger, TypePad и tumblr. Главным же условием работы ID на других платформах является поддержка JavaScript (такие комментарии можно поставить на обычный статический сайт)

Для установки IntenseDebate необходимо:

1. Зарегистрироваться на сайте www.intensedebate.com

2. Ввести URL сайта, на котором будет размещена система комментирования IntenseDebate:


3. Определиться с платформой сайта. В случае если платформой не служит WordPress, Blogger, tumblr или TypePad, выбирать опцию «Generic Install» (установка для других платформ):


4. Получить Java код для интеграции системы комментирования в контент. При этом верхний участок кода (код под номером 1) помещается на то место, где необходимо отображать комментарии, а нижний участок кода (код под номером 2) размещается там, где нужно показать количество комментариев. Например, «комментарии (17)».


После установки кода остается проверить работоспособность системы комментирования и немного протестировать ее:


Включение русского языка для пользовательской части интерфейса

Для того чтобы сменить язык пользовательской части системы комментирования IntenseDebate необходимо зайти в настройки сайта («Settings» > «Account» > «Display my comments in») и выбрать русский язык:


Кроме того, для платформы WordPress разработаны специальные модули (виджеты), причем выборка информации из базы данных для отображения в этих модулях происходит в самом сервисе ID. Таким образом, снижается нагрузка на сайт. К виджетам под WordPress относят: «Последние комментарии», «Наиболее комментируемая информация», «Самые популярные комментаторы» и «Комментарии лучшего комментатора».


Система комментирования IntenseDebate поддается очень детальной настройке и позволяет изменять любые детали: от настроек модерации до внешнего вида блока комментирования (с помощью CSS).

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

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

Оцените урок: 1 2 3 4 5

Комментарии:

Скажите, а для статичного сайта нет специального скрипта комментарии? Есть сайт, очень хотелось бы на него комментарии повесить.

С помощью данного сервиса можно легко повесить комментарии на статичный сайт. Регистрируетесь, получаете код, ставите на сайт и все работает. Пробуйте

Андрей, а на этой страничке как сделана возможность комментирования?

Где можно настроить цвет шрифта и фона в комментариях? Спасибо!

Если Вы хотите, установить форму комментариев на своём сайте, точно такую же как на этом сайте, то я могу написать за час такой скрипт комментариев. Всё будет сохраняться в файл т.е он будет работать без БД, могу сделать страничку администратора чтобы удалять сообщения. Будет капча. И всё добавляется одной строчкой. Если кому надо, то обращайтесь по icq: 593522831 или по email: [email protected]

А как исправить кнопочку Comments (суммирует все комментарии вначале) на русский язык?

А разве будет индексироваться такие комментарии поисковиками??? ответьте пжлст кто знает

Проще сделать свои комментарии:)

Большое количество скриптов может негативно сказаться на производительности вашего сайта.

Большущее спасибо, Андрею. Жаль только сайт не на русском языке

Если Вы хотите, установить форму комментариев на своём сайте, точно такую же, как на сайте http://proverkascripta.u-gu.ru /, то я могу написать за пол часа качественный скрипт комментариев. Всё будет сохраняться в файл т.е он будет работать без БД, могу сделать страничку администратора чтобы удалять сообщения. Будет капча. И всё добавляется одной строчкой. Если кому надо, то обращайтесь по icq: 593522831 или по email: [email protected]

Андрей подскажите пожалуйста, с данной программой есть несколько проблем. Вопервых, ограничение символов в одном комментарии и не понятно как его увеличить(количество символов) ,в настройках не нашел. И вовторых, но более важное, когда пишеш длинный комментарий,не нажимая Enter, то в поле вывода комментариев он не переносится автоматически и растягивает весь сайт на длину комментария.

Добавить комментарий.

Давненько я ничего не писал про WordPress. Поэтому сегодня я поделюсь с Вами тем, как можно вручную изменить форму комментирования в ВордПрессе. Думаю, что эти знания могут пригодиться любому начинающему блогеру, ведь форма комментирования это, порой, единственное средство общения посетителей и автора. Не проходите мимо:)

Перед тем, как мы начнем какие-либо манипуляции с кодом, хочу Вас заранее предупредить, что мы будем править файлы самого WordPress’a, а не файлы темы. Да, это может-быть покажется кому-то опасным, кому-то бессмысленным, кому-то просто не понравится:) Но Я сделал это именно так и никаких проблем у меня не возникло. Советую перед началом сделать бекап редактируемого файла.
Насчет безопасности предупредил, теперь хочу показать результат, к которому я пришел.



Как мы видим, была убрана строчка «Ваш e-mail не будет опубликован. Обязательные поля помечены *». Не нужно считать посетителей безмозглыми идиотами. Они итак понимают что нужно заполнять, а что нет. Так же я спрятал названия полей внутрь самих полей. К чему эти жирные записи? Большинство посетителей уже и без названий полей может «на глаз» определить, какое к чему относится. Но внутренние хинты все таки должны присутствовать. Ну и подпись к полю комментария утратила свою ненужную жирноту. На мой взгляд, так стало гораздо лучше и свободней.

Так давайте же скорее все менять! ;)
Идем в папку своего сайта и находим в нем файл wp-includes/comment-template.php. Ищем в нем строку 1522, да да именно ее. Как я сам ее нашел это целая история, расскажу об этом чуть позже:)
Итак, открываем файл на редактирование и переходим к 1522 строчке. Сейчас она и следующие (до 1529й) примерно такие:

$fields = array("author" => "

" . " " . ($req ? "*" : "") . "

", "email" => "", "url" => "

" . "

",);

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

Placeholder="Текст подсказки"

Этот параметр позволяет выводить внутри полей любой текст. Используем его для вывода подсказок:

"

" "

" "

"

Удалять же будем строки:

"

" . " " . ($req ? "*" : "") "

"

Они отвечают за вывод подписей над полями.
В результате ВСЕХ этих манипуляций, получаем следующее:

$fields = array("author" => "

", "email" => "

", "url" => "

",);

Остается только удалить глупую подсказку «Ваш e-mail не будет опубликован. Обязательные поля помечены *». Для этого удаляем строку (примерно 1537):

"comment_notes_before" => "

" . __("Your email address will not be published.") . ($req ? $required_text: "") . "

",

Вот вроде бы и все, теперь наша форма стала немного более привлекательной. Надеюсь эта информация кому-то пригодится:)

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

Понравилась статья? Поделитесь ей