Техническая реализация меню для группы в vk.com

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

После этого переименовываем заголовок, как Вам нужно, например: Меню, Свежак тут или Самое интересное тут.

Теперь начинаем адаптацию изображения в меню. Для этого используем специальную разметку текста, придуманную разработчиками вконтакте, которая называется wiki-разметка. Этот язык разметки текста с каждым днём становиться всё больше и больше так как разработчики постоянно его совершенствует. Если web мастеру для создания сайтов необходимо знать HTML, то SMM специалисту на сегодняшний день необходимо знать язык WIKI. Но вернёмся к делу…

Сейчас я приведу самое главное, что нам потребуется. А остальное можете прочитать на спец. странице Вконтакте о wiki– здесь.

То что, доктор прописал:

[­[photo***_***|Описание]] с помощью данного кода, будем размещать изображение в меню

[­[photo***_***|httр://ссылка.соm/]] с помощью данного кода, будем размещать ссылку на сайт в виде изображения

[­[photo***_***|id***]] с помощью данного кода, будем размещать ссылку на страницу профиля в виде изображения

[­[photo***_***|club***]] с помощью данного кода, будем размещать ссылку на группу вконтакте в виде изображения

[­[photo***_***|page***_***]] с помощью данного кода, будем размещать ссылку на вики страницу в виде изображения
[­[photo***_***|nolink|Описание]] данный код мы будем использовать, если нам нужно вставить не кликабельное изображение. т.е. чтобы при нажатие на него, ничего не происходило.
[[photo***_***|400x105px;noborder| ]] так мы будем менять размеры изображений в меню, т.е. вместо 400×105 вписываете свои размеры. А код noborder используется, чтобы в изображении не было рамки вокруг него.

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

[[photo***_***|400x105px;nopadding| ]]

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

[[photo35930750_292124836|380x130px;noborder;nolink;nopadding| ]]

[[photo35930750_292124840|380x26px;noborder;nopadding|http://ссылка.ru]]

[[photo35930750_292124841|380x20px;noborder;nopadding|http://ссылка.ru/creation-of-sites]]

[[photo35930750_292124843|380x24px;noborder;nopadding|http://ссылка.ru/raskrutka-sajta-bloga]]

[[photo35930750_292124846|380x28px;noborder;nopadding|http://ссылка.ru/earnings-on-the-site]]

[[photo35930750_292124848|380x26px;noborder;nopadding|http://ссылка.ru/konkursy]]

[[photo35930750_292124849|380x25px;noborder;nopadding|http://ссылка.ru/obo-mne]]

[[photo35930750_292124851|380x96px;noborder;nolink;nopadding| ]]

В данном полноценном коде, мы написали, что меню состоит из 8 частей, 6 из которых имеют активную ссылку. Все изображения имеют ширину 380, а высоту разную. Абсолютно все изображения без рамок, и лишних пробелов!