Как пользоваться вики разметкой. Вики разметка вконтакте, создаем wiki страницы

Давайте поговорим о том, что такое вики и для чего придумана эта система. Ввёл данный термин Уорд Каннингем в 1995 году. В то же время появилась первая вики-среда. Кстати, слово «вики» было заимствовано у гавайцев, а означает оно «быстрый».

Термин «вики» имеет несколько значений:

1. Особый вид страниц и записей, которые может править любой посетитель сайта. Редактировать здесь можно не только тексты с картинками, но и саму структуру сайта.
2. Конструктор для создания обширных виртуальных энциклопедий.
3. Целая философская теория и специальные технологии.

Что такое вики-разметка

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

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

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

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

Как связаны между собой вики и "ВКонтакте"

Нам с вами предстоит узнать о том, что такое вики-разметка "ВКонтакте", а также научиться её использовать. Но сначала давайте посмотрим, какую пользу может принести данный инструмент для "ВК".

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

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

Преимущества вики

Мы хотим выяснить, как сделать вики-разметку "ВКонтакте". Но для начала посмотрим, чем же так хорош этот инструмент.

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

Некоторые вики-секреты

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

К примеру, картинки с размером, меньшим 131 пикселя, становятся некачественными. Одна страничка должна вмещать до 17 тегов, а строка - не более 8 компонентов. Если вы проставили ширину рисунка, высота его изменится самостоятельно с учётом всех пропорций. отвечает за создание списков.

Вики-разметка "ВКонтакте": ссылки на страницы в группе

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

За ввод ссылок в вики-разметке отвечают вот такие скобочки []. Символы внутри этих скобок обязательно станут ссылкой, перейдя по которой, вы сразу же попадёте на новую страничку. Теперь её надо наполнить и отредактировать. Новая страница готова! Вики-разметка "ВКонтакте" позволяет создавать множество таких страниц. Результатом может стать миниатюрный сайт внутри вашей группы.

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

Интересно то, что вики - вещь умная. Заметив в вашем тексте элементы из HTML-разметки, она может заменить их знаками из своего языка.

Как сделать ссылку-якорь

Ссылки могут стать симпатичными кнопочками или серьёзными якорями. Вики-разметка "ВКонтакте" позволяет создавать и то и другое. Но запомните одно важное правило! Текст всегда ставится справа от ссылки, а картинка - слева от неё.

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

Как соединить ссылку с фотографией

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

У вас должна получиться, например, такая кнопочка: [].

Обратите внимание на функции, доступные для работы с нашей картинкой!

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

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

Создание таблиц с помощью вики

Что ещё умеет вики-разметка "ВКонтакте"? Таблицы она может создавать. Делается это столь же легко, как со всеми остальными объектами. Для вставки в текст таблиц также используются специальные символы.

Сначала посмотрим, из чего состоит сама табличка:

• {| - открываем таблицу;
• |+ - заголовок таблицы, выравненный по центру (необязательный элемент);
• |- - новая строка;
• | - делаем табличку прозрачной;
• ! - тёмные ячейки;
• |} - закрываем таблицу (необязательный элемент, используемый для предотвращения ошибок).

Две предпоследние операции являются вариативными! Если вы, например, сделали тёмную ячейку, применять к ней функцию «Прозрачность» нельзя!

Теперь наполним получившуюся табличку:

• | - открываем ячейку;
• || либо!! - отделяем одну ячейку от другой.

В итоге получится что-то вроде этого (табличка размером 1*3):

|’’’Красота’’’||’’’Здоровье’’’||’’’Спорт’’’

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

Оформляем меню

Давайте посмотрим, как делается вики-разметка меню "ВКонтакте". Для этого нам понадобится красивый рисунок и знания.

Обратите внимание на то, что меню бывает:

• Текстовое (надо создать ссылки-якоря).
• Графическое (надо соединить ссылки с симпатичными кнопочками).
• Табличное (все пункты меню надо занести в табличку).

Предварительно подготовьте картинку, ширина которой должна быть не более 610 пикселей. Обратите внимание на то, что такая ширина обусловлена размерами стены вашей группы. Раскроите изображение в "Фотошопе" или другом редакторе так, чтобы получилось нужное количество кнопочек. Надпишите на каждой кнопке название того или иного пункта меню.

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

1. Сохранить картинки в каком-нибудь альбоме группы.
2. Вставить их непосредственно в статью «Новости», пользуясь встроенным визуальным редактором.

Теперь можно заняться редактированием «Новостей». Для этого из надо переключиться в режим «Вики-разметка "ВКонтакте"» (кнопка «<->»). Далее, учитывая всё описанное выше, со ссылками на различные элементы меню.

Где научиться делать вики-разметку?

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

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

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

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

Я научу пользоваться неограниченными возможностями wiki-разметки, потому что некоторое время назад и сам пытался разобраться во всем этом досконально. Представленная ниже информация, я уверен, окажется более чем полезной не только для новичков этого ресурса, но и для маститых пользователей со «стажем»…

Что такое вики разметка?

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

Для чего нужна wiki-разметка

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

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

Оформление группы с помощью wiki-разметки

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

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

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

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

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

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

