[Гендальф Серый]

Гендальф Серый. Создание графического меню для публичной страницы Вконтакте.
Работает исключительно на магии.
Специально для webmasters.ru

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

1. Создаём страницу для нашего меню.

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

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

Как узнать ID Паблика
Находим тут нужный вам паблик
Копируем id паблика из ссылки на статистику (http://vk.com/stats?gid=40207438), из ссылки «Управление страницей» (http://vk.com/public40207438?act=edit) или с поста на стенке (http://vk.com/wall-40207438_136). Получили ID публичной страницы: 40207438
Вставляем в форму, что выше в поле «ID Паблика»
Заполняем «Название создаваемой страницы»
Жмем «Создать страницу». В новой вкладке открывается ваша страница.
Забыли адрес страницы? Не беда, если вы помните название страницы. Проделайте то же самое, что нужно для создания новой страницы и вы попадете на уже созданную вами страницу.
Итог: мы получили страницу vk.com/page-40207438_44110215

2. Подготовка графики

Ну что, страница у нас есть, осталось сделать графический макет. Лично я рисую цельную картинку, а потом разрезаю её на части.
Пример:


Но иногда нужно отрисовать множество отдельный элементов. В таком случае, рисовать придётся каждый отдельно.
Пример:



Лично я пользуюсь Corel Draw, ибо очень удобно. (люблю вектор, да и лицензия у меня). Однако, сами можете рисовать хоть в пэинте. Ещё хочу предупредить, больше 10 элементов у вас прикрепить не выйдет, так что рассчитывайте количество изображений. Я, конечно, знаю, как обойти это ограничение, но ведь я весь такой загадочный...

3. Вёрстка

Так, страница у нас создана, графика у нас есть. Теперь начинается магия. Изначально вики-страницы не предназначены для паблика, но нас это не удержит! Мы будем делать всё и сразу.

Грузим ваши изображения. Имеем много весёлых картинок, которые расположены крайне весело. Аррррр.



Теперь начинаются математические рассчёты. Максимальная ширина: 600px. Высота нам не важна. Давайте прокликаем каждую картинку и установим ширину таким образом, чтобы общая длина строки не превышала максимальный размер:



Прим. Поля каждой картинки - 5px, что не стоит учитывать, если мы хотим сделать на выходе цельное изображение. Чуть позже я расскажу, как их убрать.

После всего этого действа на выходе мы получаем что-то вроде этого:






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




Уже работает, но выглядит ужасно. Не стоит пугаться этого ужаса. Дуем из визуального редактора в редактор кода и видим весёлый-развесёлый код, немного похожий на вики-разметку из википедии. Нам нужно убрать поля у картинок. Для этого мы к каждому изображению добавлем атрибуты nopadding и noborder:

Код:

[[photo216767283_309869015|99x72px;noborder;nopadding;| ]]
[[photo216767283_309869017|199x72px;noborder;nopadding;| ]]
[[photo216767283_309869021|203x72px;noborder;nopadding;| ]]
[[photo216767283_309869023|95x72px;noborder;nopadding;| ]] 
[[photo216767283_309869719|298x90px;noborder;nopadding;|page-57681113_44775894]]
[[photo216767283_309869729|298x90px;noborder;nopadding;|page-57681113_45064452]]
[[photo216767283_310545432|596x33px;noborder;nopadding;| ]]
[[photo216767283_309881284|298x117px;noborder;nopadding;|page-57681113_45064396]]
[[photo216767283_309881296|298x117px;noborder;nopadding;|page-57681113_45064435]]

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

Очень важно: ни в коем случае не выходите из текстового редактора, не сохранив код. Если вы перейдёте из текстового редактора в визуальный, а потом назад - у вас слетят все атрибуты.

На выходе (если всё верно подрассчитали) имеем уже более менее нормальное изображение:





4. Размещение в закреплённом посте

Так, страница с меню у вас готова - осталось сделать так, чтобы она была всем видна. Рисуем красивую зазывающую картинку. Ну или не зазывающую. Я делаю нечто вроде такого:



или такого:



Затем мы делаем новый пост в паблике, в который вставляем ссылку на нашу страницу с меню и прикрепляем к нему нашу крутую картинку:



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




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




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

Несравненные консультации по продвижению Вконтакте оказывает мой хороший друг и коллега Арсений Скурт

Ну и несколько примеров, сделанных мною лично с нуля:

Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 1 сообщение(ий)):

У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.

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


С вами был Гендальф Серый, удачи в продвижении!

[Zzorge]

Хотел написать подобную статей, но как всегда Кирюха опережает)

К слову про момент верстки - не делайте её в графическом редакторе, при сохранении он жутко лагает и иногда все портит.

Кстати, давно хотел спросить. Кирилл, что ты больше любишь, мясо или рулет?

[brainix]

Zzorge, Гендальф Серый, а в личной переписке это нельзя было выяснить? :) Или только что кто-то проспорил

Гендальф Серый, хотите форум разорить золотыми темами?

[Denisua]

Всем доброго времени суток.
Гендальф)) Очень порадовал предоставленный тобой здесь контент, так же порадовало меня как заказчика твой подход к выполнению работы. Потому что без письменного ТЗ ты создал шедевр и я рад, что те паблики, которые мне нравились по дизайну и по оферам были сделаны тобой. Что я могу еще сказать ? Всем смело рекомендую обращаться к Гендальфу хотя бы по одной причине. Вот она Будь в тренде ВКонтакте

[ROMASA464]

Блин,спасибо вам!
Сейчас пойду админам пабликов спамить с предложением о создании меню))

[Translit13]

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

[3s777]

Как всегда информативно и все по делу.
Спасибо большое за мануал!

[VARTAN]

Спасибо за мануал очень полезная статья. но зачем совершать дополнительные излишние манипуляции с созданием паблика на постороннем сайте если всё тоже самое можно сделать за 3 шага на офф сайте!?

[heisi]

Приятный и простой мануал. Как раз думал что-то аналогичное запилить, а тут как раз в тему дополнительные идеи. Спасибо, буду пробовать

[Гендальф Серый]

VARTAN, простите, что?