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

Вот несколько примеров, чтобы все понимали, о чем речь.




Такие группы позволяют выделиться среди своих конкурентов и привлекать больше пользователей. Особенно, если еще и контент интересный:)
В рамках данной статьи мы поговорим о том, как это всё делается. Чтобы более подробно всё разобрать и вникнуть во все тонкости, возьмем конкретный пример. Будет небольшой мастер-класс по оформлению групп.

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

Объясняю на пальцах. Паблик — это что-то сравни блогу. Лента новостей. Иными словами, мы рассказываем своим подписчикам о каких-то вещах и они не смогут писать на стене нашего сообщества. Максимум — комментировать.

Группа позволяет создать более открытое к беседе и обсуждениям сообщество, где люди смогут от своего имени делать посты в ленте. В неё также можно добавлять друзей из своего списка. В паблике такой возможности нет. Кроме того, в группе немного больше возможностей по интегрированию вики-разметки (здесь есть раздел «Новости», в который можно интегрировать меню).

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

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

Формат будет «Группа», так как нужно создать естественный приток аудитории и максимально расширить общение внутри сообщества. Сразу уточню, что буду использовать универсальную методику, которую можно применять как в формате группы, так и в паблике. Это работает везде.

Контента море, начинаем воплощать идею в жизнь!

Создание группы

Чтобы создать группу, переходим в «Мои группы» в правом меню аккаунта Вконтакте и нажимаем на синюю кнопку вверху «Создать сообщество».

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

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

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

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

Всё. Группа создана!

Теперь можно начинать ее оформлять.

Оформление группы Вконтакте

Этот этап можно разбить на 2 составляющие: графическая и техническая. Для работы нам потребуется шаблон для создания аватарки группы и меню, а также немного воображения и базовые знания фотошопа (он же Adobe Photoshop).

Шаблон разметки

Что представляет из себя шаблон и что это вообще такое? Шаблон — это своего рода заготовка. В данном случае, в *.psd формате у нас размечены области для картинки под меню и аватарки группы.

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

Чтобы стало понятнее, вот пример.

Мы видим, что на обеих частях картинки есть полоса с видом на жилой район. Без использования шаблона ровно сделать с первого раза практически нереально. Нужно будет подгонять картинки, вымеряя расхождения вплоть до 1px. В то время как при использовании шаблона мы просто добавляем в него графику в рамках разметки и сразу же получаем желаемый результат.

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

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

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

На левом фрагменте (где надпись «Меню») можно также добавить несколько триггеров. В данном случае я решил делать без них. Всё. Дизайн аватарки готов. Жмем в фотошопе сочитание горячих клавиш Shift+Ctrl+Alt+S и сохраняем наши фрагменты в папку на жесткий диск.

Первый этап работы с графикой завершен. Возвращаемся в контакт.

Установка аватара и меню для группы

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

Добавляем картинку. Указываем поля и выбираем миниатюру. Здесь всё просто и проблем быть не должно.

Как мы видим, нужно знать id сообщества. Узнать его очень просто. Находим в своей группе меню (сразу под аватаркой) и открываем «Статистику сообщества». При этом в адресной строке браузера появится что-то похожее (цифры будут другие).

Эти цифры после «?gid=» и есть искомое id группы. Вставляем полученное значение в форму скрипта и пишем название для той страницы, которую хотим создать. В данном случае, я вбиваю «Меню».

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

Если всё сделано правильно, откроется вот такая страница.

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

Я у себя написал «Меню» и моя страница после сохранения стала выглядеть следующим образом.

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

Здесь создаем пост следующего содержания: вставляем туда картинку и ссылку на страницу меню для группы.

Нажимаем отправить. После чего щелкаем по времени отправки сообщения и выбираем там среди всех вариантов пункт «Закрепить». Обновляем страничку (клавиша F5 на клавиатуре) и, если всё сделано правильно, получаем первый результат: группа обрела аватарку и ссылку для перехода в раздел меню.

Wiki-разметка меню группы Вконтакте

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

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

