Добавление комментариев на сайт

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

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

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

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

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

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

Недостатки:

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

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

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

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

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

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

<script type="text/javascript" src="//vk.com/js/api/openapi.js?126"></script>
<script type="text/javascript">
  VK.init({apiId: 2951023, onlyWidgets: true});
</script>

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

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {redesign: 1, limit: 10, width: "665", attach: "*"});
</script>

И все! Менее, чем за минуту вы добавили себе комментарии, пользуясь всеми вышеупомянутыми преимуществами.

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

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

<div class="comments-wrapper">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#disqus_thread" data-toggle="tab">Discuss</a></li>
        <li role="presentation"><a href="#vk-comments" data-toggle="tab">Vkontakte</a></li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="disqus_thread"></div>
        <div role="tabpanel" class="tab-pane vk-comments" id="vk-comments"></div>
    </div>
</div>

Дальше самый простой вариант просто проинициализировать каждый виджет комментариев, использовав соответствующие элементы (#disqus_thread, #vk-comments), как в первом примере.

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

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

(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[type]) {
        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[type] = true;
    };
    
    $tabToggler = $('.comments-wrapper a[data-toggle="tab"]');
    $tabToggler.on('shown.bs.tab', function(e) {
      initComments($(e.target).attr("href"));
    });
    
    initComments($tabToggler.closest('.active').find('a[data-toggle="tab"]').attr('href'));
  });
})(window, jQuery);

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

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

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

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

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