Wiki-разметка на службе у копирайтеров: как создать портфолио и блог Вконтакте

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

Практика и еще больше практики! Я буду описывать процесс на примере реальной группы — Футуристичный копирайтинг.

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

У вас уже есть группа? Читайте, как привлекать в нее больше подписчиков.

Навигация по руководству

• Почему не сайт?
• Группа или публичная страница
• Создание группы
• Редактирование информации о сообществе
• Как узнать ID группы
• Создание wiki-страницы
• Закрепление вики-страницы в группе
• Верстка вики-страницы Вконтакте
• Оформление портфолио Вконтакте
  • Портфолио-альбом
  • Портфолио-страница
  • Оформление списка работ
• Оформление страницы «Услуги и цены»
• Оформление блога
• Оформление главной страницы
  • Создание меню
  • Создание продающей страницы
• Заключение

Почему не сайт?

Сайт — это прекрасно. Вы ни от кого не зависите. Вы можете сделать на нем что угодно: форум, собственный полезный сервис (привет, Главред), систему автоматического приема заказов. Любой дизайн, любые эффекты — никаких ограничений.

Но группа Вконтакте — тоже отличный вариант:

• Полностью бесплатно. Никаких доменов и хостингов. Конечно, они недорогие (1500-2000 в год), но все равно.
• Ее легко создать. Гораздо легче, чем самый примитивный сайт на WordPress. Можно управиться за вечер, даже не имея опыта.
• Легко привлекать читателей. Вы зовете в группу коллег, публикуете что-то интересное — и оно попадает в их новостную ленту.
• Быстро индексируется. Новые статьи попадают в поиск почти мгновенно.

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

К тому же группа — классный вариант для старта. Оформите ее, найдите постоянных читателей, привлеките клиентов. А уже потом создавайте сайт. Страничка в соц. сети превратится в площадку для анонса статей в блоге — продолжит приносить пользу.

Группа или публичная страница?

Вконтакте можно создать 3 типа сообществ: группа, публичная страница и мероприятие. Последнее идет лесом — мероприятия нам сейчас не нужны.

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

Участники не могут писать на стене, но могут предлагать посты для публикации. А вы уже решаете, нужны они вам или нет.

Еще одно различие — в дизайне. В группе список обсуждений находится сразу после описания — над стеной. На публичной странице он размещен сбоку.

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

Многие предпочитают создать группу, пригласить в нее несколько сотен человек, а потом перевести в страницу. Тоже отличный вариант.

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

Если вы уже знаете, как это делать — переходите к следующему разделу.

Первое, что вы должны сделать — создать новую группу:

• Откройте раздел «Группы».
• Нажмите на кнопку «Создать сообщество».

• Введите название. Указывайте любое — его можно менять в любой момент сколько угодно раз.
• Теперь выберите вид сообщества: группа или публичная страница. Разница описана выше.

• Нажмите «Создать сообщество».
• Здесь вы можете изменить указанное название и выбрать тип страницы (его тоже можно менять в любой момент).
• Не забудьте принять Правила пользования сайтом.

• Нажмите «Создать страницу».

Ура, сообщество создано!

Редактирование информации о сообществе

Сразу после создания новой группы вы попадете на страницу «Редактирование информации». Что здесь есть:

• Название. Думаю, объяснять не надо. Единственное обязательное для заполнения поле.
• Описание сообщества. Напишите пару слов о себе и своей группе. Много писать не стоит — никто не станет это читать.

• Адрес страницы. Ссылка на вашу группы. Вместо скучного номера вы можете придумать уникальное название.
• Категория. Что-то вроде вида сообщества. Это надпись под названием страницы в списке групп.  Ни на что больше не влияет. Выбирать не обязательно.

• Веб-сайт. Если у вас есть сайт — укажите ссылку на него. Если нет — можно указать, например, свой профиль на бирже или адрес страницы на Facebook.
• Фильтр комментариев. Блокирует сообщения, в которых есть маты или указанные ключевые слова.
• Дата основания. День создания группы. Или любая другая дата, которая вам нравится.
• Обратная связь. Разрешает или запрещает комментировать ваши записи.
• Комната в Snapster. Интеграция с сервисом Snapster. Я им не пользуюсь.
• Экспорт в Twitter. Все записи на стене сообществе будут дублироваться на вашем Twitter. Просто нажмите на кнопку «Настроить» и авторизуйтесь.
• Сообщения сообщества. Другие пользователи смогут вам писать личные сообщения, а вы — отвечать им от имени сообщества.
• Другие разделы. Подключает блоки с фотографиями, видео, обсуждениями и так далее.