[[Название статьи]] или [[Название статьи|текст для ссылки]] ,

Тексты подаются на страницах при помощи специальных знаков – тегов. Пример оформления тегов подаю в таблице ниже.

Шаблоны разметки для меню группы

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

• Шаблон 1.

{|
|-
!
первое меню!

|-
| тексттексттекст
|}
|

{|
|-
!
второе

|-
| тексттексттекст
|}

• Шаблон 2.

{|
|-
{|
|-
!Обучение
|}
*[[ вики-разметка стандартная]]
*[[ вики-разметка расширенная]]
*[]
*[[Помощь]]

{|
|-
!Практика
|}
*[[меню]]
*[[Песочница]]

{|
|-
![[разделы]]
|}
*[[Иконки]]
*[[Скачать]]

{|
|-
!О группе
|}
*[[Новости]]
*[[О нас]]
*[[Правила]]

|
{|
|-
!Последняя новость:
|-
[]
сайт группы

|}
{|
|-
!Объявление!
|-
[]

В руководство будут принимать… из админов!
|}
{|
|-
![[Общая навигация|Общая навигация »]]
|}
|}

• Шаблон 3.

Wiki-разметка для текстового меню с небольшими иконками:

{|
|-
!
[] Пригласи всех друзей

[] »’[[Правила]]»’

[] Фотоальбомы

[] Творчество

[] Фотки


[]

|}

Как вы уже поняли, существует всего несколько разновидностей шаблонов кодировок. Используйте нужные виды шаблонов, и созданная вами группа будет настроена самым лучшим образом. Безусловно, простор для фантазии есть, но для этого придется составлять коды самому. Придется немного потрудиться, перечитать массу информации, чтобы узнать основные принципы построения кодов 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-страница) В Контакте

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

Что такое вики (wiki) — страница и зачем она нужна?

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

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

Как сделать вики (wiki ) – страницу В Контакте в паблике или в группе. Способ № 1

Очень просто! Введите в поисковой строке браузера ссылку вида

вместо ХХХ – поставьте номер id вашего паблика или группы (только цифры). Узнать id номер вашего паблика или группы можно, открыв любую фотографию и скопировав цифры в адресной строке браузера, идущие после «photo-» и до «_».

Вместо pagename – введите название вики-страницы которую вы создаете(если несколько слов, то через нижний флеш «_»). В нашем примере «ЖМИ_СЮДА».

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

Как сделать вики (wiki ) – страницу В Контакте в паблике или в группе. Способ № 2.

1. Если вы хотите сделать вики — страницу для паблика, нужно сначала создать группу (сообщество) В Контакте. Только там есть возможность создания вики — страниц. И уже после этого, готовую вики – страницу можно будет переносить в паблик (публичная страница). Создать группу весьма просто:

А) в правой колонке выбираем «Мои группы»;

Б) в открывшемся окне, в правом верхнем углу нажимаем «создать сообщество»

В) пишем название будущей группы (на ваше усмотрение)

Г) включаем чекбокс (флажок) возле пункта «Группа»

Д) нажимаем «создать сообщество»

Если вам нужна вики — страница для группы В Контакте, то шаг № 1 пропускайте.

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

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

4. Обратите внимание, если на главной странице группы, вместо описания вы «закрепили пост», его нужно «открепить». Нажмите на пост (не на картинку! а именно на текст поста, под картинкой нажмите «открепить»)

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

6. Ставим переключатель режимов редактирования в позицию «Режим wiki-разметки».

7. И пишем фразу, нажав на которую человек попадет на созданную нами wiki-страницу. Но, чтобы этот текст стал кликабельным, его нужно заключить в двойные квадратные скобки (на клавиатуре в английской раскладке кнопки с русскими буквами «Х» и «Ъ»), например [[ЖМИ СЮДА]]. Нажимаем внизу «Сохранить страницу». А затем «Предпросмотр». Если вы все сделали правильно, то надпись, которую вы написали внутри квадратных скобок, появится ниже кнопки «сохранить страницу» и будет кликабельной (станет ссылкой). То -есть, если на нее нажать, вас перенесет на пустую страницу с названием «ЖМИ СЮДА». Если не получилось и под кнопкой «сохранить страницу» вы видите надпись в квадратных скобках, проверьте еще раз в каком режиме у вас стоит переключатель редактирования.

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

https://vk.com/pages?oid=-ХХХ &p=pagename

где ХХХ – это номер id вашего паблика или группы (только цифры). Узнать id номер вашего паблика или группы можно, открыв любую фотографию и скопировав цифры в адресной строке браузера, идущие после «photo-» и до «_».

pagename – название вики-страницы (если несколько слов, то через нижний флеш «_»). В нашем примере «ЖМИ_СЮДА».

1. После того, как заменили id, нажимайте «Наполнить содержанием».
2. Вы опять попадаете в вики — редактор. Если вы не специалист, то наполняйте вики — страницу с помощью визуального режима редактирования. Здесь все просто. Можете добавить, и изменить как вам больше нравится любой текст. Вставить фото, аудио или видео. Прикрепить любую ссылку к тексту или картинки. Чтобы посмотреть результат, нажимайте «Предпросмотр». Ничего сложного.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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