Минимум полей. Вертикальная раскладка. Идеальный формат для адаптивного меню. То есть, на мобилах ничего никуда не поедет. Всё будет в точности, как на экранах компьютеров и планшетов. Ширину беру 500 px, чтобы потом ничего не ужалось и не потерять в качестве изображения дважды. Высота не принципиальна.

Разрезаем изображение на фрагменты и сохраняем их.

Всё. Настало время заключительного аккорда — собираем меню уже в самой группе.

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

Если вы администратор или создатель группы (в нашем случае это так и есть), то в верху страницы будет ссылка «Редактировать». Щелкаем по ней.

Затем переходим в режим wiki-разметки (под кнопкой закрыть в верхнем правом углу странички нарисована такая рамочка с <> внутри). Когда нужный режим активирован, данная кнопка обведена серым.

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

Я хочу расположить меню по центру и чтобы между фрагментами не было никаких зазоров. Поэтому каждый из элементов обертываем в тег

и к уже вложенному параметру «noborder» дописываю второй параметр «nopadding». Первый отключает обводку фрагментов и границы у ячеек таблиц. Второй убирает отступы от края.

Первый и последний элементы меню не должны быть кнопками — у меня на рисунке это всего лишь графический элемент без ссылки на внутреннюю страницу, поэтому к ним прописываем дополнительно параметр «nolink». Это уберет возможность щелкнув по данному элементу открыть в отдельном окне кусочек картинки. От щелчка мышки теперь вообще ничего не произойдет. Это обычный фон страницы. Неактивный.

В моем случае код меню выглядит следующим образом.

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

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

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

После чего вставляем в вики-код менюшки ссылки на новые страницы в виде page-102302049_51013384, где первое число — это id группы, а второе — номер страницы. Хотя, это в общем-то и не важно. Ведь нам нужно всего лишь скопировать этот фрагмент URL и вставить в разметку.

В итоге код меню принимает следующий вид.

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

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

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

Что такое вики-страница вк

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

Вот, классный пример такой страницы:

Перед нами навигационное меню, в основе которого вики разметка вконтакте . Такая страница получается очень яркой и функциональной — есть подрубрики, переходы к отдельным статьям, архивы по месяцам и многое другое. Все крупные сообщества обязательно имеют подобные страницы, ведь без них не только подписчики, но и сами администраторы могут запутаются в объеме информации. Рубрики — это удобно и для пользователя и для администратора.

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

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

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

Как сделать пост-статью вконтакте

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

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

Алгоритм создания вики-страниц

Чтобы создать внутреннюю страницу вконтакте, надо правильно прописать её адрес в браузере

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

После заполнения и сохранения страницы мы получим конечный адрес для работы — page-52497428_44506807 , который будем использовать.

Как заполняется wiki страница

Ну с наполнением у вас и вовсе не должно возникнуть проблем. Пишем текст, украшаем его и форматируем:

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

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

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

Работать с внутренними страницами я советую в обычном текстовом редакторе на компьютере (word, блокнот) и сохранять готовые страницы где-то у себя. Дело в том, что wiki-разметка в контакте еще не доведена до ума и часто возникают проблемы — то строка пропадет, ко картинка исчезнет. Поэтому у вас всегда должен быть отдельно сохранен чистый, работающий вариант странички.

Если вы решили глубже изучить фишки wiki вконтакте, то ретвитните эту статью, а я в комментариях дам вам ссылки на полезные ресурсы, договорились?

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

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

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

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

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

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

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

Основные команды и возможности wiki-меню

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

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

Делаем меню с помощью медиа файлов

Осуществляется при помощи специальных кнопок.

В текстовом виде медиа файлы представляют собой: [​].

Где media XXXX_YYYY – сам медиа-файл, options – различные настройки (для фото и видео), link–надпись, которая будет отображена при наведении курсора на фото/видео.

Для фото options бывают:

Для видео:

Заголовки различного уровня создаем с помощью знаков ==

Добавьте знаки «==» в начале и конце заголовка. Пример смотрите на скриншоте:

