Честно говоря, когда увидел, что по этому поводу пишут и советуют новичкам на других сайтах, немного ужаснулся и решил запилить свою заметку на эту тему без фатального недостатка . В основном я видел длинные полотнища кода, которые реализуют добавление комментариев на сайт . Обычно для этого создают форму, реализуют ее обработку, сохранение, а так же выборки для отображения. Но преимуществ подобного подхода чем дальше, тем все меньше.
В этой заметке вы узнаете один из самый простых (но, субъективно, один из наиболее предпочтительных) способов добавить комментарии на сайт - простой пример для новичков + варианты для более продвинутых веб-мастеров.
Действительно, для чего изобретать велосипед и писать кучу кода, который в будущем еще придется поддерживать, фиксить и т.д., если есть куча готовых решений от сторонних сервисов (речь идет о социальных сетях + 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. Пример работы - внизу (примеры кода взяты с этого сайта)
Инструкция
В том случае, если для сайта используется профессиональная платформа, обычно платная, в ней уже есть все необходимые модули, в том числе и блок комментариев. Но как поступить, если вы только осваиваете веб-дизайн, создали простой сайт на чистом 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. После этого проверьте возможность оставлять комментарии, все должно работать.
Источники:
- как добавить комментарии в видео
Прочитав в интернете новость, порой хочется высказать свое мнение о ней. Поэтому на многих новостных сайтах предусмотрена возможность оставления пользовательских комментариев к публикуемым новостям.
Инструкция
Форма для комментария состоит из полей двух видов: обязательных и необязательных для заполнения. Первые отличаются от вторых либо цветом, либо наличием звездочки рядом с каждым из них. Заполните все обязательные поля, а при желании - и некоторые из необязательных. В большое многострочное поле введите сам комментарий.
Если имеется счетчик набранных или оставшихся символов, следите за его показаниями - может иметься ограничение как на максимальную, так и (реже) на минимальную длину сообщения. Эти ограничения, если они есть, указаны рядом с полем. Введя текст, проверьте, правильно ли заполнены все поля, а затем нажмите кнопку, которая может называться «Отправить», «Добавить комментарий», и т.п.
На некоторых сайтах предусмотрены капчи - картинки с буквами, цифрами, которые надо прочитать и ввести результат в расположенное рядом поле. Знаки написаны таким шрифтом, что их автоматическое распознавание затруднительно, зато человек прочитать их может. Это - защита от автоматизированного добавления комментариев.
Прочитайте то, что видите на картинке, и введите в соответствующее поле. Если прочитать символы не удается, нажмите расположенную рядом с капчей кнопку обновления. На некоторых сайтах вместо капч или наряду с ними применяются контрольные вопросы в свободной форме, на которые без труда ответит человек, но не машина. Например, на вопрос «Что открылось в Сочи седьмого марта 2014 года?» ответьте: «Паралимпийские игры».
Есть сайты, где для добавления комментариев нужно предварительно зарегистрироваться. В верхней части страницы найдите ссылку или кнопку под названием «Регистрация», «Зарегистрироваться», «Создать аккаунт», «Создать учетную запись». Заполните все обязательные поля, указав свой настоящий адрес электронной почты. Пароль придумайте сложный и не совпадающий с паролем от почты.
На многих блогах комментарии оформлены небрежно. Это, безусловно, не есть хорошо, ведь именно через комментарии происходит общение между автором блога и его читателями. Именно поэтому я предлагаю рассмотреть несколько полезных «штучек», которые помогут привести ваши комментарии в надлежащий вид. Итак, сразу приступим к делу.
Все написанное ниже я проделал и проверил сам. Каждый хак проверен для версий WordPress до 2.7 и после. Если есть отличия, код разбирается для обеих версий.
Проблема: Не зависимо от того, разрешаете ли вы своим читателям оставлять комментарии без предварительной модерации, их часто приходится редактировать, удалять или отправлять в «спам». По умолчанию WordPress показывает только кнопочку «Редактировать» (делается это при помощи функции edit_comment_link ()) , но кнопочек «Удалить» и «Спам» нет. Стоит добавить.
Решаем проблему: В первую очередь добавим небольшую такую функцию в functions.php нашего шаблона.
function delete_comment_link($id) { if (current_user_can("edit_post")) { echo " (Удалить)"; echo " (Спам)"; } }
Найдем что-то в духе:
И у нас появятся волшебные кнопки «Удалить» и «Спам». Очень надеюсь эти кнопочки вам не пригодятся, а все комментарии будут по делу.
2. Разделяем комментарии и трекбекиОб этом я уже писал в (для версий WP 2.7 и выше).
Пожалуй стоит написать и для более старых версий.
Проблема: Необходимо сделать раздельный вывод комментариев и трекбеков в записи. Проблема актуальная если ваш пост имеет много трекбеков оставленных в разное время. В этом случае комментарии и трекбеки превратятся в кашу, в которой вы сами не разберетесь, не говоря уже про ваших читателей.
Решаем проблему: Повторюсь, это способ для шаблонов WordPress до версии 2.7.
Открываем файл comments.php нашей темы и находим там примерно следующее:
Берем и заменяем этот код полностью на следующий:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Function wph_change_submit_label($defaults) { $defaults["title_reply"] = "Оставить свой отзыв"; return $defaults; } add_filter("comment_form_defaults", "wph_change_submit_label");
БонусЭто то же самое, по сути что делалось и в первом способе, просто, там мы внедряли непосредственно в массив, а тут через фильтр. После этих действий, вы увидите изменение в названии. Как и в первом способе, можете поменять текст - Оставить свой отзыв, на тот что вам нравится. Данный текст указан как пример.
Еще хочу предложить и обратить внимание на склонение слова Комментарии. Если у вас выводит в форме строку - Опубликовано 1 комментарий или Комментариев: 10. Можете воспользоваться Функцией из статьи . Если вы уже пользуетесь ней, то рекомендую в строке с массивом:
Array("комментарий","комментария","комментариев")
Изменить названия на отзыв,отзыва,отзывов, если вы использовали это слово в способах выше. таким образом, у вас будет все одинаково, а не в разброс, там отзывы, а там комментарии.
Вот такую информацию, хотел сегодня вам предоставить. Возможно, кому-то она станет полезной.
На этом все, спасибо за внимание. 🙂
Информация о марке, модели и альтернативных названиях конкретного устройства, если таковые имеются. ДизайнИнформация о размерах и весе устройства, представленная в разных единицах измерения. Использованные материалы, предлагаемые цвета,...
Компьютерная грамотностьСегодня компьютерные технологии, стремительно развиваются, совершенствуя другие отрасли производства. Для развития других технологий, с помощью компьютерных, нужны специальные программы. Эти программы устанавливают на многие заводы и фабрики, чтобы...
Полезные программыИнструкция Два сравнительно небольших экрана могут с легкостью заменить один широкоформатный с большой диагональю. Иногда подключение второго позволяет использовать одновременно несколько функций одного компьютера. Современные видеоадаптеры в...
Решение проблемКак открыть консоль выполнить на windows 10
Советы начинающим