Оформлення групи Вконтакте: як зробити вікі розмітку

1. Ідея і вибір формату співтовариства
2. створення групи
3. Оформлення групи Вконтакте
4. шаблон розмітки
5. Установка аватара і меню для групи
6. Wiki-розмітка меню групи Вконтакте

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

Ось кілька прикладів, щоб всі розуміли, про що йдеться.

Такі групи дозволяють виділитися серед своїх конкурентів і привертати більше користувачів. Особливо, якщо ще і контент цікавий :)
В рамках даної статті ми поговоримо про те, як це все робиться. Щоб більш детально все розібрати і розібратися з усіма тонкощами, візьмемо конкретний приклад. Буде невеличкий майстер-клас з оформлення груп.

Ідея і вибір формату співтовариства

Найперший етап нашої роботи - це ідея. Потрібно зрозуміти, про що ми хочемо розповісти і кому. В контакті є кілька форматів спільнот і вибирати варто з урахуванням поставлених завдань. Хоча в подальшому групу можна перевести в формат паблік і навпаки.

Пояснюю на пальцях. Паблік - це щось порівняй блогу. Стрічка новин. Іншими словами, ми розповідаємо своїм передплатникам про якісь речі і вони не зможуть писати на стіні нашої спільноти. Максимум - коментувати.

Група дозволяє створити більш відкрите до бесіди і обговорень співтовариство, де люди зможуть від свого імені робити пости в стрічці. У неї також можна додавати друзів зі свого списку. У паблік такої можливості немає. Крім того, в групі трохи більше можливостей по інтегруванню вікі-розмітки (тут є розділ «Новини», в який можна інтегрувати меню).

Глобально можна міркувати так: якщо нам потрібно створити співтовариство для магазину, то я б взяв формат «паблік». Якщо ж мова йде, наприклад, про любителів риболовлі, то краще взяти «групу». Хоча, кожен вільний чинити так, як вважає за потрібне. Адже в будь-який момент формат можна буде змінити. Однак, майте на увазі, що Вконтакте вводить обмеження на повторне зміна формату співтовариства і після першого разу потрібно буде чекати кілька днів до того моменту, як ви зможете все повернути назад при необхідності. Тому тестувати функціонал краще до того, як група почне наповнюватися контентом.

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

Формат буде «Група», так як потрібно створити природний приплив аудиторії і максимально розширити спілкування всередині спільноти. Відразу уточню, що буду використовувати універсальну методику, яку можна застосовувати як в форматі групи, так і в паблік. Це працює скрізь.

Контенту море, починаємо втілювати ідею в життя!

створення групи

Щоб створити групу, переходимо в «Мої групи» в правому меню аккаунта Вконтакте і натискаємо на синю кнопку вгорі «Створити спільноту».

Повинно з'явитися ось таке віконце, де ми вводимо назву для нашої групи і вибираємо формат.

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