Работаем с текстом заголовков для оформления меню группы ВКонтакте

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

Используем цитаты для привлечения внимания

Использование тега позволит красиво оформить чью-нибудь цитату.

Списки можно использовать как нумерованные, так и маркированные

Для нумерованного списка используйте символ «#» перед каждым новым пунктом.

Для маркированного списка аналогично предыдущему, только со знаком «*».

Работаем с отступами

Для того, чтобы сделать отступ допишите перед словом знак «:». В зависимости от количества знаков отступ будет увеличиваться или уменьшаться.

Внутренние ссылки в меню группы

Это ссылки на внутренние ресурсы соц. сети «ВКонтакте» (ссылку на человека, сообщество, обсуждение, приложение, страницу, видео и изображение). Их добавление осуществляется при помощи следующей конструкции: [].

Внешние ссылки в создании меню ВКонтакте.

Wiki-разметка создаёт табличное меню

С помощью вики страницы и разметки можно также создать и таблицу. Смотрите скриншот:

Информативный спойлер

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

Создается спойлер при помощи конструкции:

{{Hider|Названиеспойлера
Текст
}}

И будет иметь следующий вид:

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

Виды меню: какие бывают?

Вики страницы во ВКонтакте можно разделить по разным критериям:

  • Текстовое (только текст);
  • Графическое (использование изображений кнопок, фона и т.д.) .

По отображению (зависят от используемой картинки):

  • Закрытое (не видно самой структуры);

  • Открытое (видны сразу все пункты);

  • Со смежным или общим баннером (может быть, как открытым, так и закрытым).

Не зависимо от выбранного Вами типа, работают они все по одному принципу.

Также не бойтесь комбинировать эти типы. Например, можно сначала сделать графическую часть с кнопками (фон, стиль, дизайн), а после дополнить ее различной текстовой информацией (например, «Часто задаваемые вопросы», использовав спойлеры).

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

Менее популярным и простым является текстовый список на вики странице. Оно не содержит каких-либо изображений и кнопок. Это просто список анкорных ссылок.

Ниже представлена пошаговая инструкция, как сделать текстовый список для группы ВК:

  1. Для начала необходимо настроить сообщество. Для этого перейдите в «Управление сообществом» и выберите раздел «Разделы». Найдите строку «Материалы», выберите пункт «Ограниченные» и сохраните настройки.

  1. Далее на главной странице паблика появятся «Свежие новости». Перейдите в них и нажмите «Редактировать».

  1. Впишите название.
  2. Ниже находится текстовый редактор ВК. Здесь мы и будем создавать наш список.
  3. Используйте следующую конструкцию:

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

Для примера мы напишем простую и небольшую конструкцию:

  1. Нажимаем сохранить.

Здесь мы использовали знаки «==» для выделения заголовка и знаки «*», чтобы выделить подпункты. В результате мы получили следующее:

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

Вы же сможете добавить что угодно, на что хватит фантазиии возможностей wiki-разметки.

Как создать графическое меню

Чтобы создать графическое меню, Вам необходимо иметь хотя бы базовые навыки работы с графическими редакторами (такие как, фотошоп, GIMP, различные приложения и т.д.). Если же Вы ими не обладаете, тогда мы можем посоветовать воспользоваться помощью профессионалов или ресурсами с готовыми шаблонами (подробнее читайте ниже).

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

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

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

  1. Загружаем изображения в текстовый редактор ВКонтакте.

  1. Нажав на каждую картинку, можно выбрать параметры и указать ссылку.

  1. Справа есть переключатель между визуальным и текстовым режимами редактирования.

  1. В текстовом варианте, наши изображения выглядят так:

  1. Меняем надпись «noborder» на «nopadding», чтобы убрать расстояние между картинками и сомкнуть их. А после знака «|» добавляем ссылку.

  1. Нажимаем «Сохранить страницу».

В итоге мы получили вот такое меню:

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

Как закрепить

