В прошлый раз мы с вами занимались установкой на наш блог на платформе WordPress виджета Instagram, с использованием одного из плагинов, разработанных для этой цели, и предварительно мной протестированного.
Еще несколько раньше мы уже договорились, что в ближайшее время будем интегрировать наш блог (сайт) рассылку с нашими сообществами в социальных сетях.
И сегодня я решил рассказать о виджете ВКонтаките. И сразу скажу, что установка его еще проще чем виждета Instagram. Самое главное, что в данном случае нам не потребуется плагин, т. е. Все сказанное в этой статье, таким образом, будет справедливо для сайта на любой платформе. Разница будет лишь в способе интеграции кода виджета в шаблон сайта.
Итак, начнем:
Заходим на страницу https://vk.com/dev/Community (вы должны быть авторизованы Вконтакте), при желании читаем вводную часть и обращаемся к интерфейсу генератора кода виджета.

Обращаемся к интерфейсу генератора кода виджета.
-
Ссылка на страницу — сюда копируем адрес нашего сообщества в формате без ЧПУ, т. е. как он был при создании сообщества (возможно вы вместо цифр в хвосте ссылки прописывали нечто более понятное). Например адрес моей группы с ЧПУ http://vk.com/biz_onlinet без ЧПУ http://vk.com/club58299158
-
Пунктом мы выбираем стиль виджета — участники, новости, только название. Рекомендую — участники. В этом случае пользователь видя среди участников группы своих друзей, подпишется с большей вероятностью. Кстати, чуть ниже генератора, в реальном времени можно видеть результат формирования нашего виджета.
-
Ширина и высота в пикселях. Здесь все зависит от размеров области вашего шаблона, где будет установлен виджет. Соизмеряем. Я себе ставлю 190х350. В таком окне будет видно 6 друзей (думаю достаточно).
-
Цвет фона. Думаю, для большинства шаблонов лучше оставить белый. Кстати, цвет выбирается через палитру, после клика на кружочке, показывающем, сам цвет. Все здесь удобно и наглядно.
-
Цвет текста — будет читаться на вашем фоне, поэтому должен быть достаточный контраст и кроме того, он должен сочетаться с шаблоном. Я ставлю коричневый.
-
Цвет кнопки — тоже должен гармонировать с шаблоном.
-
Теперь код готов, можно его копировать.
Вот как выглядел генератор в моем случае:

Вот как выглядел генератор в моем случае
Кстати, после примерки в шаблон пришлось ширину со 190 уменьшить до 170 px.
Интеграция кода в шаблон. Поскольку в данном случае, я имел дело с WordPress, то использовал механизм виджетов — Внешний вид — Виджеты. Просто перетаскиваем текстовый виджет из левого поля «Доступные виджеты» в рабочее поле справа и вставляем туда скопироваггый код.

Просто перетаскиваем текстовый виджет из левого поля «Доступные виджеты» в рабочее поле справа и вставляем туда скопироваггый код.
Жмем сохранить. Все! Проверяем результат.
PS:
Позже прописал еще заголовок - "Я ВКонтакте"