Как создать меню в группе Вконтакте

Как создать меню в группе Вконтакте вики разметка

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

Данный инструмент позволяет создавать:

• эффекты;
• необычные меню;
• таблички;
• элементы навигации;
• форматировать текст.

Словом, данная разметка позволяет создать мини сайт ВКонтакте. Это очень удобно, особенно для продаж и набора подписчиков.

Визуально такая система очень схожа с HTML-версткой. Но она не требует длительного обучения и специального склада ума.

Нюансы создания

Собственно, то, что было сделано выше (разделение и загрузка картинки) это уже элементы разметки. В этом и преимущество данного инструмента. Автоматическое превращение в теги, при простой загрузке картинок.

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

Убрать их можно, просто добавив тег noborder.

Вот так: ]

Основные теги представлены в таблице ниже:

Фото: теги используемые для разметки

Работа с картинками

Для того чтоб прикрепить ссылку или текст к изображению, с возможностью слегка видоизменить его, следует ввести код следующего вида:[[photo37602118_351733570|options|text/link]].

Где options заменяется на:

• noborder — снятие рамки вокруг изображения;
• nopadding — снятие пробелов между изображением;
• plain — вставка ссылки на картинку. Оформляется в виде текста, без графики;
• nolink — снятие ссылки на картинку;
• box — открытие изображения в окне;
• NNNxYYYpx или NNNpx — задает размер фото в пикселях.

Создание таблицы

Независимо от того, какое меню (текстовое или графическое) вы создаете, без вставки таблицы вы вряд ли обойдетесь. Иначе можно просто вставить текст в поле новости и не форматировать его, затратив так много времени.

Фото: варианты создания таблиц

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

• {| символ начала таблицы, без него таблицы быть не может. Используется всегда;
• |+ отвечает за расположение названия таблицы по центру. Ставят после символов начала таблицы. Используется по желанию;
• | обозначает начало новой строки и ячейки;
• | символ, делающий ячейку прозрачной;
• ! делает ячейку темным цветом. При его отсутствии обязательно нужно применять предыдущий знак;
• |} означает конец таблицы. Необязательный символ, однако, используется, чтоб предотвратить возникновение ошибки.

При заполнении таблицы, содержание каждой ячейки необходимо ставить после знака |, а при разделении ячеек, нужно продублировать типы строки вот так: || или !!.

Особенности разметки

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

Фото: пример функциональности

С целью избегания основных ошибок следует ознакомиться с основными из них:

1. необходимо быть внимательными, при изменении размера картинки – если она менее 131 пикселя, ее качество значительно ухудшится;
2. ширина картинки не должна превышать 610px;
3. на одной wiki-странице запрещено размещать больше 17 незакрытых тегов;
4. при изменении ширины картинки, ее высота изменяется автоматически и пропорционально;
5. список внутри таблицы следует создавать с помощью тега ;
6. в одной строке разметки должно быть не больше 8 элементов списка.

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

Основной помощник в данном деле это внимательность и четкое следование инструкции. В помощь всегда может прийти официальная страница вк, которая так и называется вики-разметка.

Создаем по этапам

Создание навигации – процесс интересный, сложный и длительный. Но результат того стоит.

Весь процесс условно делиться на 2 этапа:

• работа с фотошопом;
• техническое добавление.

Работаем с фотошопом

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

Алгоритм действий:

• установите и запустите программу «Фотошоп»;

• в пункте «Файл» выберете «Создать»;
• в появившемся окне задайте:

1. ширину – 630 пикс;
2. высоту – 725 пикс;

3. содержимое фона – белый.

Далее нужно разделить рабочую область на 2 окна

Они то и будут привлекать внимание посетителей и обязательно заставят передвигаться по группе

Делается это с помощью инструмента «Прямоугольная область»:

• кликните на значок правой кнопкой мышки;

• выберите инструмент «Прямоугольник»;
• используя вертикальную и горизонтальную линейки как ориентир, выделите прямоугольник размером 200х710 пикс, зажав левую кнопку мыши;

• после, нажмите кнопку Delete;

• в появившемся окне установите использование 50% серого;
• нажмите ОК;

• аналогично создайте прямоугольник размером 382х442 пикс, как на рисунке:

Работа с графикой:

1. под этим слоем расположите свое оформление:

2. далее напишите желаемый текст;

3. с помощью инструментов рисования фигур, нарисуйте кнопки:

Приблизительно должно получиться вот так:

Фото: готовый результат

