Меню для группы вк готовое: Сделайте меню для группы ВКонтакте онлайн бесплатно

Как сделать адаптивное меню в ВК для группы (паблика, сообщества)

Кроме создания сайта, часто заказывают комплексное оформление аккаунтов соцсетей в едином стиле. Самое популярное – это создание меню в вк (для группы в контакте), оформление канала на ютубе и инстаграмма.

В этой статье я расскажу как сделать адаптивное меню для сообщества вк.

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

Я делаю в фотошопе.

Для начала я нашел подходящие картинки. Очень хорошие изображения можно найти на фотостоках, но они платные (стоимость можно включить в стоимость заказа, если вы делаете меню на заказ).

Картинки для оформления группы вк

Из картинок собираем макеты для оформления группы:

1. аватарка
2. шапка группы
3. кнопка вызова меню
4. меню

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

Аватарка для группы вк

Ава обычно это логотип компании. Если логотипа нет, то вы можете скачать подходящий по теме файл на том же фотостоке и изменить его под себя.

Я так и сделал – скачал подходящий логотип и немного его доработал.

Размер аватарки рекомендую делать 200 x 200 px  (учтите что картинка будет обрезаться окружностью)

Выбор области для миниатюры (аватарки)

Шапка для группы вк

Шапка (обложка) группы это место для полета фантазии. Именно по обложке пользователи определяют о чем эта группа. Следовательно шапка должна передать тематику группы.

Создавая шапку группы вк нужно учитывать особенности отображения размеров на разных устройствах.

Размер шапки вк для ПК

Основной размер шапки 1590 x 400 px 

Размер шапки в VK для компьютера

Размер шапки вк в мобильном приложении

В мобильном приложении шапка обрезается. 83 px срежется сверху и по 197 px по бокам.

Видимая часть в приложении 1196 x 317 px (сюда должна поместится вся важная информация)

Размер шапки в ВК в приложении

Но в приложениях по бокам располагаются дополнительные элементы. Они тоже перекроют часть изображения. Ещё по 140 px слева и справа.

Элементы перекрывающие шапку группы ВК по бокам

Кстати! Вот тут можно посмотреть все размеры вк.

И так, у меня получилась вот такая шапка (обложка)

Готовая шапка для группы вконтакте

Теперь получившуюся картинку загружаем как обложку группы.
Делается это так:

Заходим в Управление

Обложка сообщества → Загрузить. И выбираем нашу картинку.

Как сделать меню в группе ВК

Меню в ВК делается с помощью wiki-разметки (это специальный язык программирования созданный для ВКонтакте).

Для меню нужно создать вики-страницу. Делается это так:

Скопируйте и вставьте в адресную строку такой код (с вашими данными)

http://vk.com/pages?oid=-123456789&p=МЕНЮ 

Где 123456789 это порядковый номер (ID) вашей группы.

Взять его можно в адресной строке.

ID группы ВК

а МЕНЮ – это название страницы.

В результате у вас появится вот такая новая страница.

Новая вики-страница с названием МЕНЮ

Нажимаем “Наполнить содержанием”. И мы попадаем в редактор страницы.

Редактор страницы имеет два режима:
– Визуальный режим
– Режим wiki-разметки

Если треугольные скобки обрамлены в синий квадрат, то значит включен режим вики-разметки.

режим вики-разметки

Если скобки синие без рамки, то вы в визуальном редакторе.

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

Но перед написанием кода, посмотрите в адресную строку.
Скопируйте все символы до знака вопроса (?) – это адрес вашего меню.
Запишите его!

Меню для группы ВК

С начала его нужно сделать (в графическом редакторе).

Размер меню такой:
– ширина максимум 600 px (так удобнее всего)
– высота как получится.

Я сделал такое меню:

картинка меню группы вк

Теперь в фотошопе (инструментом “Раскройка”) я разрезаю меню на равные части.

весь макет режим на равные части

Там же в фотошопе нажимаем Файл → Сохранить для Web…

Выделяю все части и сохраняю в формате Png-24.

В итоге у меня получилось 12 частей.

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

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

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

Возвращаемся на созданную страницу МЕНЮ. Если забыли она находится по этому адресу http://vk.com/pages?oid=-123456789&p=МЕНЮ

Не забываем 123456789 заменить на номер вашей группы.

Что-бы вновь перейти к режиму редактирования – нужно нажать значок Карандаша в верхнем углу.

Нажми для редактирования

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

Таблица в ВК начинается так: {|
а заканчивается так:|}

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

В общем пишем так (но со своими значениями):