Когда закончите с настройками — нажмите «Сохранить».

Теперь можно загрузить основное изображение. Нажмите на «Загрузить фотографию» справа.

Укажите путь в изображению. Поставьте туда ваш логотип, фотографию или нарисуйте (закажите) что-нибудь особенное. С помощью рамки выделите ту область, которая и станет главной картинкой сообщества.

Теперь выберите небольшую круглую область, которая станет миниатюрой вашей группы.

Вот, что у нас получилось. Страница стала на 35% привлекательней!

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

На этом подготовительные работы заканчиваются и начинается самое сложное — wiki-разметка.

Как узнать ID группы

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

Для скрипта вам понадобится узнать ID вашей группы. Если вы не меняли ее адрес — то это цифры в адресной строке, которые идут после слова «club». Я уже поменял, поэтому мне такой простой способ выцепить ID недоступен.

Кликните по любому посту на стене, чтобы открыть его. Если ничего нет — напишите что-нибудь. Что угодно.

В адресной строке появятся новые данные. То, что находится посередине между «wall-» и «_» (нижним подчеркиванием) — и есть ID вашей страницы. Сохраните его где-нибудь.

Создание wiki-страницы

Теперь вы можете использовать скрипт для создания новых страниц с вики-разметкой.

http://vk.com/pages?oid=-124301131&p=Имя

Скопируйте это и вставьте в адресную строку браузера. Вместо моего ID укажите свой. А вместо слова «Имя» напишите название создаваемой страницы. Можно использовать русский язык, пробелы, цифры. А затем нажмите Enter, чтобы перейти по ссылке и запустить скрипт.

Будьте внимательны! Название вики-страницы изменять нельзя. Если будут опечатки — придется создавать новую.

Давайте для начала сделаем главную страницу. Я назвал ее «Меню».

Нажмите «Наполнить содержанием».

Здесь находится редактор страницы. Но нам пока что нужен не он, а ссылка. Посмотрите на адресную строку. Вам нужно все, что расположено до слов «?act=edit&section=edit».

Скопируйте ссылку и сохраните ее где-нибудь. Получится что-то вроде такого: «https://new.vk.com/page-124301131_50771728».

Это очень важный момент. Новая страница еще нигде не закреплена и на нее не ведут никакие ссылки. Если вы закроете ее — то потеряете.

Я советую создать отдельный файл, в котором будет храниться структура вашей группы. Оформите его в виде «Название — ссылка — ID страницы». ID — это «page-124301131_50771728». Оно вам еще понадобится.

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

Что делать, если вы сохранили только ID страницы, но забыли про ссылки? Введите в адресную строку адрес «https://vk.com/page-124301131_50771728». Естественно, подставьте ID своей страницы.

Закрепление вики-страницы в группе

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

Теперь удалите текст. Сама ссылка никуда не денется.

Загрузите изображение. Максимальная ширина картинки — 510 px. Максимальная высота — тоже 510 px. В пределах этих значений можно делать что угодно. Квадрат 510х510 — самый большой баннер, какой вы можете сделать. Это справедливо для любых постов, не только для закрепленных.

Нажмите отправить. Теперь кликните по значку в виде трех точек в правом верхнем углу поста. И нажмите «Закрепить».

Таким же образом можно делать анонсы статей в вашем wiki-блоге. Только закреплять их не надо.

Обновите страницу. Информация о группе исчезла. Вместо нее появился созданный вами пост с ссылкой и картинкой.

Если кликнуть по картинке или по кнопке «Посмотреть» — откроется wiki-страница.

Главную пока что трогать не будем. У нас ведь еще нет остальных страниц. Ссылки давать не на что. Сначала займемся другими вещами.

Верстка вики-страницы Вконтакте

Я не буду описывать все существующие теги для верстки. Все уже давно написано до меня. Есть , посвященная вики-разметке. В ней можно найти что угодно. Там все рассортировано по темам — бери да применяй.

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

На странице редактирования есть 2 режима: обычный и режим разметки. Обычный почему-то нещадно глючит — постоянно ломает ссылки. И большинство функций в нем недоступны. Поэтому я стараюсь в нем не работать. Чтобы перейти в режим wiki-разметки, кликните по значку <> справа вверху.

Что должно быть на странице «Обо мне»? Немного информации, список преимуществ перед другими копирайтерами, возможно, фотография. Давайте это и сделаем.

Для начала напишите текст. Лично мне удобнее писать в любимом Google Docs, а затем копировать в редактор Вконтакте. Не забывайте нажимать «Сохранить страницу» после каждого изменения.