Сохраните прямоугольник, расположенный справа отдельной картинкой, задав размер 200х500 пикс. Это готовая аватарка, загружается через кнопку «Загрузить фотографию» в группе вк.

Фото: загрузка аватарки

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

Для начала следует сделать разметку:

1. комбинацией клавиш «CTR+R» включите линейку;
2. наведите курсор на верхнюю линейку;
3. зажав левую кнопку мыши, потяните вниз, к нижней границе кнопки;

4. повторите по каждой кнопке.

Создаем фрагменты:

• возьмите инструмент Slice Tool;

• вверху есть кнопка «Фрагменты по направляющим»;

• должно получиться вот так:

Сохранение изображений:

1. нажмите Файл – Сохранить для web;

2. введите название;
3. укажите формат JPEG;
4. ставьте наилучшее качество;
5. отметьте галочки у «Прогрессивный и Встроенный профиль»;
6. последняя кнопка «Сохранить».

Далее приступайте к технической части. Необходимо загрузить созданные шедевры в группу.

Техническая часть

Готовые изображения необходимо перенести в группу. Выполняя указанные ниже шаги с этой задачей можно легко справиться.

Все по порядку:

1. зайдите в группу;

2. включите новостную ленту;

3. возле полосы «Свежие новости» нажмите «Редактировать»;

4. поменяйте название на меню или что-то подобное;

5. через кнопку в виде фотоаппарата добавьте картинки;

6. результат будет приблизительно таким:

Теперь самое важное, собственно для чего все это и делалось. Добавить функциональности меню

Отдельной картинке необходимо присвоить «свою» ссылку.

Если вы хотите вставить ссылку на запись со стены:

1. найдите необходимую запись;
2. кликните по ней левой кнопкой мыши;
3. скопируйте URL в адресной строке.

Для вставки ссылки на другой сайт, группу, одностраничник и прочего:

• зайдите на источник, куда нужно переправлять посетителя;
• скопируйте необходимый адрес.

Фото: адресная строка

Далее просто вставьте ссылку на соответствующую картинку. Вот код картинки, который появился в окне загрузки картинки: ].

После символа «|» просто вставьте свою ссылку. Выглядеть это будет вот так: ]

Сохраните изменения соответствующей кнопкой внизу окна.

Второй этап верстка меню Вконтакте

После завершения разработки меню с помощью фотошоп пора заливать его непосредственно на страницу группы. Для этого вам необходимо залогиниться в социальной сети, перейти на страницу группы и зайти в раздел «управление сообществом». Вначале надо проверить, подключили ли вы раздел «материалы». Если нет, включите.

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

Но прежде чем начинать верстать меню их надо загрузить в фотоальбом. Его можно назвать «фото для меню» и сделать недоступным для посетителей. Как только закончите загрузку, возвращайтесь в текстовый редактор. По умолчанию ваша новость так и называется «Свежие новости», но вы ее можете переименовать, как угодно, например «Меню». Для того чтобы начать непосредственную работу над созданием меню надо активировать режим wiki-разметки. Сделать это можно одним нажатием на пиктограмму ромба.

После того, как вы активируете вики-разметку в поле текстового редактора надо вставить код:

]

Этот код продублируйте ровно столько раз, сколько пунктов в вашем меню. После этого надо прописать ссылки на фотографии. Ссылку вставляйте вместо значения photo133337_133701019, а вместо значения page-13333337_13333337 вставляете ссылку на раздел или страницу, которая должна выводиться посредством клика на определенный пункт меню

Важно знать, что ссылку на страницу не надо копировать полностью, достаточно одной части

Кстати, напомним, что вам необязательно заниматься всеми этими хитросплетениями — просто попробуйте этот сервис. Он за 100 рублей все это сделает на полном автомате.

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

Но прежде чем сохранять меню просмотрите, все ли правильно у вас получилось Для этого опуститесь немного ниже на странице редактирования вики-разметки и нажмите на ссылку «Предпросмотр». Ниже отобразится то, что у вас получилось. У нас, например, получилось вот что:

Устраивает? Тогда жмем «Сохранить страницу» и проверяем ее работу непосредственно на странице группы. На этом можно считать работу над меню законченной. Надеемся, что оно принесет вам только положительные результаты.

Кстати, знаете ли вы, что наполнение групп Вконтакте можно автоматизировать, используя этот сервис? Обязательно попробуйте, вам понравится!

Как сделать меню в группе вконтакте

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

