Жизнь в контакте

Всё о социальной сети В контакте: программы для контакта, аватарки, статусы, граффити и секреты

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

wiki

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

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

Работа с изображениями

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

Итак, для вставки картинки заходим в альбом, копируем адрес фотографии, например photo11111_11111, и обрамляем его двойными квадратными скобочками таким образом:

[[photo11111_11111]]

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

[[photo11111_11111|options|text/link]], где на месте options может находиться одно из таких значений:

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

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

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

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

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

Приведем пример оформления меню группы с помощью wiki-разметки.

gr3_1

wiki-разметка

Это меню было создано применением следующего кода:

{|
|-
|<center>”’Новости”’</center>||<center>”’Основное”’</center>||<center>”’Все серии”’</center>
|-
!<center>[[photo708176_168310200|nolink;noborder;90x80px| ]]</center>!!<center>[[photo-4489985_130746672|nolink;noborder;90x80px| ]]</center>!!<center>[[photo708176_168309890|nolink;noborder;90x80px| ]]</center>
|-
|<center>
[[Новости из жизни актеров сериала|Новости]]<br/>
[[Биографии]]<br/></center>
|<center>
[[Аудио]] <br/>
[[Видео]]<br/>
[[Книги]]<br/>
[[Обсуждения]]<br/></center>
|<center>
Сезоны:<br/>
[[1 сезон|1]] | [[2 сезон|2]] | [[3 сезон|3]] | [[4 сезон|4]]<br/>
[[5 сезон|5]] | [[6 сезон|6]] | [[7 сезон|7]] | [[8 сезон|8]]<br/></center>
|-
|}
Как мы видим в примере, изображения наделены такими опциями, как nolink и noborder, которые убирают ссылку и рамку картинки. Также были изменены размеры изображений.
Вторая строка ячеек таблицы создавалась с атрибутом !, поэтому и имеет темный цвет заливки.
При переходе на новую строку внутри третей ячейки был использован тег <br />, а для центрирования текста в ячейках – тег <center>.

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

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

  1. Оформление ссылки как ссылки:
    [http://www.kontaktlife.ru]
  2. gr3_2-1

  3. Оформление ссылки как текста:
    [http://www.kontaktlife.ru|Всё о контакте]
  4. gr3_2-2

  5. Оформление ссылки как изображения:
    [[photo40778045_189420249|40px|http://www.kontaktlife.ru]]
  6. gr3_2-3

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

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

1. Нарезаем картинку в фотошопе и жмём “Сохранить для веб”
2. Загружаем картинки через Стандартный загрузчик т.к. флеш-загрузчик может ухудшить качество
3. Собираем меню тегом nopadding
4. Прописываем ссылки
По итогу получится что-то типа:

[[photo-177777777_18888888|noborder;370px;nopadding|club11111111]]
[[photo-177777777_18888888|noborder;370px;nopadding|Новости]]
[[photo-177777777_18888888|noborder;370px;nopadding|Программы]]
[[photo-177777777_18888888|noborder;370px;nopadding|http://vk.com]]
[[photo-177777777_18888888|noborder;370px;nopadding|Правила]]
[[photo-177777777_18888888|noborder;370px;nopadding|club11111111]]
[[photo-177777777_18888888|noborder;370px;nopadding|Магазин]]
[[photo-177777777_18888888|noborder;370px;nopadding|Полезное]]
[[photo-177777777_18888888|noborder;370px;nopadding|Админы]]
[[photo-177777777_18888888|noborder;370px;nopadding|F.A.Q.]]

Особенности и секреты wiki-разметки

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

  • Следует быть осторожными, изменяя размер изображения – если он будет меньше 131 пикселя, качество картинки значительно ухудшится;
  • Максимальный размер ширины изображения – 610px;
  • На одной wiki-странице не может размещаться более 17 незакрытых тегов;
  • Указывая ширину изображения, его высота изменится автоматически в соответствии с пропорциями;
  • Список внутри таблицы или спойлера создается при помощи тега <br />;
  • Одна строка разметки может содержать в себе не более 8 элементов списка.

Приложения в контакте для wiki-разметки

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

Интерактивный FAQ(beta) Приложение, которое дает возможность пользователям проверить свои способности и знания wiki-разметки. Принцип приложения довольно прост: Вам дается уже оформленное меню, к которому необходимо восстановить код разметки, после чего сравнить свою версию с правильной.
Вики редактор Приложение-редактор, который поможет Вам оформить группу без каких-либо знаний wiki-разметки: Вам достаточно просто кликать мышкой в визуальном редакторе, а всё остальное приложение сделает за Вас!

Узнать больше про wiki-разметку и пройти наглядные видео-уроки по оформлению групп в контакте можно, воспользовавшись путеводителем по видео-урокам от официальной группы Wiki-разметки в контакте по ссылке http://vkontakte.ru/app1755280.

Если вам нужна раскрутка группы, то читайте наш пост.



30 Комм.

  1. Пашок пишет:

    Реально хорошая статья понятная и расписанная до мелочей!!! 5+
    Но вот одна проблема картинки не вместе, а друг на друге сидят как исправить? Ответ кидайте на мыло.

  2. Дима пишет:

    Пробелы и энтеры, помогут, и ещё код [avertone] брать в скобки []

  3. Katy пишет:

    А какие еще виды меню вы знаете? Пожалуйста напишите мне…….=) Ну..на этом обсуждении..

  4. Алина пишет:

    спасииииииииииииииибо!!!!!!!!!!=*
    супер статья)

  5. Влад пишет:

    Автор молодчик! статья просто класс! все расжованно до емелочей, и нубу понятно будет! Читай урок по wiki разметке

  6. Таня пишет:

    афигенски^^ спасибо

  7. Виолетта пишет:

    Спасибо огромное! Все понятно и просто))

  8. Виолетта пишет:

    Очень хороший сайт! Все понятно и просто)) 10+

  9. Юльчик пишет:

    А если размер картинки нужен и пробелы убрать между ними ?

  10. сАшЭ пишет:

    хеее пасиб праздник для моей группы

  11. Саша пишет:

    Спасибо, с легкостью сделал меню!

  12. ваава пишет:

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

  13. Алинаааа пишет:

    ваава,когда заходишь в группу, написано “Меню” ну или свежие новости. Там в исходный код все это впихиваешь!

  14. Саня пишет:

    спасибо, видно что написано с умом ))

  15. Maxim пишет:

    5+ за содержимое)) спасибо, что помогли))

  16. Mr.Seishik пишет:

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

  17. Ангелина пишет:

    Какие фишки знаете для пабликов?

  18. петро пишет:

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

  19. Петр пишет:

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

  20. Валуй пишет:

    я непонял! я нуб! как с делать чтоб было ” Мы Вконтакте” и при нажатии, открылась группа!? дайте пример пожалуйста

  21. Denis пишет:

    То что нужно)

  22. Лиза пишет:

    Ну и? Ничего всё равно не вышло.

  23. Юлия пишет:

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

  24. Ирина пишет:

    Нигде не могу найти информацию, как сделать баннер в группе, на котором будет написано: Информация об акции доступна только подписчикам. Туда поставить кнопку “Подписаться” и затем переход к информации.
    Пожалуйста, опишите! Очень надо. Спасибо.

  25. Владимир пишет:

    Спасибо большое, очень полезная информация!

  26. Иван пишет:

    Итак, для вставки картинки заходим в альбом, копируем адрес фотографии, например photo11111_11111, и обрамляем его двойными квадратными скобочками таким образом:
    [[photo11111_11111]]
    ЭТО понятно! но куда вставлять получившееся в скобках??? подскажите)

  27. Евгения пишет:

    А вот я так и не поняла как делать картинки-кнопки.. 0_о

  28. Dimm пишет:

    Здравствуйте! Никак не могу совладать со стыковкой меню и аватара… Если задаёшь высоту авы 500 пикселей, при просмотре получается 460… и никак не состыковать по нижней кромке меню и аватар…. Что не так?
    Благодарю заранее.
    ЗЫ и еще в догонку, можно ли сделать так, чтобы картинка меню не сворачивалась, ну или сама открывалась при загрузке страницы?

  29. Евгений пишет:

    Что это за бред? )))) Не, вы молодцы, конечно, не ищите легких путей, везде смотрел, как это сделать, и везде одна и та же статья с каким-то геморроем, картинками, и все пишут, что уже невозможно сделать открытое меню)) Это чушь! Конечно, об этом нигде не написано, но люди, у вас есть мозг!))) Пришлось, как всегда, самому додумать. Так и быть, поделюсь и открою вам тайну)) Просто в режиме вики разметки пишите одно слово show и все))) Все гениальное просто. Добавляйтесь в друзья)))

  30. Хорошо, но куда писать то?

Трекбеки / Пингбеки
Оставить ответ

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой:

Популярное