Контакты

Сшить club user добавить комментарий комментариев. Тонкая настройка формы комментирования

Инструкция

В том случае, если для сайта используется профессиональная платформа, обычно платная, в ней уже есть все необходимые модули, в том числе и блок комментариев. Но как поступить, если вы только осваиваете веб-дизайн, создали простой сайт на чистом 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. Пример работы - внизу (примеры кода взяты с этого сайта)

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

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

Как же добавить форму Вконтакте на сайт? Инструкция довольно простая.

1. Откройте раздел для разработчиков

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

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


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



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

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

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

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


4. Добавьте готовый код на сайт

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

Верхнюю часть кода нужно разместить между тегами и

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


Для примера, на сайтах под управлением CMS WordPress для редактирования шаблона нужно зайти в админ-панель, и во вкладке "Внешний вид" выбрать нижний пункт "Редактор". Первую часть кода нужно вставлять в header.php , так как теги обычно находятся там, а вторую можно вставить в comments.php, то есть туда же, где выводятся и обычные комментарии wordpress, до или после них.

5. Проверка и модерация

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


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

Как добавить возможность комментирования на сайт? Система комментирования контента 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, то в поле вывода комментариев он не переносится автоматически и растягивает весь сайт на длину комментария.

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

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