Как подключить виджет Сообщения сообщества Вконтакте

Здраствуйте, меня зовут Вячеслав, я программист проекта WebArtIs.Ru и я расскажу вам как подключить виджет Сообщения сообщества на свой сайт без потери скорости загрузки сайта.

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

Так не годится - решили мы и стали искать способ безболезненного подключения виджета.

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

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

Мы пользуемся библиотекой jQuery и поэтому, весь код написан с ее использованием.

Для создания кнопки подойдет любая ссылка или иной html элемент с наличием ID.

Мы использовали ссылку : <a href="#" id="chattrigger">Чат Вконтакте</a>.

Код полученный на странице создания виджета мы обернули в анонимную функцию jQuery, создали событие "click" привязанное к ID ссылки и уже в нем вызвали загрузку и инициализацию виджета.

Код вызова целиком:

 
  (function($) {
      'use strict';
      
            $('#chattrigger').on( "click", function() {
                if($('#chattrigger').hasClass('is-open')===true){ return false; }
                $('#chattrigger').toggleClass('is-open');
                $.ajax({
                      url: 'https://vk.com/js/api/openapi.js?2411391688',
                      dataType: 'script',
                      cache: true
                }).done(function() {
                  $('body').append('<div id="vk_community_messages"></div>');
                  VK.Widgets.CommunityMessages("vk_community_messages", 140539751, {
                      expanded: "1",
                      //expandTimeout: "360000",
                      disableExpandChatSound: "1",
                      //disableNewMessagesSound: "1",
                      //widgetPosition: "left",
                      tooltipButtonText: "Есть вопрос?",
                      //disableButtonTooltip: "1"
                      });
                });
                return false;
            });
            
  })(jQuery);
  

В результате - объем кода вырос всего на несколько байт, нет никаких лишних запросов и ненужных загрузок, а виджет встроен на сайт и может быть использован теми, кому он действительно нужен и тогда, когда он нужен.

Результат в действии можно увидеть в футере нашего сайта.