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

Мы провели эксперимент. Взяли довольно толкового SMM-менеджера (1 шт.), пустую группу VKontakte (1 шт.) и предложили ему, опираясь на Google, сделать верстку графического меню. Понадобилось около 3 часов рабочего времени, 7 (!) тематических статей из топа, 3 кружки кофе и примерно 15 гневных восклицаний разной степени нецензурности.

Все потому, что какие-то статьи разбирали вопрос поверхностно, какие-то, наоборот, уводили в дебри, а в каких-то (вроде, неплохих с виду) упускались одна-две детали, без которых вся стройная система рушилась.

И тут нужно учесть, что наш-то менеджер – крепкий орешек почище Брюса Уиллиса, который уже имел дело с wiki-разметкой (просто не очень часто) и примерно представлял, как сделать меню в группе. Что же говорить про тех, для кого меню ВКонтакте – и вовсе terra incognita? Мы решили: хватит это терпеть! пришла пора разбираться вместе!

Брюс согласен и тоже полон решимости

Шаг #1
Как сделать меню ВКонтакте? Определяем структуру

Задались вопросом, как сделать красивое меню для группы ВКонтакте (или, на худой конец, хотя бы симпатичное)? С самого начала вам нужно решить два момента:

а) что вы хотите показать людям – конкретные товары? отзывы о вас? портфолио и прайс?

б) где эта информация будет лежать – на вашем сайте или в обсуждениях группы?

Шпаргалка

Какие пункты стоит включить обязательно?

Если ваша группа об услугах:

  • портфолио,
  • отзывы,
  • предоставляемые услуги,
  • контакты,
  • команда.

Если ваша группа о товарах:

  • ассортимент,
  • отзывы,
  • как заказать,
  • оплата и доставка.

Это ключевые пункты. По желанию их можно заменить или дополнить, но основные направления у вас теперь есть.

Определите то, о чем вы в первую очередь хотите рассказать, а потом уже начинайте оформление.

Шаг #2
Меню для группы ВКонтакте – картинка

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

Первая картинка будет служить «обложкой» меню, вторая – непосредственно для навигации.

Стандартный вид меню в группе (до того, как на него кликнули)

Открытое меню с кнопками

Проверьте, чтобы ваша картинка с «кнопками» вписывалась в стандартные размеры меню в группе ВКонтакте – ширина 600 – 606px, высота – на ваше усмотрение.

Заполучили картинки? Отлично! Первую (которая будет обложкой) откладываем, вторую (с кнопками) – пускаем под нож. В прямом смысле.

Детально процесс описывать не будем – лучше один раз увидеть.

Всё! Изображения для меню готовы.

Шаг #3
Как сделать меню ВКонтакте? Подготовка сообщества

До того как сделать wiki-меню ВКонтакте, подготовьте группу: через кнопку «Управление сообществом» подключите разделы «Обсуждения» и «Материалы». Материалы при этом нужно сделать ограниченными.

Вот как выглядит «путь» настройки на скриншотах

Клик #1

Клик #2

Клик #3

После этого страница вашего сообщества выглядит так – открылась возможность добавлять обсуждения и появился раздел «Свежие новости».

Это нам и было нужно.

Шаг #4
Как сделать меню группы ВКонтакте? Подготовка посадочных страниц

Помните шаг #1? Там мы определялись, куда будем вести людей – на сайт или в раздел обсуждений.

  • Если ваш вариант – на сайт, значит – смело пропускайте этот шаг.
  • Если в обсуждения, вам нужно будет предварительно их подготовить.

Наша цель – чтобы каждой кнопке соответствовала одна страница обсуждений.

Нажимаем кнопку «Добавить обсуждение» и прописываем заголовок и текст. И так несколько раз – до тех пор, пока содержимое для всех кнопок не будет готово.

Шаг #5
Как добавить меню в группу ВКонтакте? Программирование

А вот теперь – момент истины: непосредственное создание меню. Заходим во вкладку «Свежие новости» и начинаем редактирование.

Раз

Загружаем ранее разрезанные фрагменты меню через форму «Добавить фотографию». Важно: фрагменты должны идти в той последовательности, в которой они потом будут собраны в итоговой картинке. Получаем следующее:

Пока не очень похоже на настоящее wiki-меню ВКонтакте, правда? Между фрагментами картинки – внезапные пробелы, да и сама картинка очень маленькая. Минуту терпения, сейчас все будет!

Два

Переходим в «Режим wiki-разметки» (на предыдущем рисунке кнопка перехода выделена красной рамкой). И видим вот это.

Это, правда, выглядит еще более пугающе и уж совсем не похоже на красивое меню, которое поможет в раскрутке страницы ВКонтакте или группы бренда. Да что там – в таком виде оно даже не сделает эту группу хотя бы привлекательной.

Поэтому смело правим исходный код!

Три

Первое – убираем пустые строчки между строками кода.

Второе – исправляем размеры изображения: проверяем длину и ширину каждого фрагмента картинки и прописываем фактические цифры, а не то, что «ВКонтакте» вставил в код по умолчанию.

Третье – добавляем фрагмент кода ;noborder;nopadding, который позволит убрать пробелы между фрагментами картинки.

Четвертое – вставляем ссылки либо на ранее созданные темы (см. шаг #4) в формате topic–xxxx_xxxx, либо на нужные страницы сайта в формате https://xxxxxxx/.

В итоге должен получиться такой код:

<center>[[photo19868051_456239284|600x92px;noborder;nopadding|topic-147443169_36917026]]</center>

<center>[[photo19868051_456239285|600x85px;noborder;nopadding|topic-147443169_36917026]]</center>

<center>[[photo19868051_456239286|600x83px;noborder;nopadding|topic-147443169_36917026]]</center>

<center>[[photo19868051_456239287|600x81px;noborder;nopadding|topic-147443169_36917026]]</center>

<center>[[photo19868051_456239288|600x87px;noborder;nopadding|topic-147443169_36917026]]</center>

Четыре

Меняем строку «Свежие новости» на слово «Меню» и нажимаем «Сохранить страницу».

Пять

Сохраняем ссылку на меню (она в адресной строке).

Шаг #6
Как сделать меню в группе ВКонтакте? Финальный штрих

Возвращаемся на основную страницу группы и создаем запись:

  • вставляем скопированную ссылку,
  • ждем, когда подгрузится меню,
  • удаляем ссылку,
  • загружаем ранее отложенную вторую картинку для «обложки» меню,
  • публикуем пост от имени сообщества.

После того, как пост опубликован, закрепляем его.

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

PS. Если совсем нет времени изучать, как сделать меню в группе ВКонтакте, или под рукой нет хорошего дизайнера для создания картинок, обращайтесь – с радостью поможем!

Всем красивых групп!