Виджет опросов вконтакте

Вконтакте виджет опросаВсем пламенный привет!

Сегодня, около трех часов назад, на официальном твиттер-аккаунте соц.сети «Вконтакте» появилось сообщение о том, что стал доступен новый виджет — виджет опросов.

Теперь, каждый желающий владелец сайта может установить себе новую форму опроса посетителей. Зачем это нужно, спросите вы, ведь существует куча самописных опросов, сервисов опросов (например, PollDaddy.com), а также плагинов и модулей к различным движкам. Я отвечу на этот вопрос, а, заодно, покажу, как установить виджет на свой сайт.

Сразу к преимуществам: посетитель, ответив на вопрос, может поделиться с друзьями вконтакте. После подтверждения, вопрос и ответ появятся в статусе юзера.

Еще из преимуществ следует отметить простоту установки. Я расскажу вам, что нужно сделать, чтобы получить такой опросник себе на сайт.

Шаг 1. Получение кода.

Для начала, переходите на страницу документации по виджету. В поле «Сайт/приложение» выбираем «Подключить новый сайт». Вводим данные — название (произвольно), адрес.

Чуть ниже, вводим вопрос и варианты ответов к нему. Здесь трудностей возникнуть не должно. Жмакаем «Получить код» — копируем весь код куда-нибудь, например, в «Блокнот».

Шаг 2. Установка кода.

Берем первую часть кода:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?2"></script>

<script type=»text/javascript»>
VK.init({apiId: 1968352, onlyWidgets: true});
</script>

И копируем его в html-код вашей страницы, аккурат перед тегом </head>. ВНИМАНИЕ. Копируйте не мой код, а свой, там будут разные значения apiId.

Далее, берем вторую часть выданного кода:

<!-- Put this div tag to the place, where the Poll block will be -->
<div id="vk_poll"></div>
<script type="text/javascript">
VK.Widgets.Poll("vk_poll", {width: "200"}, "45_383920aa540ec44f93");
</script>

И вставляем его аккурат в то место на сайте, где планируется вывести опрос. Боковая колонка, какая-то новость (как у меня) или еще где — абсолютно без разницы. Разумеется, мой код копировать не следует — он работать не будет.

Шаг 3. Эмм..

А какой, собственно, шаг 3? Мы все сделали :) Теперь, осталось только взглянуть на свое творение:

P.S. Блоку опроса можно придать стиль, ведь у него есть id=»vk_poll». Я своему добавил черный border толщиной в 1 пиксель и отцентрировал, использовав свойство margin: auto.

Вот и все, что я хотел рассказать о новом виджете. Если есть что дополнить, подкорректировать мои слова — милости прошу, комментируйте.

До новых встреч!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>