Як ви бачите, я додав трохи параметрів: включив відео, аудіозаписи, обговорення і ще ряд можливостей, які мені знадобляться в подальшій роботі при зборі контенту. Все це можна буде в подальшому змінювати без будь-яких обмежень. Також я прописав адресу свого сайту. Якщо у вас сайту немає, або ж його тематика не відповідає формату співтовариства (вони про різні речі і ніяк не пов'язані один з одним), то цей рядок можна залишити порожній.

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

Усе. Група створена!

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

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

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

шаблон розмітки

Що вдає із себе шаблон і що це взагалі таке? Шаблон - це свого роду заготовка. В даному випадку, в * .psd форматі у нас розмічені області для картинки під меню і аватарки групи.

Як видно на другому прикладі на початку даної статті, ми можемо зробити оформлення в єдиному стилі для аватарки і картинки меню. При цьому візуально її розрізає на 2 частини. Так ось шаблон дозволяє сформувати зображення так, щоб усунути зміщення графіки і максимально підігнати картинки на один рівень.

Щоб стало зрозуміліше, ось приклад.

Ми бачимо, що на обох частинах картинки є смуга з видом на житловий район. Без використання шаблону рівно зробити з першого разу практично нереально. Потрібно буде підганяти картинки, виміряючи розбіжності аж до 1px. У той час як при використанні шаблону ми просто додаємо в нього графіком в рамках розмітки і відразу ж отримуємо бажаний результат.

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

Ми ж тим часом приступаємо безпосередньо до графічного оформлення своєї нової групи. Тут я вибираю шлях найменшого опору і для пошуку елементів оформлення вирушаю в Google Картинки. Можна використовувати і Яндекс. Кому що більше подобається.

Дизайнерської освіти у мене немає, тому детально зупинятися на питаннях підбору шрифтів і інших дрібниць не будемо. Повороживши трохи в фотошопі, я отримав такий результат.

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

Перший етап роботи з графікою завершено. Повертаємося в контакт.

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

Клацаємо мишкою на двох типів на місці Ави нашої групи і завантажуємо туди наше зображення. Ось ці хлопці, під ними ще написано «Завантажити фотографію».

Додаємо картинку. Вказуємо поля і вибираємо мініатюру. Тут все просто і проблем бути не повинно.

Після чого нам треба додати картинку посилання на наше майбутнє меню. Тут трохи складніше. Для роботи нам буде потрібно скрипт для створення вікі-сторінок Вконтакте (Його також можна знайти в правому меню мого сайту в розділі «Корисні посилання» - там велика буква В в синьому квадратику).

Як ми бачимо, потрібно знати id спільноти. Дізнатися його дуже просто. Знаходимо в своїй групі меню (відразу під аватарки) і відкриваємо «Статистику спільноти». При цьому в адресному рядку браузера з'явиться щось схоже (цифри будуть інші).

Ці цифри після «? Gid =» і є шукане id групи. Вставляємо отримане значення в форму скрипта і пишемо назву для тієї сторінки, яку хочемо створити. В даному випадку, я вбиваю «Меню».

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

Якщо все зроблено правильно, відкриється ось така сторінка.

Це те саме вікно, де ми трохи пізніше зробимо вікі-розмітку і створимо внутрішнє меню для своєї групи. Поки що нам достатньо написати тут що-небудь. Після чого натискаємо синю кнопку «Зберегти сторінку» і вгорі тиснемо на посилання Повернутися до сторінки.

Я у себе написав «Меню» і моя сторінка після збереження стала виглядати наступним чином.

Дизайну ще ніякого немає, але зараз нам потрібна лише посилання на цю сторінку. Забираємо її в адресному рядку браузера і повертаємося на головну сторінку нашої групи. У стрічку.

Тут створюємо пост такого змісту: вставляємо туди картинку і посилання на сторінку меню для групи.

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

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

Тепер займемося оформленням безпосередньо самої менюшки. Знову йдемо в фотошоп і створюємо дизайн для нашого меню. При проектуванні інтерфейсу потрібно пам'ятати про тих людей, які будуть заходити в вк через додаток з мобільних телефонів. Іншими словами, у нас не повинно бути дрібних елементів і крім того потрібно постаратися зробити все якомога зрозуміліше. Щоб не потрібно було гадати, як тут все влаштовано і куди нам натиснути ... а просто ткнути в потрібний пункт і вивчати потрібну інформацію.

Не буду зараз зупинятися детально на тому, як саме я збирав меню. Ось, що у мене вийшло.

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

Розрізаємо зображення на фрагменти і зберігаємо їх.

Усе. Настав час заключного акорду - збираємо меню вже в самій групі.

Для цього повертаємося на головну сторінку групи (там, де стрічка і наша посилання-картинка, яка веде в меню). Клацаємо мишкою на зображення меню і потрапляємо на ту саму сторінку, яку раніше створили для менюшки.

Якщо ви адміністратор або творець групи (в нашому випадку це так і є), то в верху сторінки буде посилання «Редагувати». Клацаємо по ній.

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

Після чого тикаємо в іконку фотоапарата і додаємо відразу всі фрагменти нашого меню. У режимі вікі самих картинок ми не побачимо, лише код цих зображень з розмірами і параметрами.

Я хочу розмістити меню по центру і щоб між фрагментами не було ніяких зазорів. Тому кожен з елементів обгортали в тег <center> </ center> і до вже вкладеному параметру «noborder» дописую другий параметр «nopadding». Перший відключає обведення фрагментів і кордони у комірок таблиць. Другий прибирає відступи від краю.

Перший і останній елементи меню не повинні бути кнопками - у мене на малюнку це всього лише графічний елемент без посилання на внутрішню сторінку, тому до них прописуємо додатково параметр «nolink». Це прибере можливість клацнувши по даному елементу відкрити в окремому вікні шматочок картинки. Від клацання мишки тепер взагалі нічого не станеться. Це звичайний фон сторінки. Неактивний.

У моєму випадку код меню виглядає наступним чином.

Окремо хочу відзначити той факт, що після імпорту картинок в вк вбудована система часом невірно вказує розміри зображень. Тому за цим потрібно уважно стежити і виставляти саме ті, які ми планували на етапі проектування дизайну. В іншому випадку все може роз'їхатися і пазл в результаті не складеться.

Коли ми прописали код і вирівняли всі елементи, зберігаємо сторінку і бачимо те ж саме, що було в фотошопі.

Залишився останній штрих - потрібно створити ті самі сторінки, куди буде відправляти людей наше меню. Для цього знову звернемося до скрипту по генерації wiki-сторінок і на цей раз замовляємо відразу три сторінки. При цьому також необхідно що-небудь на кожній написати і не забути зберегти кудись їх адреси з адресного рядка браузера.

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

В результаті код меню приймає наступний вигляд.

Зовні ж нічого не змінилося. Зате, коли ми клацаємо мишкою по елементам меню, видно, що тепер воно працює!

Як бачите, нічого складного. Далі структуру можна розвивати подібним чином як завгодно довго: з меню робити посилання на розділи. У розділах оформляти нові менюшки і так знову і знову.

Що стосується самої розмітки і правил, за якими пишеться код, раджу почитати спеціально присвячену цій справі групу Вконтакте. Хлопці описали всі ключові моменти і в їх каталозі без праці можна знайти необхідний елемент і з'ясувати, як додати його на свою вікі-сторінку.

Посилання по темі статті:

1. Група, яка створювалася на абзацах цієї статті .
2. Технічна сторона вікі-розмітки (група вконтакте) . Все про код, параметрах і можливі проблеми.
3. Інструмент для пошуку картинок .
4. Скрипт для створення вікі сторінок .
5. Шаблон оформлення аватарки і посилання-картинки для меню в PSD-форматі .