Просто для паблик стр.  нужно будет сначала открыть страницу и только потом будет меню… а сразу на главной никак нельзя! По крайне мере, я не нашел решения проблемы. 

 Для группы все проще. Сразу под основным описанием, есть пункт меню и ссылка “редактировать” (Как показано на картинке). Если у вас нет такой надписи, то скорее всего вы просто не подключили материалы в своей группе, зайдите в настройки группы и нажмите галочку рядом со словом материалы.

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

Более подробно, объясню как сделал меню на своей странице:

Далее контакт перекинет нас на вновь созданную страницу, которую и нужно будет отредактировать под будущее меню. Там нет ничего сложного, можно даже не редактировать код, а просто вставлять необходимые иконки или текст.

В моем примере все ссылки были на внешние ресурсы. При клике на первую иконку — открывался сайт статусов, при клике на вторую иконку (книжечку) — открывалась подписная страница. Также можно не отправлять пользователя на внешние ресурсы, а кружить его внутри контакта. Либо на новые (другие) группы, либо на страницы описания, созданные по такому же принципу.

Получается, что можно сделать внутренний сайт внутри Вашей страницы. В данном случае мы создали вторую страницу относительно главной:

она приняла такой адрес: //vk.com/sf_kontakt?w=page-34016644_44405134

А в итоге: Основная группа или паблик/Название созданной страницы

Надеюсь с этим сложностей не возникнет.

Создаем основное меню в контакте:

Самое простое, как можно сделать меню на странице — это сделать обычные текстовые ссылки (каждая на новой строчке). Но если не редактировать wiki разметку все ссылки или вставленные изображения будут в один столбик. В принципе этого достаточно для простенького меню.

Но если же вы хотите распределить на странице элементы по разным местам, придется немного подредактировать код. Я же нашел несколько готовых таблиц, и вставил в нужную ячейку своё изображение для меню. Тем самым, слева получилась иконка с описанием, посередине обычные текстовые ссылки, и справа другая иконка учебника.

1. Жмем «Меню» -> «Коллекции меню»
2. Выберите понравившееся меню
3. Скопируйте код выбранного вами меню
4. Зайдите в свою группу и в редактирование страницы Свежие новости, в разделе исходный код вставляем код нашего меню для контакта.

Меню для группы вконтакте

Теперь у нас есть страница с пунктами навигации, которая имеет адрес: //vk.com/page-34016644_44405134 , чтобы вывести ещё в верхней части Вашего паблика делаем следующее:

• Добавляем новую новость
• Прикрепляем основную картинку, нажимая по которой, пользователю откроется наше меню.
• Вставляем в новость ссылку созданной страницы
• И последний шаг  «закрепление постов». Пишите пост с фото/видео/музыкой, потом публикуете, затем нажимаете на дату публикации — и жмете «Закрепить».

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

Денис Повага

1-2 раза в год, веду до результата в блогинге, при наличии мест.
Для связи: ok.ru/denis.povaga

Комментарии: 2959Публикации: 782Регистрация: 12-03-2013

Поговорим об идеологии

Прежде чем начать что-либо рисовать и верстать, важно подумать, о чем должно говорить ваше меню? Чтобы понять это, стоит определиться также и с основной целью группы – развлекать, информировать или продавать. От этого во многом зависит внешний вид и функциональность будущего меню

Меню для привлечения посетителей

Если вы планируете публиковать развлекательный, информационный, познавательный контент стоит создать меню, которое будет отображать главные темы. Например, это могут быть разделы: последние публикации, самое популярное, о моде, здоровая еда, дети и др. Это будет служить повышению лояльности, ведь пользователям будет удобно ориентироваться в массе контента.

Меню для продаж

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

3 этап размещаем меню группы ВКонтакте со ссылками

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

