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

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

Но для того, чтобы нам начать процесс внедрения нашей менюшки в контакт для начала нужно разрезать ее на составные части. Для этого используем инструмент “Раскройка”.

Выбираем данный инструмент и начинаем «резать». У меня получилось 7 частей.

Далее заходим в “Файл” – “Сохранить под Web” – выбираем расширение jpeg и качество 100%, жмем “Сохранить”. У нас должно появиться 7 файлов. Все! С фотошопом покончено! Все необходимые работы по созданию меню выполнены. Приступим к установке меню вконтакте. Для этого:

1) Заходим в свою созданную группу. Там находим “Альбомы” – “Добавить” (выделено красным прямоугольником на рисунке 1). Ищем кнопку “Выберите файл”. Нажимаем и загружаем созданные 7 файлов.

Добавление фото в альбом группы вконтакте

Рисунок 1

Добавление фото в альбом группы вконтакте

2) Внимание! У кого не включены «Свежие новости», а по умолчанию они не включены, нужно выбрать «Управление сообществом», найти «Материалы» и включить их (Рисунок 2).

Рисунок 2

3. Наводим мышкой на “Свежие новости” и правее появляется ссылка “Редактировать”, нажимаем на неё (Рисунок 3).

Рисунок 3

4. Появляется окошко как на рисунке 4. Нас интересует кнопка «Режим wiki разметки» (выделено красным прямоугольником». Нажимаем на нее.

Рисунок 4

После этого в пустую область ниже вводим wiki — код, который и отобразит наше будущее меню. У меня он получился следующим (Рисунок 5):

Рисунок 5

Wiki — код нужно ввести точно так и в такой последовательности, как указано на рисунке 5. Дальше Вы уже можете сами поэкспериментировать.

Пример синтаксиса добавления картинки следующий:

[], где

photo-41875814_286789280 – ID загруженной картинки, который можно посмотреть в адресной строке в браузере (рисунок 6).

Рисунок 6

Тег “nopadding” – убирает пробелы между картинками, то есть помогает «состыковать» их вплотную к друг другу.

370px – ширина картинки, смотрим это значение в свойствах файла.

https://www.. То есть по нажатию по данной кнопке, пользователь перейдет из группы в контакте на данный сайт.

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

Вот собственно и все! Мое первое меню создано! Вот так оно выглядит в группе (рисунок 7).

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

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

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

Как создать меню в Менюмейк

Сервис очень простой в освоении — меню создается буквально за пару простых шагов и вам только останется согласиться с тем, что Менюмейк его автоматически загрузит в вашу группу, а затем создаст пост с кнопкой, по которой можно будет открыть меню (ну, а вы этот пост закрепите, чтобы он всегда находился вверху и привлекал внимание посетителей группы). Чтобы получилось что-то типа этого:

Итак, регистрация в сервисе довольно проста — жмете на кнопку «Войти через Вконтакте» (справа вверху), а после авторизации указываете свой Емайл.

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

Затем напротив нужной группы жмете на кнопку «Создать меню» . Откроется окно редактора, где можно будет подобрать подходящий шаблон, выбрать фон для меню (или загрузить свой при желании), настроить шрифты, отступы и самое главное — создать пункты меню, введя их названия и ссылки на страницы Контакта (или другого сайта), на которые эти пункты будут вести:

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

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

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

Пополнение возможно с Вебмани, Киви, Пайпал или банковской карты.

В любом случае, вас поздравят с успешным переносом меню в вашу группу контакта (и предоставят адрес ссылки на него). Но это не все. Желательно будет в соответствии с советом Менюмейка добавить в свою группу пост с кнопкой «Открыть меню» на выбранном вами в конструкторе меню фоне. Вы его сможете закрепить, чтобы получить максимум дивидендов от потраченных тут ста рублей.

Привет, мои дорогие!

Сегодня я подробно расскажу, как сделать меню для группы вконтакте . По моему опыту меню в группе в контакте увеличивает количество звонков и заявок на 20%. Важно ответственно подойти к вопросу создания меню группы. Поэтому я подготовил для вас шаблон PSD меню, чтобы облегчить вам работу.

Начну с того, что на сегодняшний день существует два варианта меню:

Вариант 1: Закрытое меню группы

Закрытое меню, открывается при нажатии на ссылку. В примере ниже меню открывается при нажатии на ссылку «ОТКРОЙТЕ МЕНЮ ГРУППЫ!».



Вариант 2: Открытое меню группы (закрепленный пост)

Открытое меню, по сути это закрепленный пост с активной ссылкой.



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

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

Как сделать открытое меню вконтакте

Процесс создания меню будем разбирать на примере Варианта 2, т.е. открытое меню.

Чтобы вам было проще ориентироваться, я подготовил для вас PSD шаблон меню : [Внимание. Дизайн ВКонтакте изменился. Новый макет и другая актуальная информация в ]

Шаблон меню группы PSD

Для создания внешнего меню требуется 2 картинки: аватар (справа) и центральная (картинка-действие).

Размеры аватара: 200 x 332 px

Размеры центральной картинки: 395 x 282 px



Шаг 1.

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

Шаг 2.

Зайдите в вашей группе в «Управление сообществом» (справа под аватаром). Найдите пункт «Материалы» (на вкладке «Информация») и сделайте их «Ограниченные».



Шаг 3.

Теперь вернитесь на главную страницу своей группы и нажмите «Редактировать» в появившемся блоке «Материалы» (Я уже переименовал в Меню группы).



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



Шаг 4.



В моем примере https://vk.com/page-42211349_47355854,

Первые цифры 42211349 - это id вашей группы

Вторые цифры 47355854 – это id страницы

Фишка: создавать дополнительные страницы можно вручную. Для этого перейдите по ссылке вида:
https://vk.com/pages?oid=-хххххххх&p=pagename
где,
хххххххх – это id вашей группы
pagename – название вашей страницы

Шаг 5.



И опубликуйте запись.

Шаг 6.

Теперь загрузите аватар группы (картинка справа). На стене появится дубликат картинки аватара – удалите его.

Шаг 7.

Теперь внимание. Нажимаем на ВРЕМЯ ПУБЛИКАЦИИ ЗАПИСИ (левый нижний угол поста).



И нажимаем «Закрепить». Закрываем это окно и обновляем страницу вашей группы (F5).



Шаг 8.

Пишем статус группы (используйте только 1 строчку), чтобы выровнять картинки, если рисунок на аватарке у вас начинается не с самого верха (в моем шаблоне аватарка вариант 2). И вот что у нас получилось:



ИТОГ.

Меню готово! Теперь при нажатии на центральную картинку открывается ваше меню:



Здесь его можно редактировать, размешать фото, видео, создавать новые разделы, размещать ссылки.

Внутри основного меню тоже можно сделать графическое меню (подменю). Его ширина не должна превышать 600 px. В высоту размер неограничен. Что позволяет создавать отличные лендинги вконтакте.



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

Свои вопросы или мнения пишите в комментариях ниже.

И снова рад Вас приветствовать!

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

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

Вот что у меня получилось.

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

И так. Вот основные шаги:

• Продумать основное меню
• Выбрать изображение
• Фотошоп (без фотошопа как всегда никуда 🙂)
• Раскройка изображения
• Заливка изображения в альбом контакта

Чтобы активировать свежие записи (для Вашего будущего меню) , нужно зайти в управление сообщества и включить пункт — «Материалы»

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

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

В своём примере я использовал фон девушки, и поместил слева от нее 3 кнопки. Каждая кнопка — имела своё название.

Мое меню состояло из следующих пунктов:

Для внедрение готового изображения в контакт, предварительно его нужно раскроить. Для этого в фотошопе используем инструмент «Раскройка «. Думаю с этим сложностей не возникнет. Там всё просто… На всякий случай, сделал фото 🙂

Выбираем данный инструмент и начинаем «резать». У меня получилось 4 части. (самое простое, что придумал:), хотя можно изрезать его на кусочки)

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

