RSS
 

Ставим виджет Вконтакте на сайт

22 Апр

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

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

И сегодня я решил рассказать о виджете ВКонтаките. И сразу скажу, что установка его еще проще чем виждета Instagram. Самое главное, что в данном случае нам не потребуется плагин, т. е. Все сказанное в этой статье, таким образом, будет справедливо для сайта на любой платформе. Разница будет лишь в способе интеграции кода виджета в шаблон сайта.

Итак, начнем:

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

Обращаемся к интерфейсу генератора кода виджета.

Обращаемся к интерфейсу генератора кода виджета.

  1. Ссылка на страницу — сюда копируем адрес нашего сообщества в формате без ЧПУ, т. е. как он был при создании сообщества (возможно вы вместо цифр в хвосте ссылки прописывали нечто более понятное). Например адрес моей группы с ЧПУ http://vk.com/biz_onlinet без ЧПУ http://vk.com/club58299158

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

  3. Ширина и высота в пикселях. Здесь все зависит от размеров области вашего шаблона, где будет установлен виджет. Соизмеряем. Я себе ставлю 190х350. В таком окне будет видно 6 друзей (думаю достаточно).

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

  5. Цвет текста — будет читаться на вашем фоне, поэтому должен быть достаточный контраст и кроме того, он должен сочетаться с шаблоном. Я ставлю коричневый.

  6. Цвет кнопки — тоже должен гармонировать с шаблоном.

  7. Теперь код готов, можно его копировать.

Вот как выглядел генератор в моем случае:

Вот как выглядел генератор в моем случае

Вот как выглядел генератор в моем случае

Кстати, после примерки в шаблон пришлось ширину со 190 уменьшить до 170 px.

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

Просто перетаскиваем текстовый виджет из левого поля «Доступные виджеты» в рабочее поле справа и вставляем туда скопироваггый код.

Просто перетаскиваем текстовый виджет из левого поля «Доступные виджеты» в рабочее поле справа и вставляем туда скопироваггый код.

Жмем сохранить. Все! Проверяем результат.

PS:

Позже прописал еще заголовок - "Я ВКонтакте"

Поделиться в соц. сетях

Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники
 

Прокомментировать