Чтобы созданное wiki-меню отображалось на главной странице сообщества, необходимо проделать следующие шаги:

  1. Создайте новый пост.
  2. Скопируйте ссылку Вашего меню. Для этого снова перейдите в редактирование и скопируйте URL из адресной строки браузера.

Сначала добавьте изображение, смотри картинку ниже.

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

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

Как удалить

Удаление wiki-меню не является сложной задачей. Достаточно просто перейти в «Управление сообществом», раздел «Разделы» и выключить материалы.

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

Готовые шаблоны

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

  • You-ps.ru – это сервис с готовыми шаблонами wiki-меню и другими готовыми элементами оформления сообщества.

  • Vkmenu.com – это онлайн-конструктор. Он позволяет легко и быстро делать стильные меню.


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

Итог

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

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

Не бойтесь экспериментировать и будьте оригинальны!

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

Скидка читателям

Вам повезло, сервис smmbox.com раздаёт скидки.
Сегодня скидка 15% на использование сервиса. Вам нужно просто зарегистрироваться и ввести при оплате промокод smmbox_blog

Вики-разметка. Что это

Вики-разметка «ВКонтакте» — это специальный язык, созданный для оформления обучающих, продающих или развлекательных Web-страниц ВК-сообщества. Это очень ценный и мощный язык разметки, который позволяет подключать дополнительный функционал «ВКонтакте» и использовать его для продвижения и уникализации группы.

Страницы, оформленные или созданные с помощью вики-разметки, принято называть вики-страницами. Впервые этот термин ввёл Уорд Каненгем в 1995 году. Тогда пользователи сети Интернет познакомились с Википедией. «Wiki» переводится с гавайского, как «быстрый».

Вики-разметка позволяет быстро создать и внедрить в код любой страницы сообщества красиво оформленные элементы, такие как:

  • кнопочное меню;
  • картинки-ссылки;
  • спойлеры;
  • якоря;
  • мини-игры.

Спойлер вики-разметки — это текст, который скрывается за кнопкой с надписью синего цвета, после нажатия на которую, текст становится видимым.

Вики-разметка « ВКонтакте» очень похожа на HTML (Hyper Text Markup Language). Но, в отличие от языка разметки кибер текста, её можно освоить за неделю благодаря графическому интерфейсу.

Такая разметка существенно расширит Ваши возможности в администрировании группы. С её помощью Вы сможете создавать онлайн-журналы, интернет-магазины и даже мини-сайты.

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

Как создать вики-страницу

Придерживаемся следующего плана при создании вики-страницы:

  • Определиться с видом страницы и сделать её макет. Бывают такие виды: ВК-лэндинг, ВК-пост, интерактивная страница.
  • После того, как Вы определились с видом своего мини-сайта, можно приступать к созданию вики-станицы. Создать меню, сделать кнопки меню активными. Наполнить страницы контентом. Сделать ссылки на товары. Подключить видео или аудио записи и многое другое. Всё зависит от Вашей фантазии.
  • Художественно оформить сообщество. Вставить картинки, логотипы, аватарки, фото товаров…
    Мы покажем конкретный пример оформления интерфейса уже существующей группы с помощью вики-разметки. Создадим тестовое сообщество и разберём весь процесс пошагово.

Для того, чтобы создать вики-страницу, нам нужно в поисковую строку браузера скопировать ссылку https://vk.com/pages?oid=-***&p=ИМЯ .

Вместо *** нужно вставить уникальный Id сообщества.

В нашем случае это 105722542.

Id находится в адресной строке браузера после /club; /event или /public.

Вместо «ИМЯ» — вбить название вики-страницы, например, «каталог товаров».

Обратите внимание, что поменять название уже не получится.


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

Для перехода в режим вики-разметки нажмём на кнопку «Редактирование», а затем «Режим вики-разметки».

В режиме разметки нужно набрать следующий код.