[[photo449038873_456239150|400x82px;noborder;nopadding|https://vk.com/club173497067]]

[[photo449038873_456239151|400x70px;noborder;nopadding|https://vk.com/club173497067]]

[[photo449038873_456239152|400x57px;noborder;nopadding|https://vk.com/club173497067]]

[[photo449038873_456239153|400x72px;noborder;nopadding|https://vk.com/club173497067]]

[[photo449038873_456239154|400x68px;noborder;nopadding|https://vk.com/club173497067]]

[[photo449038873_456239155|400x70px;noborder;nopadding|https://vk.com/club173497067]]

[[photo449038873_456239156|400x83px;noborder;nopadding|https://vk.com/club173497067]]

1. Теперь выровняем наше меню по центру при помощи тегов :

]

1. Наше меню уже работает, осталось разместить его на стене в группе. Для этого нажмем на надпись «МЕНЮ» в верхней части окна и скопируем ссылку из адресной строки браузера.

Обратите внимание, в этот пост можно добавить любое изображение. Тогда оно тоже будет служить ссылкой на меню.

Теперь вы знаете, как сделать меню в группе в ВК. Как видите, ничего сверхсложного в этом нет. И пусть «страшный» код Вики-разметки вас не пугает! Удачи!

Как сделать меню в группе Вконтакте Инструкция

А теперь давайте перейдем к созданию меню. Составим процесс действий в виде инструкции. Чтобы сделать меню в группе Вконтакте, нужно будет выполнить несколько простых шагов:

1. Первое, что нам нужно сделать – это зайти в настройки группы и активировать раздел «Материалы». Значение следует выставлять на «ограниченные» или «открытые».
2. Далее подготавливаем картинку для меню группы Вконтакте. Если не хотите возиться, то можно сделать меню в текстовой форме, однако это будет менее привлекательно. В качестве примера возьмем следующую картинку, которую можно увидеть ниже.

Картинка была разрезана с помощью инструмента в Фотошопе «Раскройка», а затем сохранена. Каждая из выделанных частей стала отдельным изображением.

Затем нужно создать альбом для фотографий на своей личной странице Вконтакте. Этот альбом можно даже делать полностью закрытым. После создания альбома, залейте в него все части нашего изображения.
Далее зайдите в свою группу и в разделе свежие новости нажмите на кнопку «Редактировать».
После этого откроется страница, которой можно дать произвольное название и записать следующий текст в квадратных скобках. Далее нажмите на кнопку «Сохранить страницу».

Затем снова переходите на страницу своей группы или обновите ее (если она уже открыта). Нажмите на ссылку «Открыть меню». После этого появится дополнительная ссылка на страницу, которую мы создали. Нажмите на нее.
Далее эта страница откроется. Так как она была только что создана, в ней ничего нет и нам нужно ее наполнить. Нажмите на ссылку «Наполнить содержанием».
Далее пишем следующий код, так как на картинке ниже. В нем нужно указывать номер фото (для этого можно открыть фотографию, загруженную в свой альбом и скопировать ее адрес вроде этого «photo15535684_427525646»), размер фотографии (его можно узнать в свойствах фотографии), а также указать ссылку, на которую ведет эта фотография.
Чтобы убедиться, что мы все правильно сделали, нажимаем на кнопку «Предпросмотр». Ниже кода появится сделанное меню группы Вконтакте. Если все отображается правильно, то жмем на кнопку «Сохранить», а если нет – то ищем и исправляем ошибки.

Теперь нам понадобится картинка, которая станет заставкой нашего меню и будет находиться в описании нашей группы. Размеры картинки для описания группы Вконтакте мы писали выше, но если кто забыл – по ширине от 510 пикселей, а по высоте равной или меньше ширины. Можно использовать размеры больше, но в тех же пропорциях.
Затем открываем нашу созданную страницу со сделанным меню группы Вконтакте и копируем на нее ссылку. Чтобы правильно скопировать ссылку, нужно нажать «Редактировать страницу». После этого появится написанный ранее код и можно будет скопировать адрес из строки браузера, который должен выглядеть так: «https://vk.com/page-119301077_51764020».
Далее заходим в нашу группу и в форме отправки сообщений вставляем скопированный адрес меню. А затем и фотографию, которая будет заставкой. После этого нажимаем на кнопку «Отправить».
Теперь осталось только закрепить эту запись. Сделайте это также, как сделал я на картинке ниже.

Каким должно быть меню

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

Три основные цели групп:

1. продажи;
2. увеличение трафика;
3. увеличение активных посестителей.

Для продаж навигация в группе заменяет витрину в магазине.

Фото: пример навигации для продаж

Здесь должны быть самые важные кнопки:

1. каталог;
2. стоимость;
3. доставка;
4. акционные предложения;
5. отзывы.

Для увеличения посещаемости акцент делается на контент и изюминку сайта или блога.

Фото: привлечение подписчиков

Приблизительный вариант набора кнопок:

• интересные статьи;
• полезная информация;
• подписаться;
• отзывы.

Предлагаем такие кнопки:

• подписаться на новости;
• задать интересный тематический вопрос;
• акции;
• опросник;
• голосование.

Фото: предоставление услуг

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

Создание меню

• Для создания меню заходим в «Управление сообществом» во вкладку «Информация», находим «Материалы» ставим «Ограниченные» и сохраняем.
• Далее возвращаемся на главную страницу группы и сверху видим надпись «Свежие новости», переходим в данный раздел через «Редактировать».
• В открывшемся окне меняем надпись «Свежие новости» на «Меню», например. В пустом поле вписываем названия наших страниц — кнопок, слова обязательно закрываем двойными квадратными скобками без пробелов. Каждое название в новой строке.
• Внизу страницы нажимаем на «Предпросмотр» и видим названия «кнопок», которые стали кликабельны.
• Сразу же в разделе «Доступ к странице» откорректируйте настройки. Просматривать страницу могут все пользователи, редактировать – только администраторы, иначе завалят спамом. Сохраните изменения.
• Возвращаемся на главную страницу группы, нажимаем на «Меню» и видим кликабельные названия страниц. Нажимаем сбоку на «Редактировать».
• Следующий наш шаг, это узнать адреса наших страниц – «кнопок». Нажимаем в меню на «Здоровая спина» и на странице «Здоровая спина» нажимаем на «Редактирование»
• Далее, в окне браузера мы видим вот такой адрес и берём из него только то, что выделено синим цветом. Наш адрес страницы «Здоровая спина» должен выглядеть так: page-116040065_52123446, а не так: https://vk.com/page-116040065_52123446?act=edit
• Открываем все три страницы через «редактирование» и копируем у себя в текстовый блокнот три адреса. В моём случае, это выглядит так:page-116040065_52123446 page-116040065_52123461 page-116040065_52123485
• Далее, нам нужны адреса наших картинок, которые будут выполнять функцию кнопок. Для этого загружаем приготовленные картинки в альбом своего личного аккаунта и в настройках закрываем его от просмотра, что бы эти нарезанные картинки никто кроме вас не увидел. Если же вы загрузите их в альбом группы, то видеть их будут все, что на мой взгляд не совсем эстетично.
• Когда загрузите все картинки в альбом, предварительно придумав ему название и отредактировав на предмет приватности, то нажмите по очереди на все картинки и перепишите адреса этих фото.
• Для этого смотрим в адресную строку браузера. Копируем нужную нам часть и вставляем в свой рабочий текстовый блокнот. Адреса картинок должны иметь вот такой вид:
  В моём случае адрес верхней картинки имеет вот такой вид:photo189052615_337249677
• Заходим в меню через «Редактирование», спускаем вниз текстовое меню и вверху  прописываем адреса наших страниц – кнопок. Это выглядеть будет так, пример моей страницы:]
  Для наглядности смотрим фото:
  Я указала цифрами, что за что отвечает и обозначает:1 – это адрес нашей картинки;2 – это ширина картинки, а значит ширина нашего меню, эту цифру можно менять, но идеальный размер 388 пикселей. Эта цифра должна быть во всех трёх строках одинакова;3 — этот текст noborder;nopadding отвечает за то, что бы между картинками не было промежутков, что бы меню было сплошной картинкой;4 – это адрес нашей страницы меню
  Для того что бы не ошибиться, можно скопировать мой образец и вписать туда адреса своих картинок и страниц.
• Нижнее текстовое меню под цифрой 5 убираем (стираем) и нажимаем внизу на «Предпросмотр». Видим своё красивое меню — сохраняем страницу.
• Переходим на главную страницу группы, обновляем её и нажимаем на «Меню». Всё! Наше меню готово! Нажимая на надписи, мы будем попадать на страницы. Пока они пустые, но всему своё время.

Успехов и Удачи!

Подготовка к созданию меню Вконтакте

Для того, чтобы сделать меню, вначале нужно определиться с его содержанием и внешним видом. Вы должны знать, из каких разделов будет состоять ваше меню. Это первое. А второе, какую картинку вы будете использовать в его дизайне и подготовить её.

Для этого берётся обычный лист бумаги и на нём рисуется (прописывается) макет вашего меню. А именно, названия ваших «кнопок», которые будут вести на страницы, наполненные каким-либо содержанием. Имея перед глазами данный эскиз, вам проще будет идти к намеченной цели.
В прошлой статье в видео уроке я наглядно показала, как создавать текстовое меню. А в этой статье я расскажу и покажу ещё раз на своём примере. Итак, приступим. Моя тестовая группа имеет название «Здоровье».

Моё меню  будет состоять из трёх кнопок:

• Секреты здоровья (переход на страницу с рекомендациями и советами по здоровью)
• Здоровая шея (переход на страницу, где будет описание и ссылка на платный лечебный курс по лечению остеохондроза шеи)
• Здоровая спина (переход на страницу, где будет описание и ссылка на бесплатный лечебный курс по лечению спины).