Теперь добавим фотографию. Кликните по значку в виде фотоаппарата и укажите путь к изображению.

Вот и наша фотография

Я хочу, чтобы текст обтекал картинку, поэтому добавлю ей параметр «left». И я не хочу, чтобы люди могли открывать полную версию фотографии, поэтому добавил атрибут «nolink». Подробнее об атрибутах почитайте в группе, на которую я дал ссылку выше.

Чтобы посмотреть на результат — перейдите в обычный режим с помощью кнопки <>.

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

Теперь оформим список. Выделите нужную строку и нажмите на значок списка.

Перед ним появится символ «*». Это и есть тег списка. Вы можете ставить его вручную или пользоваться кнопкой на панели инструментов. Отметьте остальные пункты списка.

Теперь нужно выделить заголовки. На панели инструментов есть кнопки для оформления заголовков H1-H3.

«Обо мне» я сделаю заголовком первого уровня. А фразу перед списком — третьего уровня.

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

Если вам нужно пропустить только 1 строку — <br/> для этого не нужен. Он используется, если вы хотите получить 2 и больше пустых строк подряд.

Пожалуй, можно выделить жирным отдельные слова. Выделите нужный фрагмент и нажмите на кнопку «B» или используйте комбинацию клавиш Ctrl+B.

Вот что получилось в итоге.

Здесь планируется ссылка на портфолио, но такой страницы у нас пока что нет.

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

Теперь сделаем удобное портфолио для клиентов. Я вижу 2 способа:

• Создать альбомы со скриншотами и страницу-список с ссылками на каждый них.
• Создать отдельную страницу для каждой работы и страницу-список.

Для примера я оформлю 2 работы в портфолио — каждую своим способом.

Портфолио-альбом

Чтобы создать альбом, откройте меню «Управление сообществом».

Здесь установите галочку напротив пункта «Фотоальбомы». Теперь вы сможете их создавать. Сохраните изменения.

На странице сообщества нажмите на кнопку «Добавить фотографии» и укажите путь к нужным файлам.

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

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

У меня получилось 4 кусочка текста и миниатюра. Наведите курсор на любое изображение и нажмите на значок «Переместить фотографию».

Создайте новый альбом.

Дайте альбому такое же название, какое было у статьи. Чтобы его легко было найти. Описание вам не нужно. Также поставьте галочки напротив пунктов «Фотографии могут добавлять только редакторы и администраторы» и «Отключить комментирование альбома». Нажмите «Создать альбом и перенести».

Точно также перенесите остальные скриншоты. Только теперь не нужно создавать новый альбом — он уже есть.

Вот что у нас получилось в итоге.

Для последующих альбомов такого геморроя с переносом уже не будет. Нажмите на «Фотоальбомы».

Теперь кликните по кнопке «Создать альбом» в правом верхнем углу. Дайте ему название и загрузите туда новую порцию скриншотов с помощью кнопки «Добавить фотографии».

Все, теперь у нас есть 2 альбома, в которых хранятся скриншоты 2 статей. Хватит, пожалуй.

Создайте страницу «Портфолио» и запишите ее ID. На ней мы не будем размещать сами работы — только названия, миниатюры и короткие описания.

Кликните по значку «Добавить фотографию».

Нажмите на «Выбрать из фотографий сообщества». Откройте нужный альбом и выберите свою миниатюру.

В новой вкладке откройте альбом или первый скриншот в нем. И скопируйте его ссылку (целиком). Ее вам нужно вставить в тег фотографии между вертикальной чертой | и закрывающимися квадратными скобками ]].

Так вы получите миниатюру, при клике на которую откроется нужный альбом или скриншот с началом текста (смотря на что вы укажете ссылку).

Портфолио-страница

Ну, здесь все гораздо проще. Создайте новую вики-страницу и не забудьте записать ее ID. Нажмите на значок «Добавить фотографию» и загрузите скриншот своего текста, предварительно порезанный на небольшие кусочки. В идеале 1 изображение — 1 абзац.

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

Теперь выключите режим вики-разметки (если он был включен).

Неплохо, но маловато будет. Кликните по первой картинке. В открывшихся настройках задайте ширину (левая ячейка) — 607 px. Это максимально допустимый размер изображения на странице. Высота изменится автоматически.

Вот что получилось. Точно так же увеличьте все остальные фрагменты текста.

Таким образом вы можете засунуть на вики-страничку текст любой длины. Главное, чтобы его можно было прочитать при ширине 607 px.

Наконец-то нам понадобятся ID страниц, которые вы записывали. Откройте свою страницу «Портфолио».

