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 . Деякі з вас, напевно, помітять, що у мене перед сторінкою - є заголовок. Щоб його прописати, потрібно на сторінці редагування, натиснути на посилання «Додати» і в віконці прописати його.

Якщо вам цікаво докладніше познайомитися з вікі-розміткою, то в ВК створена спеціальна група, яка допоможе в цьому. Ось сторінка на документацію .

Пишіть своє думки, як вам ідея, які бачите способи застосування? Подобається взагалі задумка чи ні?