{|noborder;nopadding
|-
| [[photo-176307581_456239020|300x100px;nopadding;nolink| ]]
| [[photo-176307581_456239021|300x100px;nopadding;nolink| ]]
|-
| [[photo-176307581_456239022|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
| [[photo-176307581_456239023|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
|-
| [[photo-176307581_456239024|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
 | [[photo-176307581_456239025|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
|-
| [[photo-176307581_456239026|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
| [[photo-176307581_456239027|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
|-
| [[photo-176307581_456239028|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
| [[photo-176307581_456239029|300x100px;nopadding|https://vk.com/topic-176307581_39164350]]
|-
| [[photo-176307581_456239030|300x100px;nopadding;nolink| ]]
| [[photo-176307581_456239031|300x100px;nopadding;nolink| ]]
|} 

Вместо photo-176307581_456239020 и подобных – заменяем на номера своих картинок.

Узнать их можно так:

1. Переходим в альбом группы “Технический”
2. Открываем первое фото куска меню
3. В адресной строке копируем часть с номером этой картинки (там много цифр, перед нужной нам написано photo-)

адрес картинки для меню в vk

И так проделываем с каждой картинкой нашего меню для группы ВКонтакте.

А вместо https://vk.com/topic-176307581_39164350 пишем ссылку на нужную нам страницу.
Эти страницы я обычно создаю как Обсуждения (для этого их нужно активировать через настройки Управления)

Так проделываем с каждой кнопкой.

У тех картинок которые не являются кнопкой стоит значение [[photo-176307581_456239030|300x100px;nopadding;nolink| ]]. При нажатии на такую картинку – ничего не произойдет.

В любой момент редактирования вы можете посмотреть что у вас получается. Для этого кликните по вкладке Просмотр.

Просмотр покажет ваш текущий результат

Кнопка меню вк

Подготавливаем картинку с надписью “Открыть меню” или просто “Меню”.

Это будет кнопка вызова меню группы.

Размер кнопки Меню:

– Ширина 600 px
– Высоту желательно делать меньше или такую же.

Вот моя кнопка вызова меню

Теперь переходим в нашу группу и создаём Новую запись.

В качестве фотографии выбираем нашу картинку-кнопку.

А в названии вставляем адрес с нашим Меню (тот который надо было записать). Вы увидите, что после картинки (ниже) появится надпись МЕНЮ. Теперь просто стираете название-ссылку.

И нажмите на Шестеренку и добавьте галочки “От имени сообщества” (что-бы можно было закрепить запись) и галочку “Выключить комментарии”

Настройка кнопки вызова меню

Теперь нажимая на эту картинку – будет открываться наше меню в вк.

Не забудьте закрепить эту запись, что-бы Меню всегда было вверху ленты постов.

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

Обязательно добавьте статью в закладки. Я так сделал) Не раз ещё пригодится.

И подписывайтесь на новые и только полезные статьи!

Если вам понравилось как я оформляю группу вк, то заказывайте оформление у меня (стоимость услуг)

Шутка дня:
Экипаж прощается с вами и желает Вам приятного полета.

Меню для группы вконтакте пошаговая инструкция. Основы оформления группы в вконтакте с использованием вики разметки

Красивое оформление сообщества «ВКонтакте» – это не прихоть, а важный элемент, формирующий доверие пользователей к вам и вашей компании. Если публичная страница или группа оформлена непрофессионально, ваши потенциальные клиенты вполне логично могут сделать вывод о том, что вы и к своей работе относитесь так же халатно. Чтобы этого не происходило, позаботьтесь о том, чтобы ваша страница «ВКонтакте» была красивой, аккуратной и удобной в использовании. Как это сделать? Читайте ниже.

Актуальные размеры изображений «ВКонтакте»

Некоторое время назад разработчики социальной сети «ВКонтакте» запустили новый дизайн. Это привело к тому, что изменились размеры и принципы отображения изображений. Памятка, которая будет приведена ниже, соответствует всем нововведениям и содержит в себе размеры, актуальные на данный момент времени.

А теперь давайте более подробно по каждому пункту.

Размер аватара ВК

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

Максимальный размер аватара – 200 на 500 пикселей. Но, в принципе, можно загружать изображения и большего размера – до 7000 пикселей с каждой стороны. Главное, чтобы соотношение их сторон не превышало 2 к 5.

Покажу на примере.

У меня есть изображение. Его размер: 200 на 800 пикселей (соотношение 2 к 8). При загрузке не возникает никаких ошибок. Однако использовать это изображение я все равно не могу, т. к. «Контакт» не позволяет мне выделить его полностью.

Обложка

Размер обложки для полной версии сайта — 1590 на 400 пикселей.

Обратите внимание: в мобильной версии и приложениях отображается не полная версия обложки, а только ее часть размером 1196 на 400 пикселей. Посмотрите, как она обрезается в приложении на мобильном:

Чтобы этого не происходило, располагайте основные элементы вашей обложки в пределах 1196 на 400 пикселей.

Прикрепленные изображения

В обновленном дизайне «Контакта» ширина ленты новостей стала фиксированной. Это значит, что изображения, прикрепленные к посту, больше не растягиваются, а остаются такими, какие они есть. Поэтому, если вы хотите, чтобы ваше изображение полностью заняло отведенное ему место в ленте новостей, его ширина должна быть не менее 510 пикселей. Лучше всего, чтобы это был квадрат или прямоугольник в альбомной ориентации.

Звучит слегка запутано:) Поэтому покажу на примере.

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

А вот так смотрится горизонтальное изображение в альбомной ориентации (ширина 510 пикселей):

Как вы видите, чем уже изображение (по высоте), тем мельче оно смотрится в ленте смартфонов. Чтобы убедиться в этом, посмотрите на картинку ниже:

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

Изображения к постам со ссылкой

Все эти данные берутся из кода разметки Open Graph :

Если Open Graph не прописан, заголовок берется из метатега Title, а изображение – из статьи. При этом, его можно легко изменить – либо выбрать другое изображение из статьи с помощью специальных стрелочек:

Либо загрузить свое:

Минимальный размер изображения, которое вы можете использовать в качестве анонса к вашей статье, – 537 на 240 пикселей. Однако вы можете загружать и более крупные изображения, если будет соблюдена пропорция.

Картинка для статьи, созданной в редакторе

Размер изображения для обложки статьи, созданной в редакторе, — 510 на 286 пикселей. Лучше, если она будет темного цвета и более или менее однотонная, т. к. на светлом фоне теряется название статьи и сообщества.

Хороший пример:

Не очень хороший пример:

Размер фото и видео для историй

Размер для фотографий — 1080 на 1920 пикселей. Размер для видео — 720 на 1280 пикселей.

Технические характеристики для видеозаписей:

• до 15 секунд;
• не больше 5 МБ;
• кодек h.264;
• звук AAC.

В историях необходимо использовать фото и видео вертикального формата.

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

Размер обложки для фотоальбома

Размер картинки для видео

1280 на 720 пикселей.

Вики-страница

Ширина области контента у вики-страницы составляет 607 пикселей. Если вы будете загружать картинку большего размера, она автоматически загрузится размером 400 пикселей в ширину. Пример: у меня есть изображение размером 1366 на 768. Если я его добавлю на вики-страницу, получится вот что:

Чтобы изменить размеры картинки, по ней нужно кликнуть и установить нужные значения:

О том, как работать с вики-страницами, я подробно расскажу чуть ниже. Поэтому здесь останавливаться на этом моменте не будем.

Как сделать так, чтобы изображения «ВКонтакте» не ужимались? Влияние фона и размера на качество картинки.

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

Как сделать так, чтобы качество картинок не портилось?

Чтобы изображение не ужималось (точнее, ужималось, но в гораздо меньшей степени), необходимо делать его в 2–3 раза больше нужного размера. Например, если нам нужно сделать аватар размером 200 на 500 пикселей, берем картинку размером 400 на 1000 пикселей. Если нужно сделать меню размером 510 на 400 пикселей, берем – 1020 на 800.

Изображение на темно-синем фоне, которое я привела чуть выше, имеет размер 510 на 350. Я сделала его в два раза больше (1020 на 700) и сохранила. Вот, что из этого получилось:

Как это исправить? Ответ очень прост – нужно выбрать другой фон. Дело в том, что на темном фоне пиксели видны лучше, чем на светлом. Поэтому, если вы хотите добиться идеального качества (хотя картинка выше уже выглядит вполне нормально), то нужно слегка изменить цветовую гамму. Например, фон сделать белым, а текст – синим:

Как оформить шапку страницы

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

Обложка

Не так давно «ВКонтакте» ввели обновление – теперь на страницы можно загружать большие и красивые обложки (1590 на 400 пикселей). Чтобы сделать это, перейдите в настройки и нажмите кнопку «Загрузить».

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

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

Примеры динамических обложек:

Обложка + описание сообщества + ссылка на сайт

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

Описание с хэштегами

Некоторые компании добавляют в стандартное описание страницы хэштеги , которые ее характеризуют. Делается это для того, чтобы у страницы была более четкая релевантность, и чтобы за счет этого она находилась выше в поиске по соответствующим запросам. Честно говоря, я не знаю, работает этот способ или нет. Кейсов на эту тему я не встречала, поэтому если кто знает, буду благодарна, если поделитесь ссылочкой.

Закрепленный пост, рассказывающий, о чем страница

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

А вот что видит пользователь после того, как он кликнет по ссылке:

Меню группы открытое

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

Вот как выглядит закрепленный пост в шапке страницы Flatro:

Меню группы закрытое

Закрытое меню – это тот же самый вики-пост, как и в предыдущем пункте, только на анонсе стоит картинка, на которой нет пунктов меню. Обычно на ней пишут: «Меню», «Навигационное меню» или «Навигация по материалам паблика».

А вот что мы видим, когда кликаем по нему:

Кстати, стоит отметить, что это далеко не единственные варианты. По сути, на этой картинке вы можете написать все, что угодно. Главное, чтобы пользователю хотелось по ней кликнуть, и он понимал, что его после этого ждет. Пример:

Слитное меню для группы

Слитное меню – это когда картинка на анонсе вашего меню составляет с аватаром одно изображение. Чуть ниже я подробно расскажу, как сделать такое меню, а пока просто посмотрите, как это красиво выглядит.

Гифка и аватар одним изображением

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

Кстати, этот пример я подсмотрела в группе SMM-маркетолога Сергея Шмакова. Так что, за находку выражаю ему благодарность:)

Скрытое меню

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

Автоматически воспроизводимое видео

В конце ноября 2015 года в социальной сети «ВКонтакте» появилось интересное нововведение – как только пользователь заходит на вашу страницу, видео, прикрепленное к шапке, начинает воспроизводиться автоматически. С помощью этого приема вы сможете привлечь еще больше внимания пользователей (особенно тех, кто впервые зашел на вашу страницу), и при этом, не раздражать тех, кто не любит, когда ему навязывают свой контент, ведь видео воспроизводится без звука и практически не мешает.

Как добавить такое видео в шапку своей страницы?

Для этого нужно выполнить три условия:

• Прикрепить ролик к записи и закрепить эту запись вверху сообщества.
• Кроме ролика, к записи больше ничего не должно быть прикреплено. Только видео и текст по желанию.
• Видео должно быть загружено «ВКонтакте» – сторонние плееры не поддерживаются.

Запись, которая получает много репостов

Еще один способ продуктивно использовать место в шапке вашей страницы – это закрепить в нее один из своих самых удачных постов – тот, который уже набрал и продолжает набирать большое количество лайков и расшариваний. Зачем это делать, думаю, всем понятно – чем больше репостов, тем больше охват, тем больше подписок получает страница.

Анонсы новых клипов, альбомов, мероприятий

Презентация новых товаров/услуг

Скидки и акции

Кейсы, отзывы клиентов

Реклама приложения

Розыгрыши

Правила сообщества

Ссылки на другие соцсети

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

Каким должен быть аватар

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

Миниатюра аватара

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







2. Текст не должен выходить за пределы миниатюры.







3. Пользователям должно быть понятно, что изображено на аватарке.







4. По возможности лучше не использовать стоковые изображение, т. к. они часто понижают доверие к компании.




5. Нежелательно, чтобы миниатюра аватара была слишком блеклой и скучной, иначе она будет теряться на фоне более ярких аватарок конкурентов.
6. Если вы хотите, чтобы ваша аватарка выглядела современно, сделайте ее в стиле минимализм: поменьше текста, теней, градиентов и не несущих никакой смысловой нагрузки элементов. Ваша аватарка должна быть максимально простой и аккуратной. Этот стиль сейчас в тренде.







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

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

Аватарка представляет из себя черный круг: большой и маленький. Казалось бы, зачем вообще это делать? Но когда листаешь список сообществ, такие аватарки приковывают к себе внимание, потому что они сильно отличаются от всех остальных.

Какую информацию можно разместить на миниатюре аватара

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

Анонс нового продукта/услуги/события

Преимущества компании/сервиса/страницы

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

Выгодные цены

Бесплатная доставка

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

Акции

Конкурсы

Вакансии

Каким должен быть сам аватар?

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

1. Аватар должен быть качественным. О том, как этого добиться, я писала чуть выше. Для тех, кто пропустил эту часть, скажу вкратце – размер аватара должен быть в 2–3 раза больше того, что вы запланировали.
2. Желательно, чтобы аватар сочетался с меню: был такой же цветовой гаммы, имел те же самые шрифты, элементы и т. д. Благодаря этому шапка вашей страницы будет выглядеть более аккуратно и профессионально. Пример:
3. Сам аватар и миниатюра аватара могут быть разными. Например, вы можете нарисовать на аватаре круг, оформить его так, как вам нравится, выбрать эту область в качестве миниатюры, а остальную часть аватара выполнить в другом стиле.




Еще один вариант – поделить аватар на две части. Одна – для миниатюры, а вторая – для остальной части аватара.




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




5. Старайтесь не размещать на аватаре слишком много информации, иначе он будет смотреться перегруженным и неопрятным. Добавьте на него только самые важные пункты и обязательно убедитесь, что между ними есть «воздух».

Какую информацию можно разместить на аватаре?

По сути, на аватаре можно разместить все, что угодно. В отличие от миниатюры, здесь действительно есть где разгуляться. Главное, не злоупотребляйте этим:)

Домен сайта

Телефон/адрес/время работы

Конкурсы/акции

Самые покупаемые товары/новинки

Информация о доставке

Реклама мобильного приложения

Главные преимущества компании/страницы/товара и т. д.

Обновление ассортимента/новое творчество и т. д.

Информация о том, что ваше сообщество является официальным

Информация о предстоящих мероприятиях

Адреса аккаунтов в других социальных сетях

Расширенное описание страницы

Хвасты

Вообще, на аватаре можно размещать абсолютно любую информацию. Я привела лишь некоторые идеи, чтобы вы могли посмотреть, что делают другие, и вдохновиться их примерами. Ну, и держите в голове основные рекомендации: аватар должен быть качественным, шрифт – крупным, а между элементами побольше «воздуха».

Как создать слитные аватар и меню

Для того чтобы сделать слитные аватар и меню, вам потребуется программа Adobe Photoshop или ее аналог. Я буду объяснять весь процесс на примере «Фотошопа». Итак, поехали.

1. Скачайте шаблон для «Фотошопа», который я специально подготовила для этой статьи. В обычном размере (меню – 510 пикселей в ширину, аватар – 200) или в увеличенном (меню – 1020 пикселей в ширину, аватар – 400).
2. Откройте изображение, которое вы хотите взять в качестве основы.
3. Скопируйте его, вставьте в шаблон и расположите его так, как вы бы хотели его разрезать.

1. Добавьте эффекты, текст, графику и т. д.

1. Если вы не хотите, чтобы терялась часть изображения (в том пробеле, который составляет 50 пикселей), сдвиньте ее вправо так, как показано на следующей гифке:

1. Выберите инструмент «Раскройка» и нажмите на кнопку «Фрагменты по направляющим».

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

1. Зайдите в раздел «Файл» и выберите команду «Сохранить для Web».

1. Перейдите в место, куда вы сохранили картинки (рабочий стол или какая-то конкретная директория), и найдите там папку под названием «Images». Именно там и будут ваши изображения. Теперь остается только залить их на страницу.

P.S. Высоту аватара можно менять по вашему усмотрению. Я взяла максимальный размер – 500 пикселей, но у вас это значение может быть и меньше. Например, как на странице «Вики-разметка»:

Как использовать виджеты

Виджеты тоже являются частью оформления сообщества ВК. С помощью них пользователь может: оформить заказ, подписаться на вашу рассылку, принять участие в конкурсе, читать и оставлять отзывы, открыть поиск по сообществу, получить подарок, купон на скидку и т. д.

Вот несколько примеров того, как выглядят виджеты на странице «ВКонтакте»:

Как оформить изображения к постам

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

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

Где взять хорошие изображения?

У нас в блоге есть хорошая статья на эту тему – « ». Они все бесплатные, но какие-то – требуют регистрации. Если не подберете для себя ничего подходящего, попробуйте искать по ключевому слову + обои (или, если на английском, wallpaper). Обычно по такому запросу выходят качественные изображения. Но тут нужно быть внимательным и проверять тип лицензии, иначе, если у вас серьезный бизнес, можно нарваться на неприятности.

А что делать тем, кто не умеет работать в «Фотошопе»?

Если вы никогда не работали в «Фотошопе» (или любых других графических редакторах) и пока не готовы выделить время на его освоение, вы можете воспользоваться сервисами, в которых уже есть готовые шаблоны картинок для разных социальных сетей:

1. Fotor.com

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

Вставляем ее в шаблон, выделаем левой кнопкой мыши, выбираем команду Layer (иконка бутерброда) и кликаем по Move to bottom. Таким образом наша картинка будет идти фоном, а все надписи наложатся поверх нее.

После этого меняем текст, шрифт, размер шрифта, расположение надписи и т. д.

Затем жмем на иконку в виде дискеты, выбираем название, формат изображения, качество и жмем на кнопку Sign in to download.

2. Canva.com

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

Выбираем свою сферу деятельности. Шаг, на котором вас просят пригласить друзей, пропускаем. Попадаем в основное меню, где выбираем запись в Facebook, если нам нужно прямоугольное фото, или запись в Instagram – если квадратное.

Выбираем шаблон (если на шаблоне стоит отметка «БЕСПЛ.», значит, он бесплатный), меняем текст.

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

Как оформлять статьи в редакторе

С недавнего времени «ВКонтакте» можно верстать статьи в специальном редакторе. Чтобы создать статью, необходимо нажать на букву «Т»:

Как пользоваться вики-разметкой

Ну вот мы и подошли к самому интересному и одновременно сложному разделу. Возможно, среди читателей есть люди, которые не знают, что такое вики-разметка, и вообще впервые слышат этот термин. Поэтому специально для вас я приведу определение, которое дает сам «Контакт».

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

Точно также как у WordPress (или любой другой CMS) есть HTML-редактор, с помощью которого вы создаете статьи, так и у «Контакта» есть свой редактор для создания и редактирования вики-страниц. Выглядит он вот так:

С помощью этого редактора создаются навигационные меню, а также статьи с картинками, видео и аудиозаписями. Чуть ниже я разберу подробно, как работать в данном редакторе, но сначала я прошу вас добавить себе в закладки две ссылки. Они вам очень помогут в изучении вики-разметки.

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

С чего начать?

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

После того, как вы скачали или нарисовали меню, его нужно нарезать. Для чего это нужно? Это необходимо, для создания отдельных ссылок, для того или иного изображения. Так как, если наше меню поставить полностью в группу, то более одной ссылки сделать не получиться, или я чего-то не знаю. Кроме того, наше меню необходимо подогнать по размерам, то есть сразу стоит учесть, что максимальная видимая ширина составляет 388 пикселей (одно изображение), а остальное будет либо обрезаться, либо подгоняться по размерам, которые вы укажите при создании меню в группе, при этом изображение может растянуться или наоборот сжаться, что может испортить первоначальную задумку. Еще стоит учесть, что например, для горизонтального меню нам придется ориентироваться на ширину равную 370 пикселям, иначе меню не выстроится горизонтально.

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

Просто выделите этим инструментов необходимые области, например:

И сохраните, для web-устройств.

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

Переходим на страницу нашей группы. И проделываем некоторые подготовительные действия: В управлении сообществом, подключаем «материалы», сохраняем. Если что-то непонятно на данном этапе, то прочтите статью, про текстовое меню вконтакте , там все подробно, про это сказано.

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

После того, как картинки загружены, мы можем приступить к созданию меню. Для этого, нажимаем на «редактировать», рядом со свежими новостями.

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

[] [] []

Итак, давайте чуть подробнее разберем, что здесь к чему:

… — данные теги выравнивают наше меню по середине. Если их убрать, то меню прижмется к левому краю.

photo-48249652_297601976 — путь до нашей картинки. Путь формируется так: номер альбома_номер самой фотографии. Как узнать путь до нашего изображения? Все очень просто. Заходим в фотоальбом, в котором находятся наши картинки и жмем на нужное изображение. Затем, в адресной строке мы увидим полный путь до нашего изображения.

130x46px;nopadding; — опции изображения: 130x46px; — ширина и высота нашей картинки(может отличаться от размера самой картинки) — для вертикального меню вкоктакте необязательно указывать; nopadding; — никаких пробелов — при использовании данной опции убираются все пробелы (отступы) и изображения сливаются в одно.

Вот что у меня получилось:

Горизонтальное меню вконтакте, делается потому же принципу. Разница только в том, что при написании кода, новые пункты меню не нужно переносить на новую строку. А также, не забываем, что при таком расположении картинок, мы можем использовать только 370 пикселей ширины. Я чуть-чуть поправил код показанный выше и вот, что у меня получилось:

[][][]

А вот так это выглядит:

И еще хотелось бы добавить: Бывают ситуации когда, нам необходимо вставить картинку в меню, но она не должна быть ссылкой. Она должна выполнять роль украшения. Для этого, достаточно использовать опцию «nolink». Вот наглядный пример: То же горизонтальное меню, только первая кнопка не является активной ссылкой, а является простой картинкой.

[][][]

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

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

Удачных экспериментов!

На вопрос «как создать меню для группы ВКонтакте» есть три основных варианта ответа: заказать у специалиста, создать с помощью онлайн-конструктора или повозиться, вникнуть в некоторые тонкости вопроса и сделать все самостоятельно.

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

Итак, вот три пути создания меню:

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

Кстати, для тех, кто предпочитает получать информацию через видеоролики, а не читать длинные тексты, есть видео:

Путь #1. Заказать создание меню у дизайнера-специалиста

Плюсы этого способа — относительная быстрота и минимальное участие с вашей стороны. Минусы — самая высокая цена и шанс получить красивое, но неправильное меню (об основных ошибках при создании меню мы подготовили ). Кроме того, нужно еще найти исполнителя. Тут мы можем рекомендовать искать его на сервисе kwork.ru , в разделе «Дизайн групп в соцсетях».

Путь #2. Использование онлайн-конструктора

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

Путь #3. Сделать все самостоятельно

Плюсы этого пути очевидны: он бесплатен, а вы преобретаете новые умения. Минусы такие: вам необходимы некоторые умения и довольно много времени (в первый раз). Вот, что вам необходимо:

• Уметь уверенно пользоваться графическим редактором. Например, PhotoShop. При изготовлении меню вам нужно будет сначала сделать изображение правильных размеров (до пикселя, никаких «примерно»!), а затем правильно его нарезать (разбить на фрагменты)
• Уметь вникать в инструкции и читать их внимательно
• Не сдаваться и не отчаиваться, если что-то не получается с первого раза

Если вы считаете, что вам все это по плечу, то давайте приступим.

Шаг #0. Общие сведения о том, как устроены меню групп ВК

Меню для группы делают из wiki-страниц, создание которых поддерживает ВК. Вики-страницы — это специальные страницы, которые можно создавать только в пабликах. От обычных постов они отличаются тем, что в них можно применять так называемую wiki-разметку. Эта разметка — специальный код, который преобразовывается в объекты дополнительного форматирования. Чтобы было понятнее, поясним. Например, в обычных постах вы можете использовать только простой текст, а вики-разметка позволяет выделять части текста жирным или курсивом. То есть, она вводит дополнительные возможности оформления. В частности — возможность размещать изображения, при нажатии на которые пользователь будет перенаправлен по ссылке. Именно эти дополнительные возможности форматирования и используются для того, чтобы делать меню пабликов ВК. Как именно это делать мы расскажем ниже.

Шаг #1. Подготовительный этап

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

Итак, вы создали новую группу. Давайте теперь узнаем идентификатор (ID) вашей группы. ID группы — это ее уникальный номер ВКонтакте. Зайдите в свою группу и нажмите на «Записи сообщества» (если записей в группе нет, то вместо «Записей сообщества» будет «Нет записей»). В Вы перейдете на новую страницу с адресом такого вида:

https://vk.com/wall-XXX ?own=1

Вместо XXX у вас будет набор цифр (и только цифр!). Это и есть ID вашего сообщества. Например в нашей тестовой группе это 154457305.

Теперь давайте создадим в группе новую вики-страницу. Для этого составим ссылку такого вида:

http://vk.com/pages?oid=-ID_группы &p=Нaзвание_страницы

http://vk.com/pages?oid=-154457305 &p=Меню

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

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

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

http://vk.com/page- ID_группы _XXX ?act=edit&section=edit

Часть адреса до знака «?» — это адрес вашей вики-страницы. Запишите его где-нибудь: в ВК нет возможности посмотреть список ваших вики-страниц и ссылок на них. Чтобы перейти на нужную, вам необходимо знать ее адрес или снова воспользоваться ссылкой создания вики-страницы. При использовании последнего способа имейте в виду, что страницы, если они уже существуют, не пересоздаются.

Шаг #2. Делаем простое меню для группы ВКонтакте

Итак, у нас есть созданная вики-страница «Меню». Перейдите в режим разметки редактора и добавьте следующий код:

Нажмите на кнопку «Предпросмотр», которая находится снизу редактора. Вы должны увидеть список из трех ссылок. Первые две — внешние и ведут на главные страницы «Яндекса» и Google соответственно. Третья ссылка — внутренняя. Она ведет на паблик ВК с ID «1» (это официальная группа ВК для разработчиков). Если у вас в предпросмотре отображается вас код, а не ссылки (на которые можно нажимать) — значит вы ввели код в режиме визуального редактирования , а не в режиме разметки. Будьте внимательны!

Обратите внимание, что внешние ссылки в вики-коде ВК оформляются одинарными скобками, а внутренние — двойными. При этом внутренние ссылки ВК указываются не как привычный адрес веб-сайта, а как указатель на тот или иной объект ВК. Например, указатель на группу имеет такую форму записи:

clubID_группы

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

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

А сейчас давайте разберемся как и где можно использовать вики-страницы.

Шаг #3. Где можно размещать вики-страницы ВКонтакте

Основных мест два: вы можете создать пост со ссылкой на вики-страницу или разместить ее в разделе «Материалы» вашего сообщества.

Начнем с первого варианта. Начните добавлять новую запись на стене своей группы. Сначала прикрепите к ней любую фотографию. Лучше взять достаточно большую фотографию у которой ширина больше высоты. Затем вставьте в текст создаваемой записи ссылку на созданную вами вики-страницу с простейшим меню. Именно ее мы просили вас записать чуть раньше. Напомним, что ссылка имеет такой вид (у вас будут другие цифры ):

http://vk.com/page-121237693_72827423

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

Нажмите на фотографию в закрепленном посте: должна появится ваша вики-страница с простейшим меню группы.

Итак, мы узнали, что вики-страницы можно прикреплять к постам. В частности — к закрепленному посту. Второе место, где можно использовать вики-разметку это раздел «Материалы».

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

Перейдите в этот новый пункт. Нажмите на плашку «Редактировать». В результате вы окажитесь в уже знакомом вам редакторе вики-страницы. Единственное отличие — тут есть поле ввода названия страницы. Поменяйте его со «Свежих новостей» на «Меню2». В режиме редактирования разметки введите следующий код:

«»»Вариант меню для раздела «Материалы»»»»

[]

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

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

Мы узнали, что меню можно размещать в двух местах. Предпочтительнее сделать его и в виде закрепленной записи и в разделе «Материалы». Помните о двух нюансах:

• Закрепленную запись увидят 98% ваших посетителей, а в раздел материалы попадут только 25-40% самых любопытных, а также преданные старые пользователи вашей группы, которые знают, что там находится что-то полезное.
• Закрепленную запись с картинкой для вызова меню можно дополнить текстом. Таким образом вы не потеряете эту возможность закрепленной записи. Но переусердствовать тоже не стоит: чем больше текста, тем ниже будет ссылка на открытие вашего меню.

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

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

Шаг #4. Как сделать меню в группе ВКонтакте. Графическое

Итак, основные принципы освоены. Перейдем к конструированию графического меню. Сразу оговоримся, что делать мы будем довольное простое меню: вертикальный ряд кнопок со ссылками. Но не спешите говорить «нет, я хотел суперсложное меню» и закрывать этот гайд. Сейчас объясним, почему.

Во-первых, движение от простого к сложному — обычно самый эффективный путь освоения новых знаний. Научившись делать относительно простое меню вы научитесь 90% приемов создания меню для групп ВК.

А во-вторых, как мы уже говорили, вики-разметка ВК внедрялась во времена, когда про мобильные приложения мало кто вообще слышал. Наше условно «простое» меню будет работать максимально правильно и эффективно везде: в браузерной версии ВК, в мобильных браузерах и, наконец, в приложении. Многие «сложные» меню не могут этим похвастаться. Более того, в большинстве случаев «простое» меню будет работать лучше «сложного», которое «разваливается» при его просмотре в официальном приложении ВКонтакте. Чаще всего лучше остановится именно на таком варианте меню. Да, существуют довольно витиеватые реализации меню. Вы можете поэкспериментировать и с ними. Но наш опыт говорит, что реальной пользы — конверсий, покупок и репутации они практически не добавят. А проблем — вполне могут.

Наше тестовое меню будет выглядеть так:

Всего две кнопки. Первая будет вести на главную страницу «Яндекса», а вторая — на группу ВК «Команда ВКонтакте».

Вертикальное графическое меню в ВК — это разрезанное на полосы изображение. Эти полосы помещают с помощью разметки друг под другом на вики-странице. Некоторым из этих «полос» назначают ссылки. При нажатии на такое изображение-ссылку происходит, собственно, переход по этой ссылке. Одна полоса — это одна ссылка. Некоторым полосам (например, промежуточным, которые располагаются между пунктами) наоборот, назначается отсутствие ссылки. Такие полосы становятся «некликабельны».

Изготовление вертикального графического меню для группы ВК сводится к следующей последовательности действий:

• Первым делом нужно нарисовать меню. Шириной оно должно быть строго 600px (пикселей). По высоте рекомендуем делать меню не более 900px. Результат лучше всего сохранять в формате PNG, в крайнем случае -JPG. Воспользуйтесь знакомыми и удобными вам инструментами для рисования (например Photoshop или GIMP). Результат тут на 95% зависит от ваших творческих и технических умений. Даже если вы совсем не умеете пользоваться графическими редакторами — не отчаивайтесь. Умения, которых будет достаточно приобретаются за максимум пару часов. В интернете есть огромное количество справочной и обучающей информации. Кроме того, умение хотя бы немного пользоваться графическим редактором очень и очень полезно для администраторов пабликов. Вы не потратите время зря.
• Далее рисунок с меню нарезается на горизонтальные полосы. Делать это можно любым удобным для вас способом: от привычного многим Photoshop до различных онлайн-сервисов. Если у вас нет идей, как это делается — просто задайте вопрос любимому поисковику. Мы не будем подробно описывать техническую часть процесса нарезания: способов десятки, некоторые подходят одним пользователям, но не подходят другим. При нарезке необходимо соблюдать одно простое правило: высота одной полосы не должна быть менее 60px . Иначе у вас могут возникнуть проблемы с отображением меню в приложении и в мобильных браузерах: появятся т.н. «белые полосы» между изображениями.
• Нарезанные «полосы» загружаются в альбом группы или альбом на странице администратора группы. Мы рекомендуем второй вариант. В любом случае, альбом с нарезанными частями меню должен быть в открытом доступе . Иначе, те пользователи для которых изображения альбома недоступны не увидят ваше меню!
• Составляется код вики-разметки, который вставляется в нужную вики-страницу.
• В группе размещается закрепленный пост с изображением-ссылкой на вики-страницу с меню. О том, как делается такой пост мы подробно писали выше. Кроме того, код (с небольшими изменениями) может быть добавлен в корневую вики-страницу (пункт справа от пункта «Информация», появляется при разрешении раздела «Материалы». Подробнее — см. выше).

А теперь разберемся с загрузкой частей меню и wiki-кодом подробнее. Мы подготовили для вас . В нем два каталога: «1» и «2». В первом содержатся части самого примитивного и простого варианта нарезки для нашего меню — на две части. Скачайте архив, загрузите изображения (1.png и 2.png) из каталога «1» в новый альбом (у себя на странице или в группе).

У нас две «полосы»: верхняя (с кнопкой «Яндекс») и нижняя (с кнопкой «Команда ВК»). Обе будут изображениями-ссылками. В вики-разметке это делается кодом такого вида:

«ССЫЛКА» — это целевая ссылка. Например, https://yandex.ru/. Кроме обычной внешней ссылки это может быть указание на объект ВКонтакте: пост, страницу пользователя или группу. Например, чтобы после нажатия кнопки происходил переход на сообщество «Команда ВКонтакте» можно указать как его адрес (https://vk.com/team), так и указатель на него (club22822305). В принципе, разницы не будет. Внешние ссылки (те, которые ведут не на ресурсы ВК) мы рекомендуем сокращать с помощью

Учитывая, что это меню не в группе, а на странице (паблике) вконтакте, я решила показать вам как все это делается! Давно меня уже дергали вопросами: как сделать меню в паблике, как сделать так, что бы меню было открытым, как сделать закреп и т.д.. Вот вам и инструкция!

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

Меню в паблике? Проще простого!

Пересмотрите еще раз статьи: и , сейчас нам пригодятся эти знания!

3 шага к красивому меню паблика!

Вероятно вы уже догадались, что основу такого меню составляет… закрепленный пост с внутренней страницей! Лично мне этот способ очень нравится, даже в группе моего блога я отказалась от встраивания и использую именно «меню в закрепе». И сейчас я дам вам четкую инструкцию «как это сделать»!

Шаг №1: Создаем внутреннюю страницу меню

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

Вариант 1: (обычный)

http://vk.com/pages?oid=- XXX &p=Нaзвание_страницы

где XXX — ID Вашей публичной страницы,

а «Название_страницы» — любое слово, которым будет названа страница

Вариант 2: (облегченный, но )

Итак, мы создаем вики-страничку и заполняем её точно так же, как если бы мы заполняли меню для группы. То есть прописываем там все изображения и переходы. У нас должно получиться примерно следующее:

Это вики-код меню

Внимание! Если вы еще не умеете создавать визуальные менюшки в контакте, то повторюсь, статью! Если все ок. то у вас получится подобная картинка:

А это готовая страничка меню

Шаг №2: Создаем пост на стене

Теперь мы должны добавить наше меню на стену сообщества вконтакте. Для этого копируем ссылку на внутреннюю страницу и добавляем её в пост, вот так:

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

Итак, теперь мы должны удалить ссылку из «тела» поста (прикрепившаяся страница останется), и добавить к посту изображение , которое будут видеть подписчики. Фишка в том, что если в одной записи присутствуют ссылка и изображение, то при нажатии на картинку будет совершаться переход по ссылке ! Все гениальное просто!
Картинка может частично или полностью повторять само меню, здесь уже вам решать. Если будете заказывать меню для паблика, то вам нужен еще и банер, т.е. картинку, которая будет висеть в закрепе. Вот что мы получим при публикации поста:

Картинка повторяет меню и привлекает внимание посетителей страницы

Шаг №3: Закрепляем пост

Наконец-то у нас все готово и пост висит с картинкой и ссылкой на стене! Теперь нам нужно перенести его в шапку группы, закрепить пост на главной, сделать закреп… Для этого щелкаем на дату/время поста (под каждым постом есть дата публикации), мы попадаем на внутреннюю страницу поста, листаем его вниз и ищем там кнопку «закрепить». Смотрите на картинке, что вам нужно найти:

Нажимаем на эту кнопку и обновляем страницу. Вуаля, все готово! Наслаждаемся красивым меню!

vk.com/frilkacom

Можно даже подобрать такую картинку, которая стала бы продолжением вашего аватара — такое оформление смотрится очень симпатично.

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

У меня на это все! Делитесь статьей с друзьями, добавляйте в избранное и следите за обновлениями блога, чтобы не пропустить новые интересные статьи!

Социальные сети давно вошли в жизнь большинства людей и являются важной составляющей в ней. Многие люди даже умудряются создавать свои виртуальные бизнесы в них: накрутка лайков, подписчиков, продажа товаров как из других стран, так и авторских. Почти все они имеют группу. А как пользователям донести быстрее всего, чем занимается человек или даже целая организация? Создать специальное меню, в котором будет содержаться самая необходимая информация. И именно здесь нам понадобится Wiki-разметка. Как сделать меню группы ВК? Что добавить в неё? В статье будут рассмотрены правила создания и примеры.

Чем является Wiki-разметка?

Как сделать меню группы ВК? Вики-разметка — вот хороший помощник! Это очень эффективный и удобный способ оформления группы в социальной сети «ВКонтакте». Эта разметка по принципу своего действия очень напоминает html код. Но для людей, не связанных с программированием, она будет более понятной благодаря простоте реализации. Своё название вики-разметка получила благодаря «Википедии», где многие пользователи впервые смогли ознакомиться с основными особенностями её функционирования. Вики-разметка позволяет людям без знаний в программировании быстро и легко оформлять внешний вид группы:

1. Создавать графические спойлеры и таблицы.
2. Форматировать текст и изображения.
3. Работать с якорями и ссылками.

Как сделать меню группе ВК? Рекомендации бывают так нужны, но в целом, можно разобраться и с помощью хорошего руководства. Если говорить о html, то для его изучения и работы с ним необходимо было посидеть несколько суток или даже неделю. Вики-разметка при хорошей памяти требует только совсем немного времени. Как же её можно создать? Какие есть подходы? Вот мы будет говорить о технологии, а кто её сделал? Мы разберемся, как сделать меню группе ВК. Уорд Каннингем же впервые ввёл понятие «вики» (в переводе с гавайского значит «быстрый»).

Способы создания вики-разметок

Нужно задать себе не только вопрос: «Как сделать меню в группе в ВК», но и уточнить, как это реализовать. Можно выбрать несколько путей. Каждый из них зависит от направленности и цели группы. Итак, что может быть:

1. Если группа имеет социальное направления, то можно создать текстовое меню. Преимущества ему отдают благодаря более серьезному внешнему виду.
2. Группам коммерческого и развлекательного характера желательно сделать ставку на графическое меню. Использование в нём изображений позволит обратить внимание пользователей на то, что должно быть на виду. Применение такого подхода позволит вам также сделать пребывание в группе более приятным и расслабляющим.

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

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

Как сделать меню в группе в ВК, которое было бы красивым? В социальной сети «ВКонтакте» вставить фотографию или картинку при помощи вики-разметки предоставляется возможным только в тех случаях, когда они загружены в фотоальбомы сайта. Итак, заходим в него, выбираем нужную фотографию и копируем её адрес. К примеру, пускай он будет такой: photo12345_67890. Теперь необходимо его взять в двойные Должен получиться такой результат: []. А что, если к фотографии или картинке следует прикрепить текст или ссылку? А может, есть желание немного отредактировать внешний вид? Тогда с этим поможет следующее: необходимо, чтобы у файла был такой вид — [[ photo12345_67890|options|text/link]]. Вместо трех последних слов подставляется то, что надо. Text — пишем то, что нужно. Думается, особенных объяснений не надо. Link переводится с английского как «ссылка». Указывается для того, чтобы машина пользователя знала, куда ей необходимо идти. Options — здесь могут устанавливаться такие значения:

1. Plain — ссылка на изображение оформлена как текст, в ней отсутствует картинка.
2. Noborder — убирается рамка около фотографии.
3. Box — изображение открывается в окне.
4. Nolink — ссылка на фотографию убирается.
5. Nopadding — пробелы между изображениями не отображаются.
6. NNNxYYYpx или NNNpx — указывают, какой размер будет иметь картинка в пикселях. Первый вариант предусматривает ширину и высоту. При желании можно «сжать» картинку. И второй вариант предусматривает редактирования ширины.

Как создавать таблицы с использованием вики-разметки?

Обычно и графическому, и текстовому меню необходим элемент, который позволяет представить данные в удобном виде, а именно таблицы. Без них мало какая группа в «ВКонтакте» обходится. Чтобы создать таблицу в вики-разметке, необходимо использовать определённый набор символов. Предлагаем ознакомиться, за какой функционал они отвечают:

1. {| — так обозначается начало таблицы. Обойтись без него при создании данного элемента невозможно, он является обязательным атрибутом.
2. | — используется, чтобы давать ячейкам эффект прозрачности.
3. |+ — с помощью этого набора символов располагают название таблицы по центру. Это не обязательный атрибут, но он должен быть размещен сразу после знаков, что обозначают начало.
4. |- — так обозначают новые строки (в том числе и для ячеек).
5. ! — даёт тёмный цвет. При эго отсутствии необходимо использовать знак из пункта №2.
6. |} — набор символов, которые обозначает конец таблицы. Он является необязательным атрибутом. Но использовать его всё же рекомендуется, чтобы предотвратить возникновение ошибки.

Как же проводится заполнение ячейки? Все данные, которые должны быть внесены в них, помещают после знаков |. При желании отделить ячейки одну от другой необходимо просто продублировать его таким образом: ||. Всё рассказанное до этого момента может выглядеть не слишком понятно, но это сейчас будет исправлено с помощью примера.

Создание меню группы в социальной сети «ВКонтакте» с помощью вики-разметки: пример реализации

Здесь будут использованы опции noborder и nolink. Они уберут рамку картинки и ссылку. Также у изображений будет изменён размер, а вторая строка ячеек таблицы будет иметь тёмную заливку, благодаря использованию атрибута!. А вот и сам пример:

{|
|-
|

”’Новое в науке”’||
|-
![]!!
|-
|
[[Новости науки|Новости]]

[[Открытия]]

|

[[Конференции]]

[[Разработки]]

[[Книги]]

[[Симпозиумы]]

|

Разделы:

[[Медицина|1]] | [[Физика|2]] | [[Математика|3]] | [[Экономика|4]]

[[Химия|5]] | [[Биология|6]] | [[Программирование|7]] | [[Электротехника|8]]

|-
|}

Как видите, ответ на вопрос: «Как сделать меню в группе в ВК?» весьма лёгок.

Важность Wiki-разметки при продвижении своего проекта

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

Заключение

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

Как сделать графическое меню в группе вк. Как сделать красивое меню для группы вконтакте. Создание меню группы в социальной сети «ВКонтакте» с помощью вики-разметки: пример реализации

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

Первые секунды пребывания формируют дальнейшие действия гостя. Именно поэтому интерфейс играет большую роль.

Факторы оставляющие гостя:

• аватарка;
• описание;
• название;
• красивое и практичное меню;
• красочность;
• контент.

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

Каким должно быть меню

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

Три основные цели групп:

1. продажи;
2. увеличение трафика;
3. увеличение активных посестителей.

Для продаж навигация в группе заменяет витрину в магазине.

Здесь должны быть самые важные кнопки:

1. каталог;
2. стоимость;
3. доставка;
4. акционные предложения;
5. отзывы.

Для увеличения посещаемости акцент делается на контент и изюминку сайта или блога.

Приблизительный вариант набора кнопок:

• интересные статьи;
• полезная информация;
• подписаться;
• отзывы.

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

Предлагаем такие кнопки:

• подписаться на новости;
• задать интересный тематический вопрос;
• акции;
• опросник;
• голосование.

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

Создаем по этапам

Создание навигации – процесс интересный, сложный и длительный. Но результат того стоит .

Весь процесс условно делиться на 2 этапа:

• работа с фотошопом;
• техническое добавление.

видео: меню для паблика

Работаем с фотошопом

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

Алгоритм действий:

• установите и запустите программу «Фотошоп»;

• в пункте «Файл» выберете «Создать»;
• в появившемся окне задайте:



Делается это с помощью инструмента «Прямоугольная область»:




Работа с графикой:

Приблизительно должно получиться вот так:

Сохраните прямоугольник, расположенный справа отдельной картинкой, задав размер 200х500 пикс. Это готовая аватарка, загружается через кнопку «Загрузить фотографию» в группе вк.

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

Для начала следует сделать разметку:




Создаем фрагменты:




Сохранение изображений:

Как очистить компьютер от ненужных программ? Инструкция тут.

Техническая часть

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

Важно! Заливка меню отличается от обычно загрузки фото или картинок.

Все по порядку:

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

1. найдите необходимую запись;
2. кликните по ней левой кнопкой мыши;
3. скопируйте URL в адресной строке.

• зайдите на источник, куда нужно переправлять посетителя;
• скопируйте необходимый адрес.

Сохраните изменения соответствующей кнопкой внизу окна.

Внимание! Изменения могут не сразу отобразиться. Рекомендуется выйти на свой основной профиль, а затем снова зайти в группу.

Как создать меню в группе Вконтакте вики разметка

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

Данный инструмент позволяет создавать:

• эффекты;
• необычные меню;
• таблички;
• элементы навигации;
• форматировать текст.

Словом, данная разметка позволяет создать мини сайт ВКонтакте. Это очень удобно, особенно для продаж и набора подписчиков.

Такое оформление интуитивно заставляет посетителя остаться, кликнуть по кнопке. То есть задерживает и стимулирует к действию – а это как раз то, что и нужно.

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

Видео: меню с поиском по рубрикам

Нюансы создания

Собственно, то, что было сделано выше (разделение и загрузка картинки) это уже элементы разметки. В этом и преимущество данного инструмента. Автоматическое превращение в теги, при простой загрузке картинок.

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

Вот так: []

Основные теги представлены в таблице ниже:

Работа с картинками

[] .

Где options заменяется на:

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

Создание таблицы

Независимо от того, какое меню (текстовое или графическое) вы создаете, без вставки таблицы вы вряд ли обойдетесь. Иначе можно просто вставить текст в поле новости и не форматировать его, затратив так много времени.

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

Привет, мои дорогие!

Сегодня я подробно расскажу, как сделать меню для группы вконтакте . По моему опыту меню в группе в контакте увеличивает количество звонков и заявок на 20%. Важно ответственно подойти к вопросу создания меню группы. Поэтому я подготовил для вас шаблон PSD меню, чтобы облегчить вам работу.

Начну с того, что на сегодняшний день существует два варианта меню:

Вариант 1: Закрытое меню группы

Закрытое меню, открывается при нажатии на ссылку. В примере ниже меню открывается при нажатии на ссылку «ОТКРОЙТЕ МЕНЮ ГРУППЫ!».

Вариант 2: Открытое меню группы (закрепленный пост)

Открытое меню, по сути это закрепленный пост с активной ссылкой.

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

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

Как сделать открытое меню вконтакте

Процесс создания меню будем разбирать на примере Варианта 2, т.е. открытое меню.

Чтобы вам было проще ориентироваться, я подготовил для вас PSD шаблон меню : [Внимание. Дизайн ВКонтакте изменился. Новый макет и другая актуальная информация в ]

Шаблон меню группы PSD

Для создания внешнего меню требуется 2 картинки: аватар (справа) и центральная (картинка-действие).

Размеры аватара: 200 x 332 px

Размеры центральной картинки: 395 x 282 px

Шаг 1.

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

Шаг 2.

Зайдите в вашей группе в «Управление сообществом» (справа под аватаром). Найдите пункт «Материалы» (на вкладке «Информация») и сделайте их «Ограниченные».

Шаг 3.

Теперь вернитесь на главную страницу своей группы и нажмите «Редактировать» в появившемся блоке «Материалы» (Я уже переименовал в Меню группы).

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

Шаг 4.

В моем примере https://vk.com/page-42211349_47355854,

Первые цифры 42211349 — это id вашей группы

Вторые цифры 47355854 – это id страницы

Фишка: создавать дополнительные страницы можно вручную. Для этого перейдите по ссылке вида:


https://vk.com/pages?oid=-хххххххх&p=pagename
где,
хххххххх – это id вашей группы
pagename – название вашей страницы

Шаг 5.

И опубликуйте запись.

Шаг 6.

Теперь загрузите аватар группы (картинка справа). На стене появится дубликат картинки аватара – удалите его.

Шаг 7.

Теперь внимание. Нажимаем на ВРЕМЯ ПУБЛИКАЦИИ ЗАПИСИ (левый нижний угол поста).

И нажимаем «Закрепить». Закрываем это окно и обновляем страницу вашей группы (F5).

Шаг 8.

Пишем статус группы (используйте только 1 строчку), чтобы выровнять картинки, если рисунок на аватарке у вас начинается не с самого верха (в моем шаблоне аватарка вариант 2). И вот что у нас получилось:

ИТОГ.

Меню готово! Теперь при нажатии на центральную картинку открывается ваше меню:

Здесь его можно редактировать, размешать фото, видео, создавать новые разделы, размещать ссылки.

Внутри основного меню тоже можно сделать графическое меню (подменю). Его ширина не должна превышать 600 px. В высоту размер неограничен. Что позволяет создавать отличные лендинги вконтакте.

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

Свои вопросы или мнения пишите в комментариях ниже.

Как сделать меню группы вконтакте полезным

Как создать меню группы вконтакте: технический этап

Итак, с назначением меню группы разобрались, приступим к технической части . Переходим в настройки: Управление сообществом>Материалы>Подключить:

Сохраняем изменения и переходим в группу. Под описанием группы появится закладка «Свежие новости», приступим к её редактированию:

Переключаемся на закладку «Редактирование» (1), заменим название меню (2), введем свою информацию (3), сохраним её и вернемся к странице (4).

С 2011 года редактирование меню групп вконтакте стал намного легче, админы ВК добавили визуальный редактор, поэтому разобраться стало еще проще. Оговорюсь, что серверы ВК могут работать не так слажено, как хотелось, или при работе с кодом вы можете что-то забыть, поэтому сохраняйте исходный код в текстовые файлы на ПК. Для этого перейдите в «Исходный код» и скопируйте код результата.

Если что-то пропало или вы хотите вернуться на несколько шагов назад, переходите в закладку «История» и возвращайтесь к нужному сохранению:

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

Как видите, я подготовила информацию в вордовском документе, сделала редактирование текста (выделения), добавила ссылки и просто вставила этот текст в «Редактирование» меню групп вконтакте.

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

Если перейдете в меню моей группы вконтатке, то увидите, что одни ссылки ведут на внутренние страницы (2), другие на внешние (1):

Добавлю в реальном времени, еще одну внутреннюю страницу:

Вот и появилась у нас новая (внутренняя) страница в нашей группе вконтакте. Теперь нам нужно её заполнить:

1. Жмем кнопочку «Наполнить содержанием».
2. Заполняем группу контентом. Редактируем его.
3. Настраиваем «Доступ к странице». Если отметить «просматривать страницу могут только участники группы», то это будет мотивировать посетителей вступить в группу. Сохраняем страницу.
4. Копируем нужные циферки в адресной строке страницы, которую только что сохранили. Для этого перейдите в режим «Просмотр» и скопируйте ID страницы – это и будут те циферки, которые нам нужны.
5. Возвращаемся на страницу «Исходный код» меню группы вконтакте (рекомендую не закрывать его, пока создаете новую страницу… хотя она итак должна была бы быть у вас открыта) и вставляем цифры в правильную строчку. Между текстом ссылки (Марина Лазарева (видео)) и самой ссылкой (43820829), устанавливаем значок «|» (он находится на английской раскладке клавиатуры, сочетание клавиш Shift+\).
оформление группы вконтакте , которое не требует дополнительных знаний редакторов типа фотошоп. В следующих статьях, я буду показывать, как создавать более красивые группы вконтакте. Сейчас же, для тех, кому не терпится создать красивое оформление группы вконтакте , рекомендую просмотреть это видео:

Это то видео, после просмотра которого я поняла, как сделать меню группы вконтакте самостоятельно. Автор на реальном примере показывает, как создать меню группы вконтакте.

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

Dropbox, читайте об этом на страницах DragonBlog.

С Уважением и Любовью, !

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

Вот несколько примеров, чтобы все понимали, о чем речь.

Такие группы позволяют выделиться среди своих конкурентов и привлекать больше пользователей. Особенно, если еще и контент интересный:)
В рамках данной статьи мы поговорим о том, как это всё делается. Чтобы более подробно всё разобрать и вникнуть во все тонкости, возьмем конкретный пример. Будет небольшой мастер-класс по оформлению групп.

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

Объясняю на пальцах. Паблик — это что-то сравни блогу. Лента новостей. Иными словами, мы рассказываем своим подписчикам о каких-то вещах и они не смогут писать на стене нашего сообщества. Максимум — комментировать.

Группа позволяет создать более открытое к беседе и обсуждениям сообщество, где люди смогут от своего имени делать посты в ленте. В неё также можно добавлять друзей из своего списка. В паблике такой возможности нет. Кроме того, в группе немного больше возможностей по интегрированию вики-разметки (здесь есть раздел «Новости», в который можно интегрировать меню).

Глобально можно рассуждать так: если нам нужно создать сообщество для магазина, то я бы взял формат «паблик». Если же речь идет, например, о любителях рыбалки, то лучше взять «группу». Хотя, каждый волен поступать так, как считает нужным. Ведь в любой момент формат можно будет изменить. Однако, имейте в виду, что Вконтакте вводит ограничение на повторное изменение формата сообщества и после первого раза нужно будет ждать несколько дней до того момента, как вы сможете всё вернуть назад при необходимости. Поэтому тестировать функционал лучше до того, как группа начнет наполняться контентом.

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

Формат будет «Группа», так как нужно создать естественный приток аудитории и максимально расширить общение внутри сообщества. Сразу уточню, что буду использовать универсальную методику, которую можно применять как в формате группы, так и в паблике. Это работает везде.

Контента море, начинаем воплощать идею в жизнь!

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

Чтобы создать группу, переходим в «Мои группы» в правом меню аккаунта Вконтакте и нажимаем на синюю кнопку вверху «Создать сообщество».

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

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

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

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

Всё. Группа создана!

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

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

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

Шаблон разметки

Что представляет из себя шаблон и что это вообще такое? Шаблон — это своего рода заготовка. В данном случае, в *.psd формате у нас размечены области для картинки под меню и аватарки группы.

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

Чтобы стало понятнее, вот пример.

Мы видим, что на обеих частях картинки есть полоса с видом на жилой район. Без использования шаблона ровно сделать с первого раза практически нереально. Нужно будет подгонять картинки, вымеряя расхождения вплоть до 1px. В то время как при использовании шаблона мы просто добавляем в него графику в рамках разметки и сразу же получаем желаемый результат.

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

Мы же тем временем приступаем непосредственно к графическому оформлению своей новой группы. Здесь я выбираю путь наименьшего сопротивления и для поиска частей дизайна отправляюсь в Google Картинки. Можно использовать и Яндекс. Кому что больше нравится.

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

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

Первый этап работы с графикой завершен. Возвращаемся в контакт.

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

Щелкаем мышкой на двух типов на месте авы нашей группы и загружаем туда наше изображение. Вот эти ребята, под ними еще написано «Загрузить фотографию».

Добавляем картинку. Указываем поля и выбираем миниатюру. Здесь всё просто и проблем быть не должно.

Как мы видим, нужно знать id сообщества. Узнать его очень просто. Находим в своей группе меню (сразу под аватаркой) и открываем «Статистику сообщества». При этом в адресной строке браузера появится что-то похожее (цифры будут другие).

Эти цифры после «?gid=» и есть искомое id группы. Вставляем полученное значение в форму скрипта и пишем название для той страницы, которую хотим создать. В данном случае, я вбиваю «Меню».

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

Если всё сделано правильно, откроется вот такая страница.

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

Я у себя написал «Меню» и моя страница после сохранения стала выглядеть следующим образом.

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

Здесь создаем пост следующего содержания: вставляем туда картинку и ссылку на страницу меню для группы.

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

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

Теперь займемся оформлением непосредственно самой менюшки. Снова идем в фотошоп и создаем дизайн для нашего меню. При проектировании интерфейса нужно помнить о тех людях, которые будут заходить в вк через приложение с мобильных телефонов. Иными словами, у нас не должно быть мелких элементов и кроме того нужно постараться сделать всё как можно понятнее. Чтобы не нужно было гадать, как здесь всё устроено и куда нам нажать… а просто ткнуть в нужный пункт и изучать искомую информацию.

Не буду сейчас останавливаться подробно на том, как именно я собирал меню. Вот, что у меня получилось.

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

Разрезаем изображение на фрагменты и сохраняем их.

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

Для этого возвращаемся на главную страницу группы (там, где лента и наша ссылка-картинка, ведущая в меню). Щелкаем мышкой на изображение меню и попадаем на ту самую страничку, которую ранее создали для менюшки.

Если вы администратор или создатель группы (в нашем случае это так и есть), то в верху страницы будет ссылка «Редактировать». Щелкаем по ней.

Затем переходим в режим wiki-разметки (под кнопкой закрыть в верхнем правом углу странички нарисована такая рамочка с внутри). Когда нужный режим активирован, данная кнопка обведена серым.

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

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

и к уже вложенному параметру «noborder» дописываю второй параметр «nopadding». Первый отключает обводку фрагментов и границы у ячеек таблиц. Второй убирает отступы от края.

Первый и последний элементы меню не должны быть кнопками — у меня на рисунке это всего лишь графический элемент без ссылки на внутреннюю страницу, поэтому к ним прописываем дополнительно параметр «nolink». Это уберет возможность щелкнув по данному элементу открыть в отдельном окне кусочек картинки. От щелчка мышки теперь вообще ничего не произойдет. Это обычный фон страницы. Неактивный.

В моем случае код меню выглядит следующим образом.

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

Когда мы прописали код и выровняли все элементы, сохраняем страничку и видим тоже самое, что было в фотошопе.

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

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

В итоге код меню принимает следующий вид.

Внешне же ничего не изменилось. Зато, когда мы щелкаем мышкой по элементам меню, видно, что теперь оно работает!

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

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

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

Структура сформирована очень четко, практически в несколько кликов пользователь может найти все что нужно: телефоны, адреса, информацию о заказах, каталог товаров и т.д. На мой взгляд, такое оформление помогает увеличить продажи как минимум в 2 раза.

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

А вот пример неудачного решения:

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

В этих примерах мы разобрали варианты оформления интернет магазинов, Вы же можете использовать нечто подобное в других тематиках. Формула проста: четкая структура + графическое оформление = приток клиентов и увеличение продаж.

Теперь давайте посмотрим на все это с технической точки зрения.

Создаем меню для группы Вконтакте

Первым делом создадим графический макет будущей менюшки. Для этой цели мы будем использовать программу Photoshop (для простенькой картинки вполне сгодится стандартный Paint). Откройте программу и создайте новый документ:

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

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

Затем напишите на фоновой картинке заранее продуманные разделы, кнопки и телефоны. Их мы в последующем превратим в ссылки:

Чтобы сделать разрезы как можно точнее, нужно задействовать вспомогательные линии, нажав CTRL+R. Наведите курсор мыши на верхнюю линию и перетяните ее на изображение примерно таким образом:

Последним шагом будет разрез объектов. Чтобы это сделать кликните по кнопке “фрагменты по направляющим” (Slices From Guides) на верхней панели инструментов:

Сохраняем каркас для web устройств. Формат картинки ставим JPG, выбираем максимальное качество и сохраняем, например, на рабочий стол:

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

Вывод меню с помощью Wiki разметки

В своей группе зайдите в “управление сообществом” и проверьте, подключен ли раздел “материалы”. Если раздел выключен, то подключите его:

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

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

Теперь откройте группу в новой вкладке и загрузите в фотоальбом заготовленный каркас, а в текстовый редактор вставьте следующий код, столько раз, на сколько частей разбит каркас:

[ [ photo133337_133701019|370px;nopadding;|page- 13333337 _13333337] ]

Вместо значения “photo133337_133701019” нужно вставить ссылку на фотографию

Вместо значения “page-13333337_13333337” нужно вставить ссылку на нужную страницу или раздел группы

Вместо 370px можно подобрать свои размеры, а параметр nopadding позволяет выводить полноценную картинку, без него наше меню выводилось бы разрезанными кусками.

Нажав на кнопку “Просмотр” можно посмотреть, как меню будет смотреться в группе. Если все устраивает, то жмем “Сохранить результаты” и радуемся проделанной работе.

Как сделать меню в группе ВК

01-04-2019, Каверин Илья

Время чтения: 5 минут

5070

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

В этой статье «Товарищ» расскажет вам о том, как сделать меню в группе «ВКонтакте».

С чего начать?

Первое, что вам нужно сделать, это зайти в настройки вашей группы и выбрать раздел «Материалы». В нем вам необходимо выбрать пункт «Ограниченные» и нажать на кнопку «Сохранить». Готово! Теперь мы можем размещать в группе различные материалы не боясь, что кто-то займется исправлениями без нашего согласия.

Теперь стоит определиться с тем, какое меню «ВКонтакте» мы хотим сделать. Если вы ограничены во времени и не желаете тратить лишние силы, то можете выбрать простой вариант с картинкой и несколькими текстовыми ссылками. Это можно сделать за несколько минут без использования редактора кода.

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

Что делать дальше?

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

Простое меню.

Вариант, который можно без труда собрать в визуальном редакторе, не прибегая к пресловутому «коду». Результат будет выглядеть примерно так:

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

В режиме кода ссылка оформляется одинарными квадратными скобками:

[ссылка|текст или адрес картинки] Пример: [https://tovarishch.su/|Главная страница «Товарища»]

Чтобы сделать буллиты, достаточно перед ссылкой поставить значок * (звездочка/астериск) или воспользоваться соответствующей кнопкой в меню.

Если вы захотите украсить текст картинкой, то нажмите на значок фотографии в меню или пропишите в коде страницы следующую строчку:

[­[адрес фотографии]]. Адрес выглядит следующим образом:

• photoXXX_YYY, если фотография находится в вашем профиле;
• photo-XXX_YYY, если картинка находится в альбоме сообщества.

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

Меню с картинкой и кнопками.

Один из самых популярных вариантов, который встречается даже в сообществах известных брендов. Для того чтобы сделать интерактивное меню в группе «ВКонтакте» своими силами, потребуется Photoshop или аналогичная программа.

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

1. Выберите картинку, которая подойдет вам для меню. Это должно быть изображение высокого качества, портретной ориентации или квадратное. Его размер зависит от количества пунктов в меню. Картинка должна отражать содержание группы.
2. Добавьте изображение в Photoshop, растрируйте, сделайте слоем.
3. Вы можете пойти легким путем и «нарезать» картинку на полоски одинакового размера, которые и станут пунктами вашего меню. Добавьте надписи, и вы готовы к размещению. Переходите сразу к пункту 7.
4. Если вы уверены в своих силах и хотите сделать более профессиональное меню в ВК, то можете нарисовать изображение с кнопками. Для этого вам понадобится удобный фон, который не будет отвлекать внимание пользователя, и несколько кнопок контрастного цвета. Такое меню можно нарисовать с нуля или взять готовое изображение, после чего снова «нарезать» полосками.
5. После того как вы выполнили 3 или 4 пункт, у вас в распоряжении появился набор изображений. Вам необходимо добавить его в вики-страницу. Проще сделать это через режим редактирования кода.
6. Добавляем фоновое изображение. Этот пункт можно пропустить, если вы делаете простое меню из нескольких слитных картинок. Добавить изображение можно одной строчкой кода: <center>[[photoXXX_YYY|Zpx;nopadding;nolink]]</center>.
   
   1. <center></center> — эти теги позволяют разместить изображение в центре страницы. В противном случае оно будет выровнено по левому краю.
   2. [[]] — теги для вставки картинки.
   3. photoXXX_YYY — адрес изображения.
   4. Zpx — размер изображения. Указывается в пикселях.
   5. Nopadding — вставляет картинку без отступов.
   6. Nolink — делает картинку неактивной и некликабельной.
7. Вставляем кнопки. Каждый элемент меню представляет собой полоску, вносить их можно при помощи такого же кода, но с несколькими изменениями: <center>[[photoXXX_YYY|Zpx;nopadding;URL]</center>.
   
   1. Мы убрали параметр nolink, поэтому эта картинка будет кликабельной.
   2. Вместо nolink мы пишем URL-адрес страницы, на которую кнопка ссылается. Это может быть раздел в группе, событие, страница «ВКонтакте» или внешний сайт.
8. Все готово, вам остается только закрепить пост с меню в группе «ВКонтакте».

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

Меню, перетекающее в аватар.

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

1. Выбираем картинку. Вам потребуется изображение высокого разрешения, не менее 760 х 500 пикселей. Стремитесь к тому, чтобы оно не только подходило вам по тематике, но и хорошо смотрелось с текстом.
2. При помощи Photoshop разрезаем картинку на 4 прямоугольника:
   
   1. 200 х 500 — должен находиться справа, это будет аватарка группы.
   2. 50 х 500 — отступ от аватарки, его в меню в ВК видно не будет.
   3. 510 х 182 — должен находиться в правом верхнем углу. Эту область тоже видно не будет.
   4. Последний прямоугольник (в нижнем левом углу) — это часть, на которой будет размещаться меню.
3. После этого вам следует разместить аватар (прямоугольник 1) в группе. Это делается за несколько кликов.
4. Прямоугольник 4 (меню) следует разрезать на несколько полосок и разместить на вики-странице. Процесс аналогичен тому, что мы описали выше для простого меню.

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

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

Как создать меню в группе ВКонтакте

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

Создаем меню для группы VK

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

1. На сайте ВК перейдите на страницу «Группы», переключитесь на вкладку «Управление» и перейдите к нужному паблику.
2. Кликните по значку «…», расположенному под основной картинкой паблика.
3. Перейдите к разделу «Управление сообществом».
4. Через навигационное меню в правой части страницы переключитесь на вкладку «Настройки» и выберите дочерний пункт «Разделы».
5. Найти пункт «Материалы» и переведите их в статус «Ограниченные».

Можете сделать «Открытые», но в этом случае меню будет доступно для редактирования обычными участниками.

6. Нажмите кнопку «Сохранить» внизу страницы.
7. Вернитесь на главную страницу сообщества и переключитесь на вкладку «Свежие новости», расположенную под названием и статусом группы.
8. Нажмите кнопку «Редактировать».
9. В правом верхнем углу открывшегося окна кликните по иконке «<>» со всплывающей подсказкой «Режим wiki-разметки».

Переключение в указанный режим позволяет использовать более стабильную версию редактора.

10. Измените стандартное наименование раздела «Свежие новости» на подходящее.

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

Текстовое меню

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

1. В основное текстовое поле под панелью инструментов введите список разделов, которые должны входить в перечень ссылок вашего меню.
2. Каждый перечисленный пункт заключите в открывающие и закрывающие квадратные скобки «[]».
3. В начале всех пунктов меню добавьте по одному символу звездочки «*».
4. Перед наименованием каждого пункта внутри квадратных скобок поставьте одиночную вертикальную черту «|».
5. Между открывающей квадратной скобкой и вертикальной чертой вставьте прямую ссылку на страницу, куда будет попадать пользователь.

Возможно использовать как внутренние ссылки домена VK.com, так и внешние.

6. Внизу данного окна нажмите кнопку «Сохранить страницу».
7. Над строкой с наименованием раздела перейдите на вкладку «Просмотр».

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

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

Графическое меню

Обратите внимание, что при выполнении инструкции в рамках этого раздела статьи вам потребуются хотя бы базовые навыки владения программой Photoshop или любым другим графическим редактором. Если вы таковыми не обладаете, вам придется учиться по ходу выполнения действий.

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

1. Запустите программу Photoshop, откройте меню «Файл» и выберите пункт «Создать».
2. Укажите разрешение для будущего меню и нажмите кнопку «Создать».

Ширина: 610 пикселей
Высота: 450 пикселей
Разрешение: 100 пикселей/дюйм

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

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

Не забывайте использовать зажатую клавишу «Shift», чтобы равномерно масштабировать изображение.

4. Кликните правой клавишей мыши по основном фону вашего документа и выберите пункт «Объединить видимые».
5. На панели инструментов активируйте «Прямоугольник».
6. Используя «Прямоугольник», в рабочей области создайте свою первую кнопку, акцентируя внимание на ровные размеры.

Для удобства рекомендуется включить «Вспомогательные элементы» через меню «Просмотр».

7. Придайте своей кнопке такой внешний вид, какой вы хотели бы видеть, используя все известные вам возможности программы Photoshop.
8. Клонируйте созданную кнопку, зажав клавишу «alt» и перетаскивая изображение в рамках рабочей области.

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

9. Переключитесь на инструмент «Текст», кликнув по соответствующему значку на панели инструментов или нажав клавишу «T».
10. Кликните в любом месте документа, напечатайте текст для первой кнопки и разместите его в области одного из ранее созданных изображений.

Размеры текста можете выставить любые, удовлетворяющие ваши желания.

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

Не забудьте оформить текст в соответствии с концепцией меню.

12. Повторите описанную процедуру по отношению к оставшимся кнопкам, прописав текст, соответствующий наименованию разделов.
13. Нажмите на клавиатуре клавишу «C» или выберите инструмент «Раскройка» с помощью панели.
14. Выделите каждую кнопку, отталкиваясь от высоты созданного изображения.
15. Откройте меню «Файл» и выберите пункт «Сохранить для Web».
16. Установите формат файла «PNG-24» и в самом низу окна нажмите кнопку «Сохранить».
17. Укажите папку, куда будут помещены нужны файлы, и, не меняя никаких дополнительных полей, кликните по кнопке «Сохранить».

На этом моменте вы можете закрыть графический редактор и вновь вернуться на сайт ВКонтакте.

1. Находясь в разделе редактирования меню, на панели инструментов кликните по значку «Добавить фотографию».
2. Загрузите все изображения, которые были сохранены на последнем этапе работы с Photoshop.
3. Дождитесь окончания процесса загрузки картинок и добавления строчек кода в редактор.
4. Переключитесь в режим визуального редактирования.
5. Поочередно кликните на каждое изображение, выставляя для кнопок максимально возможное значение «Ширина».

Не забывайте сохранять изменения.

6. Вернитесь в режим редактирования wiki-разметки.
7. После разрешения, указанного в коде, поставьте символ «;» и пропишите дополнительный параметр «nopadding;». Это необходимо сделать, чтобы между изображениями не было визуальных разрывов.

Если вам необходимо добавить графический файл без ссылки, после ранее указанного параметра «nopadding» пропишите «nolink;».

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

В случае перехода к разделам группы или на сторонний сайт, вам следует использовать полный вариант ссылки из адресной строки. Если вы переходите на какую-либо запись, например, в обсуждениях, используйте укороченный вариант адреса, содержащего себе символы, идущие после «vk.com/».

9. Нажмите внизу кнопку «Сохранить изменения» и перейдите на вкладку «Просмотр», чтобы проверить работоспособность.
10. Как только ваш блок управления будет настроен должным образом, перейдите на главную страницу сообщества, чтобы проверить работу конечной версии меню группы.

Вдобавок ко всему стоит отметить, что вы всегда можете уточнить подробности о разметке с помощью специального раздела «Помощь по разметке», доступного непосредственно из окна редактирования вашего меню. Удачи!

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

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

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

Создание меню в группе ВКонтакте

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

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

Перед началом создания навигации группу следует подготовить – включить нужные опции. Всё, что описано ниже, можно выполнить на десктопном компьютере.

Зайдите в созданную ранее группу. В правом меню кликните на пункте «Управление».

Далее снова в правом меню выберите пункт «Разделы». Слева найдите строку «Материалы», откройте выпадающий список рядом с ним и выберите «Ограниченные». (Если выбрать «Открытые», то любой посетитель группы сможет менять содержимое пунктов меню.)

Кликните внизу кнопку «Сохранить».

Теперь вернитесь на главную страницу группы. Вы увидите, что в верхнем блоке рядом с пунктом «Информация» появился пункт «Свежие новости». Зайдите в него и кликните кнопку «Редактировать».

Перед вами откроется пустая страница, которая будет выглядеть так:

Поменяйте название страницы на «Меню», как на скриншоте. Кликните на кнопке с двумя угловыми стрелками справа, это переведёт страницу из обычного режима в режим wiki-разметки. Соответствующее уведомление должно появляться над указателем мыши, если задержать её над этой кнопкой.

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

Текстовое меню

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

Нужно заранее продумать набор пунктов, которые будут в вашей навигации. Следует понимать, что будет в каждом из этих пунктов – отдельная статья, группа статей или множество новостных заметок, объединённых одним хештегом. Структура группы так же важна, как и структура отдельного сайта и разработать её порой бывает непросто. Уделите этому серьёзное внимание.

Когда набор пунктов готов, откройте снова страницу меню (которую вы ранее переименовали из страницы «Свежие новости»). Убедитесь, что она находится в режиме wiki – наведите мышку на кнопку с двумя угловыми стрелками справа и дождитесь появления подсказки. Теперь просто напишите пункты меню в поле редактора. Каждый пункт заключите в квадратные скобки:

Если вы сейчас нажмёте кнопку «Сохранить страницу» и вернётесь на главную вашей группы, то найдёте там только что созданное меню. Только пункты этого списка пока никуда не ведут. Поэтому продолжим.

Перед каждым словом (между открывающей квадратной скобкой и первой буквой) поставьте символ вертикальной черты:

Теперь между открывающей квадратной скобкой и вертикальной чертой поставьте ссылку на тот материал, который должен быть под соответствующим пунктом:

Если в этот момент нажать кнопку «Предпросмотр» внизу страницы, то вы увидите полностью готовое меню, как оно будет отображаться на странице группы.

Кликните «Сохранить страницу», вернитесь на главную и проверьте, всё ли правильно работает.

Графическое меню

Администраторы сообществ чаще предпочитают создавать меню на основе изображений, потому что они просто красивее. Но с ними придётся повозиться серьёзнее, чем с простыми текстовыми.

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

Самый простой вариант показан на скриншоте:

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

Создайте в Фотошопе новый файл, задайте ему ширину 600 пикселей. Высота может быть суммой высот всех пунктов. Например, если высота одного пункта 50 пикселей, а их у вас шесть, то общая высота изображения окажется 300px.

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

Напишите в каждом прямоугольнике нужный текст. Оформите его, как считаете нужным, здесь только пример:

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

Далее откройте снова страницу с wiki-разметкой и загрузите все баннеры:

После окончания загрузки в редакторе должны появиться шесть строчек – ссылки на загруженные картинки. Они должны выглядеть примерно так (у вас конкретные цифры будут другие):

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

Не забывайте про вертикальные линии, которые должны разделять части этой конструкции – ссылки на картинки и ссылки на разделы текста.

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

Интерактивное меню

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

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

Использование шаблонов

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

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

Особенности

Тонкости создания меню для ВК-сообщества этим не исчерпываются. Рано или поздно вы можете обнаружить, что навигация, прекрасно отображающаяся на больших экранах компьютеров, «ломается», если смотреть на неё со смартфонов. Картинки, которые были использованы для пунктов меню, могут иметь фиксированную ширину 600 пикселей, а ширина экрана телефона может оказаться меньше. И, чтобы решить эту проблему, приходится применять методы адаптивной HTML-вёрстки.

Кстати, описанный здесь метод не единственный. В начале статьи было указано, что перед началом нужно зайти в раздел «Управление» группы и установить пункт «Материалы» в положение «Ограниченные». Так вот, можно этого и не делать. Тогда меню создаётся на хештегах и располагается в закреплённой записи на главной странице группы.

Одном словом, создание красивой страницы сообщества – дело не простое. Если вам нужно просто «чтобы работало» и получить результат быстро, целесообразнее обратиться к профессионалам. Но вы можете скрупулёзно во всём разобраться и начать самостоятельно оказывать такие услуги за деньги. Помните, что дизайнер интерфейсов – востребованная профессия.

VK – Перезагрузка №3: Как сделать меню в группе в контакте?

Привет всем читателям  блога JonyIT! МЫ рады приветствовать вас в очередном выпуске серии статей «VK – перезагрузка» в которой сегодня поговорим о том как сделать меню в группе в контакте”. Кто мы? Ой, забыл представиться. Меня зовут Константин Белан и сегодняшний пост для вас пишу я, ну и конечно Антон помогает мне немного, так сказать наставляет на путь истинный.)

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

В социальной сети Вконтакте много, даже очень много групп (как создать группу, Антон писал здесь), и все они имеют разный посыл, и разное оформление. т.к. у всех своя фантазия и свои интересы. Но, мало кто догадывается, что в меню содержится её скрытый смысл…

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

Обзор различных меню групп в контакте

Перед тем как начать, что-то создавать я хочу представить вам  некоторые меню групп, которые, на мой взгляд, получились не только очень яркими и привлекательными, но и отразили суть деятельности стоящей за ней людьми это как раз то, что мы сегодня и попытаемся реализовать. И так поехали…

№ 1 Свадебное агентство «La Perfecto»

Как вы понимаете это группа представляет одно из свадебных агентств в Санкт-Петербурге, да дизайн меню бесподобен, но нас он не интересует, мы проводим анализ структуры.   Побеседовав с администратором группы, я выяснил, что 20% своих клиентов они получают благодаря этой группе. Если вы планируете предлагать свои услуги, то я рекомендую вам позаимствовать структуру меню этого свадебного агентства. И прошу вас не нужно придумывать велосипед, он уже придуман.

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

№ 2 Общественная организация «Экострана»

Ещё одна грамотно оформленная группа, которая уже не относиться к какой-то коммерческой тематике это группа общественной организации «Экострана». Согласно описанию организация борется за сохранение природы, какими способами я честно не знаю, но нас это и не интересует=)

Пункты меню я считаю не очень чётко подобранны, так как первой ссылкой должна быть страница «О нас», чтобы попав в группу, посетитель первым делом мог познакомиться с тем, чем занимаются эти люди и вступить в их ряды по желанию=) А всё остальное я считаю в порядке, фото, видео, статьи и контакты, это то, что как раз и нужно юному приверженцу идей группы для вступления.

№ 3 Йога с Дарьей Каширской

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

• Расписание
• Информация о преподаватели
• Новости
• Описания занятий
• Семинары
• Индивидуальные занятия

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

Какие цели преследует создание меню в VK?

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

Что я подразумеваю под основной информацией? Ну, конечно же, это ваш прайс – лист товаров или услуг, контактные данные телефон или email, вопросы – ответы и всё это вы закрепляете отзывами о товаре.

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

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

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

Рисуем  графическое меню для группы вконтакте в Photoshop

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

Так вот заходим в Photoshop. Если у Вас, его нет, скачиваете и устанавливаете.

Шаг 1. – Создаем новый документ, размерами примерно: 400×500 (высота будет зависеть от количества пунктов меню).

Если вы умеете рисовать, то можете предварительно нарисовать эскиз на тетрадном листе, но так как этого делать я не умею, то возьму простенький шаблон, который в последующем и превращу в меню. К сожалению «Репин» из меня никакой)

Шаблонов в Интернете вагон, да не то что шаблонов, а изображений на которых можно просто написать текст и превратить его в навигационное меню в vk. Можно сделать, какой-нибудь телевизор с надписями, сотовый телефон с надписями, плакат с надписями, да что угодно, главное чтобы с надписями 🙂   Я к примеру выбрал изображение плазменного телевизора на который нанесу текст и в будущем с помощью wiki разметки сделаю из него Гиперссылки.

Шаг 2. – Берём тот самый телевизор и  Photoshop’e прописываем небольшое меню, которое состоит из рубрик и пары страниц моего блога.

Я уже говорил что не «Репин», поэтому в данном уроке обойдусь таким вот аскетичным меню, но вам я предлагаю не останавливаться на достигнутом и пририсовать что-нибудь ещё интересненькое, ну а если у вас другой шаблон, то это сам бог велел сделать.)

Далее нам необходим разрезать изображение по частям . Для чего? – спросите вы. Для того, чтобы сделать части изображений с текстом, активными ссылками.

Шаг 3. – Выбираем инструмент «Раскройка», для этого нажимаем C, и выбираем из меню «Раскройка». Переводы меню могут отличаться от вашей версии фотошопа, поэтому ориентируйтесь на иконки в меню.

Включим линейку нажатием комбинации клавиш «CTR+R» с помощью нею вам будет легче ориентироваться при разрезании изображения. Как разрезать? Да не могу, но если в техническом плане, то это нужно делать как то так…

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

Теперь нужно создать фрагменты по направляющим. Не буду говорить, что это, т.к. у нас не урок работы в Фотошопе. И наша задача лишь научиться создавать меню в контакте. Ну ладно, что-то я немного отвлекся.

Шаг 4. – Для создания фрагментов по направляющим, нужно нажать на специальную кнопку в области параметров, которая называется «Фрагменты по направляющим»

Ух ты, у нас все отлично получается. Что же делать теперь? А теперь, сохраняем части изображения по отдельности. Для этого нажимаем Файл –>Сохранить для Web и устройств…

Шаг 5. – Далее вводим название файла, выбираем формат JPEG, качество ставим наилучшее и ставим галочки напротив Прогрессивный и Встроенный профиль. Нажимаем сохранить и ура, изображение разделено на несколько частей.

Теперь наша задача, загрузить эти изображения Вконтакт и сделать из них – Меню!

Техническая реализация меню для группы в 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, а высоту разную. Абсолютно все изображения без рамок, и лишних пробелов!

Ура, ура, ура! Мы это сделали. Давайте же посмотрим что получилось?

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

Я сам совсем недавно начал изучать отрасль SMO и SMM, поэтому нужно было создать группу и сделать красивое меню. Сейчас же у меня несколько групп, и я хотел бы показать одну из моих лучших работ по выполнению меню:

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

На этом у меня всё. Всем спасибо, и до скорого! И запомните: Главное пробовать, и все получится.

С уважением, Белан Константин!
—————————-

Вот такой вот сегодня был познавательный урок и я надеюсь больше начинающие smm специалисты больше не будут мне задавать вопросы типа как сделать меню в группе в контакте, ну а если и будут, то у меня на блоге теперь есть полноценный ответ=) На этом всё. Не забываем подписываться на обновления блога.

Минуточку внимания друзья!

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

Заказать у нас дизайн для вашей группы можно написав мне в вк https://vk.com/jonyit или на почту сюда: [email protected]

Контрольный список

: готова ли ваша призрачная кухня к работе?

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

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

Выберите концепцию

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

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

Дизайн меню

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

Решите, как вы хотите работать

Когда вы решите создать кухню-призрак, вы можете использовать несколько различных подходов.

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

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

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

Выровняйте свои финансы

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

Создайте удобный веб-сайт

Когда вы создаете кухню-призрак в Интернете, ваш веб-сайт становится сердцем вашего бизнеса. В конце концов, именно так клиенты найдут вас, узнают, чем вы занимаетесь, и в конечном итоге (надеюсь) разместят заказ. Чтобы все это произошло, вам нужен веб-сайт, который без проблем работает, особенно на мобильных устройствах. Включите всю важную информацию, такую ​​как:

• Название ресторана
• Номер телефона
• Адрес электронной почты
• Часы работы
• Меню
• Ссылка на онлайн-заказ

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

Выберите систему онлайн-заказов

Все ваше тщательное планирование меню и стратегические покупки бесполезны, если вы не знаете, как вы будете обрабатывать заказы. Обязательно инвестируйте в кухонный инструмент-призрак, который управляет онлайн-заказами. Правильная удобная для пользователя платформа расскажет обо всем, от 86 и возмещения до дополнительных сборов и времени подготовки.Все это делается в режиме реального времени, так что вы можете поменять догадки в пользу того, чтобы держать руку на пульсе своего ВКонтакте 24/7.

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

Маркетинговый план

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

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

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

‍

Сегодняшний урок: готовьте безопасные обеды

Авторы: Хесус Гарсия, специалист по связям с общественностью, и Марибель Алонсо, специалист по технической информации, Служба безопасности пищевых продуктов и инспекции Министерства сельского хозяйства США в Здоровье и безопасность

18 августа 2020 г.

При приготовлении обеда дома всегда соблюдайте правила безопасности пищевых продуктов.Фото любезно предоставлено FSIS

С приближением 2020-2021 учебного года многие родители готовятся к изменению своего распорядка. Многие ученики могут вернуться в школу впервые с начала пандемии COVID-19, а другие могут учиться дистанционно. Не позволяйте болезни пищевого происхождения — обычно называемой пищевым отравлением — мешать вашему ребенку учиться. Найдите время, чтобы спланировать и безопасно приготовить обед для ваших детей.

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

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

1. Смочите руки чистой проточной водой (теплой или холодной), закройте кран и нанесите мыло.
2. Вспеньте руки, потерев их вместе с мылом. Обязательно намылите тыльную сторону ладоней между пальцами и под ногтями.
3. Потрите руки не менее 20 секунд. Нужен таймер? Дважды напевайте песню «Happy Birthday» от начала до конца.
4. Хорошо промойте руки под чистой проточной водой.
5. Вытрите руки чистым полотенцем.

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

• Нарежьте и подготовьте сырые ингредиенты заранее, чтобы избежать перекрестного загрязнения при работе с готовыми к употреблению продуктами для салатов или других гарниров.
• Разделочные доски разного цвета — отличное напоминание о том, как избежать перекрестного заражения (вы можете использовать зеленую разделочную доску для свежих продуктов и другого цвета для мяса и птицы).

Повар : Обеспечьте легкий доступ к пищевому термометру, чтобы гарантировать, что вы готовите при рекомендованных безопасных внутренних температурах:

• Приготовьте целые куски мяса, включая говядину и свинину, до 145 градусов по Фаренгейту и дайте им отдохнуть не менее 3 минут перед разделкой.
• Приготовьте мясной фарш, например гамбургеры и сосиски, при температуре 160 градусов по Фаренгейту.
• Готовьте курицу и индейку до 165 градусов по Фаренгейту.

Охлаждение : готовя обед заранее, помните, что скоропортящиеся продукты не должны попадать в опасную зону — температуры от 40 до 140 градусов по Фаренгейту — где бактерии быстро размножаются и могут сделать пищу небезопасной.

• Убедитесь, что все скоропортящиеся продукты были охлаждены в течение двух часов после выхода из духовки или холодильника.
• Выбросьте продукты, оставленные без еды более чем на два часа, чтобы предотвратить болезни пищевого происхождения.
• Если вашему ребенку необходимо нести обед самостоятельно, никогда не упаковывайте скоропортящиеся продукты в коричневый бумажный пакет, потому что к обеду они будут небезопасны. Используйте изолированный мешок для обеда с мягкими стенками и добавьте к обеду пакет с замороженным гелем и коробку с замороженным соком или бутылку воды.

Эти четыре шага — Очистить, Разделить, Готовить и Охладить — дают родителям и опекунам шаги, которые они могут использовать, чтобы защитить своих детей от пищевого отравления. Теперь, когда мы рассмотрели все основы, вы готовы к большому испытанию — голодным ученикам!

Потребители могут узнать больше о ключевых методах обеспечения безопасности пищевых продуктов на Foodsafety.gov, подписавшись на @USDAFoodSafety в Twitter и поставив лайк Facebook.com/FoodSafety.gov. Потребители с вопросами о безопасности пищевых продуктов могут позвонить на горячую линию Министерства сельского хозяйства США по мясу и птице по телефону 1-888-MP (1-888-674-6854) с 10 часов утра.м. до 18:00 Восточное время, с понедельника по пятницу, на английском или испанском языке, или по электронной почте [email protected]. Потребители также могут общаться в чате в прямом эфире на сайте ask.usda.gov.

Если у вас есть вопросы о времени хранения еды или напитков, загрузите приложение FoodKeeper Министерства сельского хозяйства США для устройств Android и iOS.

Категория / Тема: Здоровье и безопасность

Написать ответ

Противоракетный щит готов: начальник ДРДО

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

Щит, разработанный Организацией оборонных исследований и разработок, прошел успешные испытания, и летящая баллистическая ракета с дальностью полета до 2000 км может быть уничтожена. К 2016 году дальность действия системы будет увеличена до 5000 км.

«Щит противоракетной обороны созрел … Мы готовы приступить к первой фазе, и она может быть реализована в очень короткие сроки», — заявил начальник ДРДО В.К. Сарасват рассказал PTI в Нью-Дели в интервью.

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

Однако эти два места еще не определены, и выбор будет производиться на политическом уровне.

DRDO использовало варианты ракет «Притхви» в качестве имитированных целей и успешно перехватывало ракеты в ходе испытательных стрельб.

«Мы выполнили шесть успешных запусков и продемонстрировали возможности для целей 2000 км … Мы продемонстрировали это в двух слоях: внутриатмосферном (внутри атмосферы Земли) и внеатмосферном (вне атмосферы Земли)», Мистер.- сказал Сарасват.

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

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

Система, необходимая для второй фазы проекта, находится в стадии разработки, сказал он, добавив, что для этой цели строятся корабли, откуда будут запускаться ракеты-мишени.

Руководитель DRDO сказал, что завершение второй фазы проекта ожидается к 2016 году.

Говоря о развитии системы, г-н Сарасват сказал, что противоракетный щит «автоматизирован» до такой степени, что вмешательство человека потребуется только в том случае, если миссия должна быть прервана.

Глава DRDO сказал, что индийская система противоракетной обороны сопоставима с американской системой Patriot 3, которая успешно использовалась во время войны в Персидском заливе 1990 года против Ирака.

В рамках своих усилий по защите от вражеских ракет Индия разрабатывает эту двухуровневую ПРО, которая может перехватывать вражеские ракеты на высотах 80 км и 150 км.

DRDO думает о перехвате ракет на больших высотах, поскольку это даст ему больше времени отклика в случае, если первая попытка окажется неудачной, и второй уровень системы может быть задействован.

Система была впервые испытана в ноябре 2006 года, после чего Индия вошла в элитный клуб стран, успешно разработавших систему противоракетной обороны, после США, России и Израиля.

Гимнастка из США Райли Маккаскер готова к дебюту на чемпионате мира

Момент Райли Маккаскер , который проработала всю свою жизнь, быстро приближается. 17-летняя американка собирается дебютировать на чемпионате мира по гимнастике в Дохе, Катар.

Год назад Маккаскер был на пути к тому, чтобы попасть в команду на чемпионат мира в Монреале после того, как финишировал третьим на чемпионате США. Но затем травма подколенного сухожилия вынудила ее прекратить тренировку и исключить ее из бега.

«В прошлом году я действительно с нетерпением ждал возможности поехать на чемпионат мира-2017», — сказал Маккаскер в телеконференции 15 октября, через три дня после того, как его назвали в команду Дохи.

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

Долгая дорога назад

Когда Маккаскер говорит, что взял отпуск на четыре месяца, она имеет в виду это.

«Я ничего не могла сделать — меня отключили — даже на какое-то время после реабилитации», — сказала она Olympic Channel в августе.

Это означало, что Маккаскер и тренер Мэгги Хейни , которая вывела Лори Эрнандес на золото в Рио, должны были стратегически подходить к тому, когда, где и как Маккаскер вернется к соревнованиям. Дуэт поработал, наращивая силу и выносливость, добавляя элементы, повышающие ее уровень сложности, и, что наиболее важно, давая ей время, необходимое для того, чтобы быть здоровой.

«Я подумал, что это был просто хороший год для нее, чтобы отступить, отдохнуть и притормозить, а затем не идти на соревнования, пока она не будет действительно готова», — сказал Хейни.

И она была готова, когда Маккаскер наконец дебютировала в 2018 году на турнире U.S. Classic в Колумбусе в конце июля, заняв второе место после олимпийской чемпионки Симоне Байлз и опередив чемпиона мира Моргана Херда.

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

Эта битва — одна из самых ярких сюжетных линий американской команды, которая в Дохе очень ценится за золото. Только двое американцев могут пройти в финал многоборья, и, учитывая, что Байлз, как предполагается, заблокировал одно из этих мест, дело дойдет до Херда и Маккаскера.

Яркий свет, большая сцена

Наблюдение из дома в прошлом году привело уроженца Нью-Джерси к Дохе.

«Честно говоря, я чувствую, что это просто мотивировало меня», — сказала она.«Увидев, что я упустил, просто зажег огонь».

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

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

«Она отлично справляется, — сказал Хейни. «На днях она сказала:« Сколько еще у нас дней тренировок? Потому что я готов к работе.Я готов к работе ». Итак, она готова».

Маккаскер помогла ее соседка по комнате в Дохе, Байлз, которая поделилась своим бесценным опытом в мире гимнастики.

«На каждом этапе пути у нее есть маленькие детали, маленькие хитрости», — сказал Маккаскер. «Мы просто учимся у нее, потому что для многих из нас это наш первый чемпионат мира».

«На днях у Райли была грубая тренировка, Симона подошла и начала с ней разговаривать», — добавил Хейни. «Она действительно хороша для всех девочек.

Пока Байлз творит свою магию, Доха и весь мир должны быть готовы к встрече с Маккаскером.

Социальные обратные ссылки: Подключение к сети

1. Автоматический вход в Facebook

Для автоматической публикации сообщений на Facebook есть 2 метода:

• Используйте наше приложение с одним входом в Facebook: самый быстрый метод, подробно описанный ниже
• Используйте свое приложение , созданное на Facebook, чтобы получить ключ API и / или секретный ключ: лучше для большого количества публикаций в социальных сетях
  

Мы создали специальное приложение Facebook, чтобы помочь вам легко публиковать сообщения в социальных сетях.В представлении компонента «Социальные обратные ссылки» нажмите кнопку «Выкл. / Вкл.» .

Затем примите заявление об отказе от ответственности, которое будет открыто во всплывающем окне.

Затем вам нужно подключиться к своей учетной записи Facebook, чтобы размещать сообщения на странице. Нажмите кнопку Продолжить как ….

Затем выберите страницу Facebook, на которой вы хотите опубликовать сообщение. Нажмите кнопку Далее.

После этого вам нужно выбрать разрешение Social Backlinks с выбранной страницей. Нажмите кнопку Готово.

Социальные обратные ссылки могут работать неправильно, если вы отключите эти параметры.

Теперь вы связали социальные обратные ссылки с Facebook. Щелкните на кнопке OK.

Затем во всплывающем окне с выбранной страницей выше нажмите кнопку «Продолжить» , чтобы закончить.

Готово! Вы подключены, и кнопка изменится на . На вы можете начать публиковать сообщения на страницах Facebook.

2. Подключитесь к Facebook с помощью приложения

Войдите на портал разработчиков Facebook

Чтобы получить ключ приложения и секрет приложения из Facebook, войдите в свою учетную запись Facebook на: https: / /developers.facebook.com/apps
Все ваши приложения будут перечислены там.

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

Создание приложения

Затем перейдите в меню приложений и добавьте новое

Создайте новое приложение, введите имя приложения

A Добавить продукт появится страница . Затем нажмите Facebook Login> Set Up button.

Затем выберите платформу Веб-сайт

Затем заполните поля Домен приложения и URL-адрес сайта доменом вашего веб-сайта (без https: // www) и URL-адресом (с https: // www)

В левом меню Facebook Login> Settings вы должны включить опцию Embedded Browser OAuth Login . Затем введите свой URL-адрес в Действительные URI перенаправления OAuth .Для первой учетной записи Facebook ваши URL-адреса перенаправления должны быть: https://your-domain.com/administrator/index.php?option=com_socialbacklinks&view=plugin&task=networkConnect&network=facebook&callback=1&tmpl=component

Вторая учетная запись Facebook, ваша учетная запись Redirect URls должны быть: https://your-domain.com/administrator/index.php?option=com_socialbacklinks&view=plugin&task=networkConnect&network=facebook2&callback=1&tmpl=component

, нажмите кнопку

. .

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

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

Добавьте свой идентификатор приложения и секрет приложения в социальные ссылки

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

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

Публикация на странице Facebook

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

A. Перейдите на страницу, связанную с вашей учетной записью из вашего профиля

B. Получите идентификатор страницы в конце URL-адреса

C. Введите номер или имя в Социальные обратные ссылки для публикации на нужной странице

Вы можете «публиковать сообщения от имени пользователя», как кто-то пишет на вашей стене, или «размещать сообщения от имени администратора», как администратор страницы.

Ваша учетная запись на странице Facebook теперь настроена, но еще не подключена, вам просто нужно войти в свою учетную запись, нажав кнопку «Вкл.» . Затем вы получите всплывающее окно авторизации для публикации на всей вашей странице Facebook.

Поздравляем, вы успешно подключились к Facebook!

Опубликовать в группе Facebook

Это не то, что включено в API, это скорее уловка.

Выполните ручную настройку — убедитесь, что ваше приложение имеет следующие разрешения: publish_actions user_groups
Перейдите на http://lookup-id.com/ и введите URL-адрес своей группы Facebook
Используйте предоставленный идентификатор и введите его в page_id в настройках

И убедитесь, что вы «публикуете как пользователь», и все будет работать нормально.

3. Автоматическое подключение к Twitter

Мы создали специальное приложение Twitter, которое поможет вам легко публиковать сообщения в социальных сетях. В представлении компонента «Социальные обратные ссылки» нажмите кнопку «Вкл. / Выкл.» Twitter .

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

Все готово, Twitter подключен к социальным обратным ссылкам

4.Подключитесь к Twitter с помощью приложения

Вы также можете подключить учетную запись Twitter с помощью собственного приложения. Прежде всего, вы должны создать приложение Twitter здесь: https://developer.twitter.com/en/apps
Подключитесь к своей учетной записи Twitter, затем вам будет предложено создать приложение

In Чтобы получить свои ключи Consumer API (ключ и секретный ключ), вам необходимо заполнить некоторые обязательные поля:

• Имя приложения
• Описание приложения
• URL-адрес веб-сайта
• Включить вход через Twitter
• URL-адреса обратного вызова: включить «социальные ссылки» / twitter / callback ».Например: https://joomunited.com/socialbacklinks/twitter/callback
• Расскажите нам, как будет использоваться это приложение

Затем вы можете получить свой Consumer API key по Ключам и токенам таб. Учетные данные приложения, которые необходимо скопировать в Social Backlinks

Хорошо, теперь ваше приложение Twitter готово к использованию!

Добавить учетные данные Twitter в социальные обратные ссылки

Теперь вы можете скопировать Consumer key и Consumer secret конфигурацию Twitter социальных обратных ссылок, чтобы подключиться.Сначала наведите указатель мыши на блок Twitter в правой части экрана, затем нажмите кнопку «Настройки».

Скопируйте и вставьте свой ключ API и секретный ключ API, затем нажмите кнопку Сохранить .

Ваша учетная запись Twitter настроена, но еще не подключена, вам просто нужно войти в свою учетную запись, нажав кнопку Twitter On.

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

Поздравляем, подключение к Twitter выполнено успешно!

5. Автоматическое подключение к LinkedIn

Мы создали специальное приложение LinkedIn, которое поможет вам легко публиковать сообщения в социальных сетях. В представлении компонента «Социальные обратные ссылки» нажмите кнопку «Вкл. / Выкл.» В LinkedIn.

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

Все готово, LinkedIn теперь подключен к социальным обратным ссылкам.

6. Подключитесь к LinkedIn с помощью приложения

Прежде всего вам нужно создать приложение LinkedIn здесь: https://www.linkedin.com/developer/apps
Требуется учетная запись LinkedIn, затем нажмите Create Application

Чтобы получить свой клиентский ключ и потребительский секрет, вам необходимо заполнить все поля.URL-адрес веб-сайта должен быть только доменом, а не URL-адресом поддомена.
Пример URL-адреса веб-сайта: https://www.your-domain.com

Когда ваше приложение будет создано, вы получите сообщение об успехе с вашим ключом API и секретным ключом.

Добавьте учетные данные LinkedIn в социальные обратные ссылки

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

Скопируйте и вставьте свой ключ API и секретный ключ, затем нажмите кнопку Сохранить .

Чтобы подключиться, нажмите кнопку LinkedIn на связанной

Затем вам будет предложено авторизовать приложение для доступа к вашему профилю, пожалуйста, нажмите OK, I Позволю.

Ваша учетная запись LinkedIn теперь полностью связана с социальными обратными ссылками.

Отлично! было сложно настроить? не так уж и много 🙂 Теперь давайте посмотрим, как настроить содержимое Joomla.

7. Автоматическое подключение к ВКонтакте

Мы создали специальное приложение ВКонтакте, которое поможет вам легко публиковать сообщения в социальных сетях. В представлении компонента Social Backlinks нажмите кнопку VK Off / On .

Появится всплывающее окно, вы щелкнете по ссылке LINK , она переключится на новую вкладку, затем скопируйте URL-адрес (e.g: https://oauth.vk.com/blank.html#code=a250ef9427c3925) и вставьте в поле Полный адрес . Затем нажмите кнопку Продолжить .

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

Готово! Вы подключены, и кнопка загорится, вы можете начать размещать сообщения в ВК.

8. Подключиться к ВКонтакте с помощью приложения

Вы также можете подключить учетную запись ВКонтакте с помощью собственного приложения.Прежде всего, вы должны создать здесь приложение ВКонтакте: https://vk.com/apps?act=manage
Подключитесь к своей учетной записи ВКонтакте, затем нажмите кнопку Create an Application справа.

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

• Заголовок: Заголовок: Название:
• Платформа: Веб-сайт
• Адрес сайта: http: // ваш сайт.com
• Базовый домен: yoursite.com

Затем нажмите кнопку Connect Site .

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

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

Хорошо, теперь ваше приложение ВКонтакте готово к использованию!

Добавить учетные данные ВК в социальных обратных ссылках

Теперь вы можете скопировать App ID и App Secret в конфигурацию социальных обратных ссылок ВКонтакте, чтобы подключиться. Сначала наведите указатель мыши на блок ВКонтакте, в правой части экрана, затем нажмите кнопку «Настройки».

Скопируйте и вставьте в поля идентификатора приложения и секрета приложения , затем нажмите кнопку Сохранить .

Ваша учетная запись VK теперь настроена, но еще не подключена, вам просто нужно войти в свою учетную запись, нажав кнопку VK на .

Вы скопируете LINK и вставите в поле Полный адрес в качестве шага Автоматическое соединение , описанного выше.

Поздравляем, подключение ВКонтакте прошло успешно!

Меркель встречает Байдена: Северный поток и Китай в меню прощального визита канцлера в США

Прощальный визит Ангелы Меркель в Белый дом в четверг был омрачен насущными проблемами, а также доброй волей, поскольку она встретилась с Джо Байден, чтобы обсудить разногласия по поводу крупного российского трубопровода и взгляды их стран на Китай как на растущую мировую державу.

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

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

«Мы готовы нырнуть», — сказал Байден. «Сотрудничество между Соединенными Штатами и Германией было крепким.

Канцлер, у которой были известные холодные отношения с предшественником Байдена Дональдом Трампом, сказала, что она «очень рассчитывала на углубление отношений».

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

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

Христианско-демократический союз Меркель лидирует по опросам, но зеленые экологи и левоцентристские социал-демократы также соперничают за то, чтобы возглавить будущее правительство. Хотя три стороны различаются по многим направлениям политики, все они привержены прочным трансатлантическим отношениям.

Головная боль «Северный поток»

Одна неприятная заметка, которая предшествовала и пережила эру дипломатических разногласий Дональда Трампа, — это новый трубопровод, по которому природный газ из России в Германию.

Соединенные Штаты давно утверждают, что проект «Северный поток — 2» будет угрожать европейской энергетической безопасности, увеличивая зависимость континента от российского газа и позволяя России оказывать политическое давление на уязвимые страны Восточной и Центральной Европы. Но Байден недавно отказался от санкций против немецких организаций, участвующих в проекте, что вызвало недовольство многих в Конгрессе.

Ожидалось, что Байден выразит Меркель свои опасения по поводу проекта трубопровода, но Белый дом не ожидал какого-либо официального объявления по итогам их переговоров, по словам представителя администрации Байдена, который проинформировал журналистов перед визитом Меркель.

Сенатор Марко Рубио, республиканец из Флориды, в письме Байдену в четверг выразил опасения, что трубопровод уже оказывает экономическое влияние на союзника США — Украину. Рубио сказал, что «Газпром», компания, которая управляет «Северным потоком-2», «уже начал сокращать использование трубопроводов в Украине», поскольку строительство нового газопровода близится к завершению.

«Я призываю вас передать канцлеру Меркель, что существует широкая поддержка обеих партий. за предотвращение завершения строительства еще одного трубопровода в обход Украины », — написал Рубио Байдену.«Я также призываю вас оказать давление на канцлера Меркель, чтобы она поддержала Украину против агрессии России».

Меркель пыталась развеять ожидания неизбежного прорыва, но она, вероятно, захочет решить проблему до ухода с должности. «Это давит на Германию и США. отношений и отношений Германии и ЕС », — сказал Тимм.

Китай и COVID-19 в меню

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

«Это можно сказать с относительной уверенностью», — сказал Штеффен Зайберт репортерам. «Это также сыграло важную роль на саммите G-7, где в последний раз встречались канцлер и американский президент».

Германия имеет прочные торговые связи с Китаем, но также критически относится к ситуации с правами человека в Пекине. Меркель стремится избежать ситуации, в которой Германия или Европейский союз могут быть вынуждены выбрать сторону между Китаем и США.

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

Гуманитарная группа «Врачи без границ» призвала Байдена опереться на Меркель, чтобы она отказалась от ее возражений против предложений о приостановлении действия патентов на вакцины. Меркель, опытный ученый, утверждала, что отмена патентов не будет эффективной и может нанести вред будущим исследованиям и разработкам.

Группа законодателей-демократов призвала Германию отказаться от «блокады» отказа от прав интеллектуальной собственности в связи с COVID-19 в соответствии с правилами глобальной торговли. Законодатели утверждали, что такой отказ поможет масштабировать производство эффективных вакцин по всему миру.

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

Хотя есть точки напряженности, Байден, похоже, стремится попрощаться с Меркель. Президент запланировал небольшой ужин в честь Меркель.

Меркель начала свой день с рабочего завтрака с вице-президентом Камалой Харрис, и в офисе Харриса сказали, что между ними состоялась «очень откровенная беседа».«

» Я могу только сказать, что я тоже рада этой возможности встретиться с первой госпожой вице-президентом Соединенных Штатов Америки », — сказала Меркель перед тем, как два лидера вошли в резиденцию, чтобы поговорить за завтраком. суфле из сыра Грюйер, сезонные фрукты и мясные закуски.

Также в четверг Меркель получила 18-ю почетную докторскую степень Университета Джона Хопкинса и выступила в Школе перспективных международных исследований университета.

Польза для здоровья от приготовления еды дома

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

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

1. Вы едите меньше калорий, даже не осознавая этого.

Ресторанные обеды часто содержат большое количество масла и соли, тогда как упакованные продукты обычно содержат натрий и добавки.Однако блюда, приготовленные дома, обычно более питательны и содержат меньше калорий. Это потому, что, когда вы готовите для себя, вы контролируете, какие ингредиенты вы используете и их количество, — объясняет советник по питанию Сара Джейкобс, соучредитель Wellness Project NYC, консалтинговой компании, которая работает с корпорациями для улучшения здоровья сотрудников.

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

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

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

2. Вы внимательнее относитесь к тому, что вкладываете в свое тело.

Многие люди спешат или работают одновременно во время еды, а это значит, что они, вероятно, не думают о том, что едят.Но когда вы садитесь за тарелку с едой, которую вы приготовили, скорее всего, вы будете есть более осознанно, обращая внимание на каждый вкус и компонент, который вы добавили в свое блюдо. «Готовя, вы участвуете в процессе еды от начала до конца — от продуктового магазина до тарелки, — объясняет Рэйчел Браун, также соучредитель Wellness Project NYC. вы вкладываете в свою систему ».

Ощущение и оценка процесса приема пищи также могут помочь вам сосредоточиться.«Осознанное питание даже после одного укуса может помочь нам вернуться в настоящий момент, отпустить водоворот мыслей, в которые мы часто попадаем, и помнить, что более ясный, простой и связанный образ жизни — это только укус или дыхание, — говорит Энди Ли, главный специалист по внимательности Aetna.

3. Можно пообщаться с близкими.

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

И не сбрасывайте со счетов социальные льготы, которые вы получаете, когда еда готова.Селин, например, любит угощать своих друзей и семью домашними блюдами на различных собраниях. «Еду обычно встречают улыбающиеся лица и желание вернуться», — говорит она. Между тем, Петрона Нуньес Монтуфар из Скрантона, штат Пенсильвания, старается делиться здоровой домашней едой с нуждающимися соседями. «Когда я помогаю другим, я чувствую, что помогаю себе», — говорит она. «Мне больше нравится давать, чем получать».

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

4. Вы стимулируете свой мозг.

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

Пожилые люди могут обнаружить еще более мощные когнитивные преимущества при приготовлении еды, — объясняет Джон Мур, доктор медицинских наук, медицинский директор Aetna и старший специалист в области здравоохранения. «Приготовление пищи — хорошее стимулирующее занятие, помогающее пожилым людям оставаться занятыми и использовать свой разум», — говорит он, отмечая, что освоение новых навыков и задач — например, приготовление нового рецепта — может предотвратить снижение когнитивных функций.Более того, приготовление пищи помогает пожилым людям обрести уверенность в себе. «Когда они не полагаются на свою семью в еде, это дает им чувство независимости, которое они ценят», — говорит доктор Мур. (Он отмечает, что лица, осуществляющие уход за пожилыми людьми, страдающими когнитивными нарушениями, должны обязательно принимать меры предосторожности, обеспечивая, например, отключение газовых плит после того, как они больше не используются.)

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