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

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

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

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

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

landing page вконтакте

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

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

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

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

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

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

landing page вконтакте

Если у вас, как и у меня задан человекопонятный 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 нужен для того, чтобы между картинок не было пустого пространства, так как по умолчанию оно присутствует, а у меня темный фон и белые полосы смотрелись бы странно.

Теперь, давайте поговорим об оформлении ссылки, которая будет направлять пользователей в указанное нами место :) Просто стараюсь вас не запутать. Надеюсь - получается. Пользователей можно направлять как на раздел или другую страницу, так и за пределы ВК. Если у вас, как и у меня, ссылки должны вести на другой сайт, то просто прописываете адрес сайта, например, http://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;|http://smartlanding.biz/]]

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

Разработка лендинга во вконтакте

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

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

 

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 3

  1. Даулет

    Иногда придется сделать две кнопки параллельно по 300 и 307px в таком случае в мобильном версии вк мой блог смещается и один из них попадает вниз другого а у некоторых группах такого проблемы нет. Они говорят что сверстаем «адаптивный вики разметку» из этого выходит что я что то сделал не так. Вопрос как сделать адаптивную верстку в вики разметке

  2. Игорь

    Заключи своё меню в таблицу и проблема решится.

  3. CHAMPgeony

    Бренд Чемпион на Российском рынке появился давно. Те, кто работают на своём придомовом участке знают его уже по одному фирменному знаку. Champion это сельскохозяйственная техника которой можно пользоваться во все времена. Большинство из производимой агротехники от Champion всесезонна и дополняет себя. Такая техника как: Бензиновые газонокосилки может быть использована в обработки земли. В поливе ваших деревьев легко справится такой агрегат от мультибренда champion как: Насосы дренажные.

    Магазин Чемпион в городе Самаре представляет не только вышеперечисленный товар но и другие виды агрегатов например: Диски для бензотриммеров. ЧЕМПИОН помогает вам в работе и ремонте в доме и ценит ваше мнение.

    Любая техника приобретённая от бренда CHAMPION работает как часы и редко подвергается частому ремонту.

    За более подробной информацией можно обратиться на официальный сайт мастербренда чемпион.

    Официальный электронный магазин: Чемпион в Волжском регионе

    Скидка 2,36% от стоимости любого товара, успей забрать свою скидку.

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