Лабораторная работа 3. Виджет ВКонтакте для комментариев.

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

При желании, каждый оставленный комментарий может транслироваться на страницу комментатора ВКонтакте со ссылкой на исходную статью. Со страницы автора и из раздела «Новости» о статье узнают друзья автора и смогут присоединиться к дискуссии.

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

Основными преимуществами виджета комментариев ВКонтакте являются:

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

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

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

4. Скорость. В отличие от других возможностей социализации, виджет ВКонтакте очень прост в установке и может быть внедрён на все страницы Вашего сайта в течение 5 минут. Для достижения высокой скорости установки и работы виджета разработчики ВКонтакте применили новейшие технологии и задействовали десятки наиболее мощных серверов ВКонтакте.

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

6. Цитируемость.Каждый комментарий может становиться статусом пользователя ВКонтакте и содержать ссылку на Ваш ресурс. Комментарий появляется не только в новостях у друзей пользователя, но и в поиске по статусам ВКонтакте. Благодаря партнёрству между ВКонтакте и Яндексом данные статусы в течение месяца будут индексироваться в поиске Яндекса в режиме реального времени, что станет источником дополнительной посещаемости для сайтов, разместивших виджет.

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

8. Гибкость. Предложив ряд уникальных преимуществ, разработчики ВКонтакте постарались сделать виджет комментариев максимально привлекательным для администраторов и пользователей сайтов. Однако новостные и развлекательные ресурсы могут нуждаться в дополнительных возможностях настройки виджета. Команда ВКонтакте всегда готова пойти навстречу владельцам сайтов. Для реализации конкретных интересных предложений всегда можно обратиться в пресс-службу ВКонткте по электронной почте [email protected].

Для создания виджета комментариев достаточно воспользоваться специальным конструктором размещённым по адресу https://vk.com/dev/Comments изображённым на рисунке 3.1.

Рисунок 3.1 – Конструктор виджета комментариев ВКонтакте

Заполните все поля конструктора как показано на рисунке 3.2.

Рисунок 3.2 – Заполнение полей виджета комментариев ВКонтакте

В конструкторе можно выбрать количество комментариев, показываемых на Вашем сайте. Например, при выборе 5 комментариев будут показываться первые 5 комментариев, для показа же остальных нужно нажать кнопку «к предыдущим записям» (рисунок 3.3).

Рисунок 3.3 – Внешний вид виджета комментариев

Комментарии можно дополнять различными медиа-элементами. Если убрать галочку рядом с пунктом «Включить расширенные комментарии», то рядом с окном комментариев ссылка на добавление медиа «Прикрепить» исчезнет. Можно выборочно отключить медиа-элементы. Для этого нужно рядом с пунктом «Включить расширенные комментарии» нажать на ссылку «подробнее» и убрать галочки с тех элементов какие Вам не нужны (рисунок 3.4).

Рисунок 3.4 – Выбор медиа-элементов для комментирования

В конструкторе можно настраивать ширину окна комментариев. По умолчанию значение ширины равно 665 px. Если ширина новостного блока на Вашем сайте меньше этого значения, то блок комментариев будет выходить за границы этого блока, если же наоборот ширина новостного блока больше ширины блока комментариев, то виджет тоже будет плохо смотреться на сайте. Поэтому предварительно нужно определить ширину Вашего новостного блока. Для этого откройте локальный тренировочный сайт http://signature.local/, перейдите в раздел «Новости» и откройте консоль разработчика нажатием клавиши «F12». Я рекомендую для этого использовать браузер Mozilla Firefox, поскольку у него консоль разработчика русифицирована. В инспекторе элементов выберите новостной блок и посмотрите его ширину. Например, на рисунке 3.5 мы видим, что ширина новостного блока равна 660 px. Введите данное значение в поле «Ширина» конструктора виджета и нажмите кнопку «Сохранить».

Рисунок 3.5 – Определение размеров новостного блока

После нажатия на кнопку «Сохранить» и подтверждения действия конструктор сгенерирует код для вставки на страницу Вашего сайта (рисунок 3.6). Если Вы внимательно присмотритесь к сгенерированному коду, то заметите, что две самых первых строки такие же, как и у предыдущего виджета, а следующие три строки отличаются только номером API_ID, или даже API_ID может быть тот-же. Следовательно, в голову html страницы нужно вставить только эти три строки, выделенные зелёной рамкой или ничего не вставлять, если у Вас уже закреплён API_ID за этим сайтом.

Рисунок 3.6 – Полученный код для вставки виджета на сайт

Код выделенный красной рамкой нужно вставить в то место html страницы где Вы хотите разместить блок комментариев. Синим цветом в коде подчёркнуты строки с настройками виджета, которые Вы выбрали в конструкторе. Если Вы желаете изменить количество комментариев, то Вам достаточно изменить значение limit, а ширину блока комментариев – значение width. В значении attach перечислены медиа элементы, которые можно добавлять к комментариям.

Скопируйте код выделенный зелёной рамкой на рисунке 3.6 в голову файла index.html локального тестового сайта ниже подключения api библиотеки виджетов (рисунок 3.7).

Рисунок 3.7 – Вставка кода инициализации виджета в голову html страницы

Скопируйте код выделенный красной рамкой на рисунке 3.6 в то место файла index.html где Вы хотите разместить блок комментариев (рисунок 3.8).

Рисунок 3.8 – Вставка кода блока комментариев в html страницу

Откройте в браузере Ваш тестовый сайт http://signature.local/ и перейдите в раздел новостей. Если Вы сделали всё правильно, то внизу страницы появится блок комментариев, изображённый на рисунке 3.8. Оставьте комментарий, попросите одногруппников прокомментировать Ваш комментарий, оцените комментарии друг друга, создайте комментарии со всеми возможными мультимедиа элементами, отредактируйте записи, удалите записи.

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

Рисунок 3.9 – Вставка кода блока комментариев в html страницу.

Рисунок 3.10 – Назначение администраторов блока комментариев.

Выберите уровень полномочий администратора: полный или частичный доступ (рис. 3.11).

Рисунок 3.11 – Выбор уровня полномочий для администратора.

Возможно Вам придётся привязать к странице ВКонтакте Ваш мобильный телефон как показано на рисунках 3.12 – 3.13.

Рисунок 3.12 – Привязка мобильного устройства к странице.

Рисунок 3.13 – Подтверждение действие с помощью SMS кода.

Рисунок 3.14 – Список руководства виджета.

После того как Вы добавите нового пользователя в администраторы от отобразится в списке «Руководство» (рис. 3.14). Добавьте ещё одного администратора с другим уровнем полномочий (рис. 3.15). Создайте администратора, который сможет просматривать только статистику без возможности редактирования.

Рисунок 3.15 – Выбор уровня полномочий администратора.

После этого у Вас будет в списке «Руководство» три администратора (рис. 3.16). Разжалуйте администратора с полным доступом (рис. 3.17).

Рисунок 3.16 – Список «Руководство» в момент сохранения изменений.

Рисунок 3.17 – Подтверждение удаления пользователя из списка администраторов.

Попросите пользователей, которых Вы добавили в администраторы сайта поуправлять блоком комментариев. Пусть они удалят несколько комментариев, добавят пользователей в «чёрный список», восстановят пользователей из «чёрного списка» (рис. 3.18 – 3.20).

Рисунок 3.18 – Удаление записи комментариев.

Рисунок 3.19 – Добавление пользователя в «чёрный список».

Рисунок 3.20 – «Чёрный список».