Загрузите на нее миниатюру (из созданного альбома или с компьютера). Теперь вставьте ID страницы с текстом между закрывающимися квадратными скобками ]] и вертикальной чертой |.

Собственно, все. Теперь при клике по миниатюре посетитель перейдет на страницу с текстом.

Оформление списка работ

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

Чтобы сделать гиперссылку, используйте конструкцию вида [[Ссылка|Текст]]. Если нужно переходить на вики-страницу — вместо ссылки указывайте ID.

Оформление страницы «Услуги и цены»

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

Подробно обо всех тегах, которые нужны при верстке таблицы, можно почитать . Я их описывать не буду. Зачем дублировать хороший и понятный гайд?

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

Вот как это будет выглядеть.

Если хотите, можете сделать отдельную страницу для описания каждой услуги. Напишите продающий текст и укажите ссылки на примеры работ, например. Получится клево. Этот процесс я описывать не буду — ничего нового для вас тут уже нет.

Оформление блога

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

Есть и другой способ организации блога Вконтакте — с помощью #хештегов. Придумайте себе несколько уникальных хештегов для категорий статей. Например:

• #books@future_copy — обзоры на книги.
• #good4copy@future_copy — полезное для копирайтеров.
• #cases@future_copy — кейсы.
• #smm@future_copy — статьи про SMM.

Когда вы публикуете новую статью — в посте с анонсом напишите хештег с темой. А в самом блоге создайте ссылки на поиск по этим хештегами. Так вы автоматизируете процесс добавления новых статей. Опубликовали, написали анонс с хештегом — пост уже в списке. Здорово я придумал, правда?

Что нужно сделать:

• Создать вики-страницу и написать на ней свою статью.
• Опубликовать на стене анонс с хештегом. Не забыть прикрепить ссылку на страницу к посту.
• Кликнуть по хештегу.
• Скопировать адрес открывшейся страницы.
• Сделать гиперссылку на wiki-странице своего блога.
• Profit!

Вот как выглядит код моего меню по блогу.

А вот как оно выглядит в живую.

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

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

Оформление главной страницы

Есть 2 способа оформить главную страницу:

• Сделать на ней навигационное меню. В большинстве групп (в том числе в и в «» ) вы увидите именно это.
• Разместить на ней продающий текст. А меню сделать сверху — как на сайтах.

Создание меню

Для первого способа обычно создается большой красивый макет с кнопками и разрезается на части. А потом все кусочки загружаются на страницу в определенном порядке. Декоративным частям присвойте атрибут «nolink», а кнопки сделайте гиперссылками. Это все вы уже умеете.

В меню моей группы декоративных картинок нет. Только кнопки. Выглядит стильно и оригинально.

Совет: если хотите, чтобы между изображениями не было никаких промежутков — добавьте им атрибут «nopadding».

Совет №2: если вы помещаете много картинок в ряд — в мобильной версии меню будет выглядеть ужасно. Чтобы этого не случилось — создайте таблицу и помещайте каждое изображение в отдельную ячейку.

Создание продающей страницы

Второй вариант интереснее. Мы сделаем группу еще больше похожей на сайт. Что копирайтеры обычно помещают на главную? Продающий текст!

Робот Бендер писать продающий текст для главной поленился. Поэтому придется просто поставить его фото. Вы ведь уже умеете верстать страницы с текстом.

Теперь нужно сделать главное меню, в котором будут ссылки на остальные страницы группы.

Если вам лень рисовать кнопочки — сделайте просто текстовые гиперссылки. Тут то вам и пригодится файлик с сохраненными ID всех страниц. Поместите меню по центру. Для этого выделите его и нажмите на кнопку «Выравнивание по центру».

Вот что у нас получилось.

Мне нравится, как выглядит меню, если его оформить в виде цитаты. Выделите его и кликните по кнопке «Добавить цитату».

Уже гораздо солиднее, правда?

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

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

Заключение

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

Сюда можно добавить страницу с вашими контактными данными. Можно добавить страницу с брифами. Просто загрузите их в документы Вконтакте и разместите полученную ссылку у себя в группе. Только не забудьте снять галочку с опции «Личный документ». А то никто не сможет его скачать.

Или используйте онлайн-брифы, созданные в Google Forms. Их не надо скачивать — только перейти по ссылке.

Кстати, заходите в группу «». Я создал ее специально для этого гайда. В ней можно увидеть результаты всех описанных тут действий. Если вам нужен код какой-то из страниц — напишите мне, я отправлю.

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

Оцените статью:

Понравилась статья? Поделитесь в социальных сетях!

Подписывайтесь на . Там много интересного.