Верстаем landing page во Вконтакте

Всем - привет. Несколько раз мне писали уже с просьбой сделать landing page во Вконтакте. Я сразу не мог понять, о чем вообще речь, так как формулировали неправильно вопросы и мысль.

Что-то такое: "Как сделать лендинг для вк" или "Помогите сделать вк лендинг", в общем, после очередного случая, я поинтересовался у женщины, что она имеет ввиду, и оказалось, что нужно при помощи вики разметки просто сверстать страничку в ВК. Как многие из вас, наверное, уже делали меню для своих групп.

В общем, если кому-то интересно, то давайте разберемся, как создать такой лендинг во Вконтакте.

Лендинг во Вконтакте при помощи Вики-разметки

Не буду расписывать здесь, что такое Вики-разметка. Для тех, кто совсем не в курсе, то вот ссылка на определение в Википедии (тыц). Для тех, кому лень читать, то просто скажу, что этот вид разметки используется в социальной сети Вконтакте для создания страниц. Удобно это или нет, решать вам, и спорить здесь бессмысленно, давайте просто воспользуемся ей, для того, чтобы сверстать такую страничку в ВК:

На самом деле, ничего сложного в вики-разметке - нет. За несколько часов можно разобраться. К тому же, она очень похожа на html, только для построения подобных страниц не используют кнопки, не верстают каждый отдельный элемент, а просто (грубо) нарезают макет, и оформляют нужный участок ввиде ссылки, при необходимости. То есть в местах где есть, например, кнопка, или ссылка на оплату, заказ и т.д.

Если описать все на html, то это будет просто набор картинок, некоторые из которых являются ссылками. Все максимально просто.

Итак, начать стоит с того, что нам нужно создать новую страничку в группе или паблике. Для этого нужно воспользоваться ссылкой вида:

http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы

Где, XXX - это id паблика или группы. А вместо "Название_страницы" - нужно указать любое слово или словосочетание, которым будет названа страница.

Для того, чтобы узнать id группы, нужно зайти в управление группой и посмотреть раздел "адрес страницы":

Если у вас, как и у меня задан человекопонятный URL, тогда нужно нажать на все записи стены или на любую публикацию на стене. Выглядеть будет примерно так:

http://vk.com/wall-69093928

69093928 - и есть id нашей группы. В итоге у меня получилась такая ссылка:

http://vk.com/pages?oid=-69093928&p=Создание_Landing_page

Теперь вставьте полученную ссылку в адресную строку браузера и нажмите "Enter". Перед вами откроется такая страница:

Как видите, возможности визуального редактора довольно скудны, поэтому, как я уже говорил, все меню, кнопки, и ссылки оформляются картинками.

Ширина вики-страницы, в ВК - 607 пикселей, поэтому и макет должен быть соответствующих размеров. Теперь, нужно нарезать макет. Я разделил свой прототип на 5 частей и, соответственно, получил 5 картинок. Визуально, это выглядит так:

Теперь, для того, чтобы это все выстроить как нам нужно, необходимо разобраться с тем, как оформляются картинки и ссылки. Выглядит это - очень просто:

[[photoXXX_XXX|607px;nopadding;|Ссылка]]

PhotoXXX_XXX - это ссылка на изображение. Все картинки, которые вы хотите показать, должны храниться в альбоме. Альбом может быть, как общий, так и специально созданный для конкретной задачи. Я создал отдельный, как раз для таких целей (оформления страниц, меню и прочей ерунды). Вот он: _http://vk.com/album-69093928_226467291

Чтобы узнать ссылку на страничку, нужно зайти в альбом и кликнуть на нужную картинку:

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

Теперь, давайте поговорим об оформлении ссылки, которая будет направлять пользователей в указанное нами место :) Просто стараюсь вас не запутать. Надеюсь - получается. Пользователей можно направлять как на раздел или другую страницу, так и за пределы ВК. Если у вас, как и у меня, ссылки должны вести на другой сайт, то просто прописываете адрес сайта, например, https://smartlanding.biz. Если, другая страница в ВК или раздел в группе, то ссылка будет выглядеть так: page-123456789_123456789.

В конечно итоге, у меня получилось так:

[[photo-69093928_397623715|607px;nopadding| ]]
[[photo-69093928_397623716|607px;nopadding;|http://goo.gl/AxrAoR/]]
[[photo-69093928_397623717|607px;nopadding;|http://goo.gl/wuXmt1/]]
[[photo-69093928_397623718|607px;nopadding;|http://goo.gl/Jwf2a4/]]
[[photo-69093928_397623719|607px;nopadding;|https://smartlanding.biz/]]

Как видите - ничего сложного. Вот мой результат: конструкторы landing page. Некоторые из вас, наверное, заметят, что у меня перед страницей - есть заголовок. Чтобы его прописать, нужно на странице редактирования, нажать на ссылку "Добавить" и в открывшемся окошке прописать его.

Если вам интересно подробнее познакомиться с вики-разметкой, то в ВК создана специальная группа, которая поможет в этом. Вот страничка на документацию.

Пишите свое мнения, как вам идея, какие видите способы применения? Нравится вообще задумка или нет?