Лабораторная работа 2. Виджет «Мне нравится».

Виджет «Мне нравится» позволяет посетителям Вашего сайта одним кликом выразить своё отношение к статье или моментально поделиться ссылкой на статью с друзьями.

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

Для создания виджета «Мне нравится» можно воспользоваться конструктором, который расположен по адресу https://new.vk.com/dev/Like и показан на рисунке 2.1.

Рисунок 2.1 – Конструктор виджета «Мне нравится»

В конструкторе можно выбрать один из четырёх вариантов кнопок, имеется четыре варианта высоты кнопки и два варианта названия кнопки – «Мне нравится» (рисунок 2.2) или «Это интересно» (рисунок 2.3). Есть два варианта миниатюрных кнопок без подписи с миниатюрным счётчиком справа (рисунок 2.4) или сверху (рисунок 2.5).

Рисунок 2.2 – Кнопка с миниатюрным счётчиком и названием «Мне нравится»

Рисунок 2.3 – Кнопка с текстовым счётчиком и названием «Это интересно»

Рисунок 2.4 – Миниатюрная кнопка без подписи

Рисунок 2.5 – Миниатюрная кнопка, счётчик сверху

Заполните поля конструктора как показано на рисунке 2.6 и нажмите кнопку сохранить.

Рисунок 2.6 – Настройка конструктора виджета «Мне нравится»

После нажатия на кнопку «Сохранить» появится модальное окно для подтверждения действия ВКонтакте, изображённое на рисунке 2.7.

Рисунок 2.7 – Подтверждение действия ВКонтакте

После подтверждения действия в окне «Код для вставки» появится код с идентификатором виджета API_ID, подчёркнутый красным цветом на рисунке 2.8. Данный идентификатор приложения играет ключевую роль в работе виджета. Если связка идентификатора и адреса сайта виджета в настройках конструктора не будет совпадать с адресом сайта на котором размещён данный виджет или API_ID в коде на этом сайте, то виджет работать не будет.

Рисунок 2.8 – Сгенерированный код конструктором виджета «Мне нравится»

Код выделенный зелёной рамкой на рисунке 2.8 вставьте в голову html страницы (рисунок 2.9), а код выделенный красной рамкой в то место html страницы где бы Вы хотели видеть кнопку виджета (рисунок 2.10). Обратите внимание на номера строк слева на рисунках 2.9 – 2.10.

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

Рисунок 2.10 – Вставка кода кнопки в html код страницы

Перейдите на локальном тестовом сайте в раздел «Новости», в рубрику «БИЗНЕС». Если на кнопку ещё никто не нажимал, то счётчик будет показывать значение «+1». Если же нажать на кнопку, то значение изменится на «1» и будет увеличиваться при каждом нажатии. Если навести курсор мыши на кнопку, то появится подсказка с информацией кому понравилась запись (рисунок 2.11). Если Вы не вошли ВКонтакте и нажали на кнопку виджета, то появится окно входа, изображённое на рисунке 1.17.

Рисунок 2.11 – Подсказка кнопки мне нравится на сайте

На подсказке можно нажать на ссылку «Рассказать друзьям» при нажатии на которую появится модальное окно «Рассказать друзьям» (рисунок 2.12). Можно поделиться записью с друзьями, нажатием кнопки «Отправить» или отменить действие.

Рисунок 2.12 – Всплывающее окно «Рассказать друзьям»

При отправке записи на стене пользователя появляется запись, подобная записи виджета «Публикация ссылок» (рисунок 2.13).

Рисунок 2.13 – Запись на странице пользователя, который рассказал друзьям

Тестовые вопросы по теме 2

1. Что не позволяет сделать виджет «Мне нравится»?

a. выразить отношение к статье одним кликом

b. добавить смайлик

c. поделиться ссылкой на статью с друзьями

2. Какого варианта названия кнопки не имеется в конструкторе?

a. мне нравится

b. мне не нравится

c. это интересно

3. С какой стороны от кнопки не бывает счётчика?

a. справа

b. снизу

c. сверху

4. Что происходит после нажатия на кнопку «Сохранить» в конструкторе?

a. появляется модальное окно с поздравлениями

b. появляется модельное окно для подтверждения действия ВКонтакте

c. появляется модальное окно авторизации пользователя

5. Выполнение каких условий достаточно для работы виджета?

a. API_ID в коде html страницы сайта должен совпадать с API_ID виджета

b. Адрес страницы сайта должен совпадать с адресом страницы в настройках виджета

c. Должны выполняться оба условия

6. Какое значение будет показывать счётчик кнопки виджета, если на неё никто не нажимал?

a. 0

b. 1

c. +1

7. Что произойдёт если навести курсор мыши на кнопку виджета?

a. Значение счётчика увеличится на единицу

b. Появится подсказка с информацией кому понравилась запись

c. Ничего не произойдёт

8. Что нужно сделать, чтобы значение счётчика увеличилось на единицу?

a. Зайти ВКонтакте и нажать на кнопку

b. Просто нажать на кнопку, ВКонтакте заходить не нужно

c. Разместить на стене ВКонтакте запись с сайта с кнопкой

9. Что произойдёт при нажатии на кнопку виджета, если Вы не зарегистрированы ВКонтакте?

a. значение счётчика увеличится на единицу

b. появится модальное окно «Вход»

c. ничего не произойдёт

10. Что произойдёт если нажать на кнопку виджета два раза?

a. Значение счётчика увеличится на два

b. Учитывается только первое нажатие, поэтому значение счётчика увеличится на 1

c. После первого нажатия значение счётчика увеличится на 1, а после второго уменьшится на 1