Теперь нажимаем на каждую кнопку (или часть изображения), и присваиваем необходимый адрес (ссылку). Чтобы убрать лишние пробелы нужно использовать тег «nopadding» (в меню Wiki-разметки)

Тег «nopadding» – убирает пробелы между картинками, то есть помогает «состыковать» их вплотную к друг другу.

В результате добавления тега, получилось следующее:

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

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

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

Ответ: Данную возможность насколько мне известно убрали администраторы Vkontakte. Раньше была отдельная кнопочка, чтобы меню было фиксированным — открытом. Затем эту функцию убрали, и теперь менюшки приходится открывать отдельно.

Хотя, встречал у некоторых открытые по умолчанию… и кто то даже говорил, что существует какой-то код, который справляется с этой проблемой. Но я бы не советовал использовать его. Судя по обсуждениям на многих форумах, админы это не приветствуют!

А на сегодня всё. До связи!

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

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

Вопрос 1: Первый и самый распространенный: «где код в меню?» или «если нет закладки при редактировании «Исходный код» как добавить внутреннюю страницу?» или «Я все равно не понимаю, что сделать, если не появляется код!»

Ответ 1: ВК изменил редактор, теперь для переключения между визуальным редактором и кодом всего один клик (правый верхний угол редактора):

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

Вопрос 2: Второй, реально проблематичный: «а как убрать пробелы между картинками?? »