{|nomargin ***с помощью этой команды убираем границы
|- ***начинаем создавать надписи
|

Главная
***создаём надпись «Главная» и выравниваем её по центру прямоугольника
|
каталог товаров
*** создаём надпись «каталог товаров» и выравниваем её по центру прямоугольника
|
о нас
***создаём надпись «о нас» и выравниваем её по центру прямоугольника
|
контакты
***создаём надпись «контакты» и выравниваем её по центру прямоугольника
|} ***закрываем блок надписей
[[Главная]] ***создаём ссылку на «Главная»
[[О нас]] ***создаём ссылку на «О нас»
[[контакты]] *** создаём ссылку на «Контакты»
________________________________________
***Примечание

Копируем их до «?». Вот что должно получиться в итоге на каждой странице.

Код главной страницы

https://vk.com/page-105722542_54261370

***(Каталог товаров) |

https://vk.com/page-105722542_54261943

*** (О нас) |

***(О нас) |

https://vk.com/page-105722542_54261944

*** (Контакты) | }

***(Контакты) |}

***Примечание

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

Сохраняем все изменения на каждой странице.

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

Ждём, пока не появится пункт меню. После этого ссылку нужно удалить и нажать кнопку «отправить». Возле кнопки необходимо выбрать пункт «От имени сообщества».

Каждую страницу меню нужно заполнить текстом. После этого можно приступить к художественному оформлению.

Добавим «шапку» и «аватарку».

Сделать их можно по видео уроку


Мы показали Вам, что такое вики-разметка ВКонтакте для чайников. Оформлять сообщество с её помощью очень увлекательно. Изучайте вики-разметку и создавайте настоящие мини-сайты.


.

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

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

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

Вики разметка. Картинки:

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

Вставить изображение в ВК при помощи вики разметки можно только если оно есть в альбоме вашего паблика или группы.

Для вставки картинки вы должны зайти в альбом и скопировать адрес этого изображения. Например photo11111_11111.

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

[] , где на месте options можно подставить значение из следующего списка:

  • plain - ссылка на фотографию будет в виде текста, без картинки
  • noborder - удаляет рамку вокруг фото
  • box - изображение будет открываться в новом окне
  • nolink - убирает ссылку с картинки
  • nopadding - удаляет пробелы с картинки
  • NNNpx или NNNxYYYpx - здесь вы можете указать размер фотографии в пикселях (только ширину или ширину на высоту)

WIKI-разметка вконтакте. Текстовый вариант

Текстовая вики разметка группы, как мы говорили раньше, выглядит более красиво. Когда вы её сделаете, то сами всё поймете!

шаблоны вики разметки

Как сделать таблицу при помощи вики разметки :

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

{| — этот знак обозначает начало таблицы. Обязательный атрибут.

|+ — Необязательный атрибут-название таблицы. Ставится сразу за атрибутом начала таблицы.

| — -знак начала новой строки в том числе ячеек.

| — атрибут, который отвечает за прозрачность ячейки.

Если отсутствует предыдущий атрибут, то этот отвечает за темный цвет ячейки. (Обязательно должен быть один из атрибутов)

|} -знак, означающий конец таблицы. Указывать его не обязательно, но для предотвращения возникновения ошибок лучше указать.

Рассмотрим создание вики разметки на конкретном примере:

А вот и код, благодаря которому создана эта таблица и вся разметка в целом.

{| |- |

”’Новости”’
||
”’Основное”’
||
”’Все серии”’
|- !
[]
!!
[]
!!
[]
|- |
[[Новости из жизни актеров сериала|Новости]]
[[Биографии]]
|
[[Аудио]]
[[Видео]]
[[Книги]]
[[Обсуждения]]
|
Сезоны:
[] | [] | [] | []
[] | [] | [] | []
|- |} Вконтакте есть небольшой учебник с курсом по вики-разметке.

Оформление ссылок через wiki-разметку, а так же как сделать ссылку с анкором вконтакте:

WIKI-разметка: графическое меню

Как сделать графическое вики-меню в группе/паблике :

1) нарезаем картинки в фотошопе

2) заливаем в альбом и собираем меню тегом nopadding

[]
[]
[]
[]

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