Как сделать wiki-меню ВКонтакте?
Wiki-разметка — это инструмент, позволяющий создавать информационные веб-страницы ВКонтакте. Часто этот инструмент используют для того, чтобы сделать в сообществе меню для удобной навигации по контенту.
Не так давно ВКонтакте добавил возможность делать меню без помощи специальной разметки. Но оно подходит тем сообществам, у которых мало информационного контента. Оптимальный вариант — использование стандартного меню ВКонтакте в тандеме с wiki-меню. При таком раскладе пользователь не запутается в вашем сообществе и без труда найдёт нужную публикацию.
В этой статье мы разберёмся, как создать кликабельное меню с помощью wiki-разметки и как добавить его в стандартное меню сообщества ВК.
Содержание
- Где может размещаться wiki-меню
- Как подготовить хештеги для wiki-меню
- Создаём wiki-страницу
- Подготавливаем изображение для wiki-страницы
- Создаём кликабельное меню на wiki-странице
- Адаптируем меню под мобильные устройства
- Добавляем ссылку на wiki-страницу в стандартное меню сообщества ВК
Где может размещаться wiki-меню
Лучше всего разместить wiki-меню в стандартном меню сообщества. Это необходимо для того, чтобы сделать навигацию по контенту очень удобной. Например, в Платформе LP есть несколько тематик контента: сайты, аналитика, продвижение. Эти темы вынесены в стандартное меню сообщества ВК.
Но каждая из этих тем подразумевает разные рубрики. Например, в «Продвижении» есть статьи, посвящённые Яндекс.Директу, Google Ads, продвижению ВК или Instagram. Wiki-меню позволяет привязать статьи по темам к разным кнопкам, чтобы пользователь смог быстро перейти именно к тому инструменту продвижения, который его интересует. Если бы не было wiki-меню, то читателю открывались бы все статьи на тему «Продвижение», и он бы долго искал то, что ему нужно.
Как подготовить хештеги для wiki-меню
Чтобы можно было привязывать статьи к разным кнопкам, используйте навигационные хештеги в публикациях. Например, чтобы публикации по теме Google Ads открывались по клику на эту кнопку, необходимо добавлять хештег #googleads@platformalp. Новые записи с этим хештегом будут автоматически привязываться к кнопке.
Хештег должен содержать название вашей рубрики (можно на русском) и адрес вашего сообщества через @.
Вот так: #название_темы@адресвашегосообщества
Адрес сообщества находится после «https://vk.com/»
Создаём wiki-страницу
Сначала надо создать страницу, где будет размещаться меню.
Чтобы создать вики-страницу, необходимо сделать ссылку вида:
vk.com/pages?oid=-XXX&p=Нaзвание_страницы
где
XXX — это ID сообщества
Название_страницы — заголовок будущей вики-страницы
Как узнать ID сообщества?
Шаг 1. Нажмите на текст любого поста в вашем сообществе. Вам откроется режим просмотра отдельной публикации.
Шаг 2. После открытия в адресной строке браузера появится ссылка вида vk.com/адрес_сообщества?w=wall-XXX_YYY.
XXX — это и есть ID нужного вашего сообщества. Скопируйте числа после «wall-».
Добавьте все необходимые компоненты, и получится ссылка вида: vk.com/pages?oid=-54762931&p=Меню
Теперь перейдите по ней. Вы попадете на wiki-страницу.
Подготавливаем изображение для wiki-страницы
В фотошопе или другой программе необходимо подготовить изображение самого меню.
Размеры
Баннер должен быть не больше 600px в ширину. В высоту же — сколько угодно в пределах разумного.
Итак, после того как изображение будет готово, необходимо разрезать его на кусочки, чтобы к ним потом добавить ссылки на контент. Разрезать изображение нужно в фотошопе. Для этого используйте инструмент «Раскройка».
Важно! Баннер нужно разрезать так, чтобы во всех строках получилось одинаковое количество столбцов (вне зависимости от количества кнопок)
После применения этого инструмента получается следующее
Теперь нужно сохранить эти кусочки на компьютер. Для этого нажмите на «Файл» → «Экспортировать» → «Сохранить для Web»
Создаём кликабельное меню на wiki-странице
После того как вы создали баннер и разрезали его на кнопки, необходимо вернуться на ранее созданную wiki-страницу и добавить меню.
Нажимаем на «Наполнить содержанием»
Теперь необходимо вставить картинки последовательно. Нажимаем на значок фотоаппарата и загружаем картинки. Начиная слева направо, следуя вниз вставляем кнопки меню одну за другой.
Картинки автоматически преобразовались в код. Получилось вот так
Давайте внимательно рассмотрим одну из строчек:
[[photo54664719_457248945|300×142.9921875px;noborder| ]]
photo54664719_457248945 — это само изображение, его название
300×142.9921875px — размер изображения
noborder — параметр, который означает, что картинки будут разделены между собой
Итак, после того как все «кусочки» меню добавлены, необходимо сделать кое-какие преобразования прямо в вики-разметке:
- Размер изображения должен состоять из целых чисел. Если при загрузке изображений в размере образовался хвостик (как в нашем примере: 300x142.9921875px), то его необходимо удалить. То есть вместо 142.9921875 получится просто 142.
Вся сточка целиком выглядеть будет так: [[photo54664719_457248945|300x142px;noborder| ]] - Надо соединить кнопки. Соединит их параметр nopadding. Просто заменяем noboder на nopadding. Получается так: [[photo54664719_457248945|300x142px;nopadding| ]]
Нажмем «Предпросмотр». Получилось так
Пока это только баннер на wiki-странице. Чтобы меню стало кликабельным, нужно добавить в него ссылки.
В кнопки можно добавлять любые ссылки. Это могут быть ссылки на ваш сайт, Instagram, на приложения сообщества, на конкретные посты или статьи.
Для этого просто скопируйте ссылку и добавьте её в нужную кнопку после «nopadding|». Получится так: [[photo54664719_457248945|300x142px;nopadding|https://platformalp.ru/]]
Но, чтобы переход с меню был на определенные посты группы, помеченные хештегом, надо схитрить.
Для этого заходим в группу, копируем нужный навигационный хештег. Затем нажимаем на стене на «Записи сообщества».
Далее нажимаем на «Поиск записей». Вставляем хештег, нажимаем «Enter».
Теперь копируем ссылку в поисковой строке.
И вставляем её в нужную кнопку. Получается так: [[photo54664719_457248945|300x142px;nopadding|https://vk.com/wall-54762931?q=%23googleads%40platformalp]]
Важно! После «nopadding|» не должно быть пробелов перед ссылкой. Пробелов не должно быть и после ссылки.
Нажмите на «Предпросмотр» и перейдите по кнопке. Проверьте, осуществился ли переход?
Адаптируем меню под мобильные устройства
Если вы скопируете ссылку на меню и перейдёте по ней с телефона, то увидите, что там всё «плывёт». Чтобы с телефона всё смотрелось так, как и с компьютера, необходимо сделать невидимую таблицу. Для этого в wiki-меню надо добавить следующие параметры:
{| fixed;nopadding;noborder (добавляем в самом начале)
|- (ставим после каждой строки меню)
| (добавляем перед каждой строкой кода)
|} (ставим в самом конце)
Нажмите на «Сохранить страницу», а затем «Предпросмотр». Проверьте, чтобы ничего не съехало с телефона и компьютера.
Если в строчке меню должна быть не одна кнопка, а, например, две, то знаком |- надо отделить две кнопки.
Не забудьте нажать на «Сохранить изменения» после создания wiki-меню.
Добавляем ссылку на wiki-страницу в стандартное меню сообщества ВК
После того как вы создали wiki-меню, нужно скопировать его ссылку. Для этого нажмите на название вашего меню вверху страницы (в нашем примере меню называется «Продвижение») и скопируйте ссылку в адресной строке. Это и будет ваша ссылка на wiki-меню.
В начале статьи мы говорили, что оптимально использовать wiki-меню в тандеме со стандартным меню ВК.
Просто так вставить туда ссылку на wiki-меню не получится. ВКонтакте запрещает это делать.
Но этот запрет можно обойти. Прогоните ссылку на wiki-меню через https://vk.com/cc, чтобы добавить её в стандартное меню ВК.
Надеюсь, что эта инструкция помогла вам в создании wiki-меню. Но, если у вас остались вопросы, то пишите их в комментариях к этой статье.
🔥🔥🔥 Бонусы для новых пользователей TargetHunter по промокоду ДоброПожаловать:
1) в сервисе парсера ЦА ВКонтакте:
два дня тарифа «Автоматизация» бесплатно + 1 месяц в подарок при оплате любого тарифа минимум на 3 месяца.
Активировать промокод ДоброПожаловать нужно ЗДЕСЬ
2) в сервисе парсера ЦА в Одноклассниках:
два дня тарифа «Автоматизация» бесплатно + 1 месяц в подарок при оплате любого тарифа минимум на 3 месяца.
Активировать промокод ДоброПожаловать нужно ЗДЕСЬ
3) в сервисе рассылок и чат-ботов Модератор TargetHunter:
14 дней тарифа «Начальный» бесплатно + 1 месяц в подарок при оплате любого тарифа минимум на 3 месяца.
Активировать промокод ДоброПожаловать нужно ЗДЕСЬ
4) в сервисе Рекламный кабинет TargetHunter:
14 дней тарифа «Базовый» бесплатно + 1 месяц в подарок при оплате любого тарифа минимум на 3 месяца.
Активировать промокод ДоброПожаловать нужно ЗДЕСЬ
Подписывайтесь на наши рассылки.
Самые полезные алгоритмы на нашем канале ВК
Бесплатное обучение от TargetHunter — здесь.
1) Гайд по размерам изображений в соцсетях
2) Шаблон для комплексного оформления бизнеса в соцсетях
3) Шаблон подписного вики-лендинга