Ответ 2: Признаю, сама испугалась, когда впервые у клиента «поехала» менюшка. Сейчас я это быстро правлю, а тогда было не весело. Смотрите:

Добавь тег nopadding; и все станет на свои места!

Между картинками вкрадывается пространство и меню выглядит битым. Для несведущих, может это и не нормально, а для , это как минимум не профессионально. Так в чем же тут дело? А, все очень просто! В ВК постоянно происходят какие-то обновления, вводятся новые алгоритмы… да еще и редактор кривоват… бывает ни с того, ни с сего из кода выпадают важные теги и тогда мы видим такую картину. Что бы исправить это, нужно заглянуть в код и внести необходимые коррективы. Формат кода, должен быть вот таким:

Шаблон: [] Пример: []

Обычно картинки меню раздвигаются потому, что из кода выпадает nopadding ; — вставляем его на место и все выравнивается. Перед тем как сохранять результат, жмите на кнопку «Предпросмотр», что бы убедиться в том, что все ровно стало.

Вопрос 3: Новость. В октябре 2012г., в принудительном порядке, Вконтакте обрезал автары групп и пабликов. Теперь их размер имеет общий стандарт 200х500 пикселей. Так, что если у вас в группе аватар был больше, то сделайте апдейт (обновите аватар).

Кстати, вмести с обрезкой, ВК ввел еще одно нововведение относительно фотографий групп: теперь кликнув на аватар, мы так же как в аккаунте, сможем увидеть все альбомы сообщества. Это удобно! И из этого рисуется новый функционал в коммуникациях группы.

Та-а-ак, с вопросами закончили… теперь переходим к самому созданию меню!

Шаг 1. Как создать меню в контакте и сделать вложенные страницы:

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

Как вам моя шпаргалка?

Вот такая шпаргалка у меня получилась! Для большей ясности, распишу каждую цифру:

Проделайте, эту операцию со всеми вложенными страницами и ваше меню будет готово.

Есть! Меню создали, внутренние страницы сделали, заполнили их, теперь перейдем к созданию красивого графического меню.

Шаг 2. Как создать красивое графическое меню в контакте и поставить его:

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

Для начала покажу вам код и результат своего меню:

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

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

Я покажу вам средний по сложности вариант установки меню. Разница в количестве элементов. Меню, которое разрезается просто на полоски, является самым простым его исполнением. Чем больше кликабельных кнопок в строке, тем более сложно его исполнение. Хотя, зная особенность, все просто! Дело только во времени. Итак, ширина картинки должна быть:

370 px – если в строке у вас будет два и более объектов, как у меня кнопочки соц сетей

И max 388 px – если разрезаем картинку по-простому, только на строки, не разделяя на мелкие объекты. Вот это та особенность, которую нужно знать, при нарезании меню на кнопки. У меня размер картинки всего меню получился 370х456 px.

После того как картинка разрезана на нужное количество объектов и сохранена в отдельный альбом, загружаем этот альбом в ВК. Загружаем в профиль аккаунта, а не в группу! Так как в альбомах группы больше нет возможности скрывать альбомы. Технических альбом в корпоративной (например) группе, совсем не нужен, поэтому прячем элементы меню в альбом аккаунта:

Технический альбом ВК

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

[]

где, photo7632142_296911699 – это адрес картинки! Его мы смотрим в адресной строке картинки:

С первой картинки, начнем вставлять меню в группу вконтакте

Вам нужен короткий адрес картинки, для этого перейдите в сам альбом:

Перейдите в сам альбом, что бы получить нужный адрес картинки!

…и начиная с первой картинки, переносите их в меню группы.

Добавляем размер картинки в код меню!

Итак, адрес картинки добавили, размер указали, теперь ставим, тег nopadding; - он нужен для того, что бы наши картинки плотно прилегали друг к другу. И последним этапом ставим ссылочку на страницу, куда будет попадать посетитель, после того как кликнет на картинку.

Здесь небольшое уточнение! Внешние ссылки, ссылки на альбомы ВК и обсуждения пишем полностью, а ссылки на внутренние страницы в формате page-32734125_44298120 . В начале и конце строки, не забываем ставить по две квадратные кавычки и без пробелов.

Уточнение 2: когда мы ссылаемся на внутренние страницы без картинок, то для обсуждений, альбомов и внешних ссылок ставим одинарные квадратные кавычки.

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

После того как вы перенесли все картинки в меню и оформили их (размер, ссылка), сохраняем результат и любуемся своей работой! Все! Готово!