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

//Виджет приветствия ВКонтакте. Как создать страницу подписки

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

Здравствуйте. Сегодня мы поговорим об актуальной теме, которой интересуются все больше владельцев групп ВКонтакте. В последнее время мне все чаще поступают вопросы типа «А как вы сделали такую красивую форму приветствия для своих групп и страницу подписки?» И я предлагаю создателям и администраторам ваших сообществ быть в тренде и использовать всю мощь платформы vk.com. Кстати, сразу же объясню, почему я занимаюсь популяризацией ВКонтакте на страницах блога, который посвящен созданию сайтов. Все очень просто. После того, как вы создадите сайт, именно ВКонтакте даст вам прекрасную возможность БЕСПЛАТНО продвигать и раскручивать его.

Wiki-разметка

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

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

А сейчас вернемся к нашим баранам и отметим, что тем сайтостроителям, кто хорошо знаком с языком HTML, не составит труда освоить и Wiki-разметку. Остальным придется попотеть. В рамках этой статьи совершенно невозможно научить вас всему, что предлагает инструментарий Wiki, поэтому мы будем рассматривать подробно только создание приветствия на базе виджета Spycat.

Создание страницы подписки ВКонтакте

К сожалению, виджет Spycat дает возможность только создать кнопку с текстом, и сделать ее ссылкой на созданную внутреннюю страницу VK или существующую внешнюю страницу Интернета (например, на свой сайт). И вот тут мы подбираемся к первому сюрпризу для тех, кто этого не знал — ВКонтакте позволяет создать сколь угодно много новых страниц со своим внутренним адресом типа https://vk.com/page-160132435_55277420 — эта ведет на страницу подписки нашей группы Студии Апельсин.

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

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

Теперь можно создавать саму страницу.

Создайте в адресной строке браузера ссылку вида

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

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

В строке браузера будет ссылка  вида https://vk.com/gim128364240, где цифры 128364240 — это и есть ID группы.

Также ID группы можно взять из адреса страницы статистики. Попасть туда можно так: нажимаем три точки — Статистика сообщества.

Получив ID сообщества, я создаю страницу Подписка от имени своей группы прямо в адресной строке браузера:

И нажимаю Enter

Получаю

Нажимаю Наполнить содержанием

В открывшемся редакторе страницы перехожу в Визуальный режим редактирования, создаю разметку, даю доступ к странице Только администраторам и редакторам (не путать с просмотром — видеть страницу будут все, редактировать только вы), жму Сохранить страницу.

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

Итак, мы должны сверстать таблицу из двух строк по четыре ячейки в каждой строке. В каждой ячейке будет располагаться свой кусочек паззла  — 1/8 часть рисунка. Для чего это сделано? А чтобы не вся картинка была кликабельной ссылкой, а только та часть, где нарисована кнопка Подписаться. Это седьмой по счету рисунок, который вписан в третью ячейку второй строки. Дальше станет понятнее ツ

{|fixed noborder nopadding — это мы объявили таблицу фиксированной ширины, без рамки, без отступов ячеек

|~150px 150px 150px 150px   — объявили ширину четырех ячеек в строке по 150px каждая

|- — вертикальный слэш и минус за ним объявляют новую строку в таблице

Следующая конструкция вида «прямой слэш+две левые квадратные скобки … две правые квадратные скобки» |[[ ......]] вставляют в ячейку элемент, в нашем случае рисунок (1/8 от большого)

|[[photo141157564_456240041|150px;noborder;nopadding;nolink| ]]

здесь photo141157564_456240041 — это картинка из альбома, созданного в вашем аккаунте. У вас после photo имя будет содержать свои цифры. То есть, что вы делаете. Вы скачиваете наш шаблон psd (podpiska_comp_kursy), затем в фотошопе меняете картинку и текст на свои и сохраняете комбинацией Ctrl+Alt+Shift+S. Получаете восемь картинок в одной папке (например, сохраняете с общим именем podpiska, а получаете восемь файликов podpiska_01, podpiska_02 … podpiska_08) и загружаете их в созданный в вашем аккаунте альбом. Я советую создавать альбом на личной странице, с помощью которой вы администрируете свою группу, потому что там вы можете поставить видимость альбома только для себя. Затем вы копируете имя файла вида photoxxxx_yyyyy и вставляете в нашу строку. Обратите внимание, что после заливки в альбом ваших 8 картинок их имена будут отличаться только последней цифрой. Так вот файл с самым младшим числом — идет в первую ячейку, следующий — во вторую и так до восьмого — у него самое большое число.

После имени файла у нас идет прямой слэш |  затем размер картинки 150px   затем разделитель «точка с запятой» ;  затем опция noborder  — отсутствие рамки у картинки, затем после точки с запятой следующая опция nopadding  — отсутствие отступа между картинками, что как раз и позволяет нам склеить 8 картинок в 1 целую. Затем точка с запятой и опция nolink  — говорит о том, что картинка не является ссылкой. Как вы уже увидели, у нас ссылкой будет только седьмая по счету картинка — это бо́льшая часть кнопки Подписаться. Завершает конструкцию |]]

Итак, первые четыре ячейки создали по образу и подобию первой, затем опять объявляем начало новой строки в таблице символами |-   и создаем оставшиеся четыре. В седьмой ячейке вместо опции nolink   пишем ссылку вида

|https://vk.com/widget_community.php?act=a_subscribe_box&oid=-160132435&state=1

Обратите внимание, она начинается с прямого слэша вместо точки с запятой! В нее нужно вставить (заменить наш) ID своей группы. Помните, мы в начале статьи уже искали этот ID? То есть вместо  160132435 вставить свои цифры. Закрываем седьмую строку ]]

Восьмая ячейка верстается как первые шесть. Закрываем таблицу «прямой слэш + правая фигурная скобка»  |}

Нажимаем Предпросмотр и смотрим,что получилось

Вот готовая разметка этой страницы

Фух. Страница создана. Сохраняем ссылку на страницу в виде vk.com/page-128364240_52407284.

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

Продолжаем урок. Часть вторая. Осталось чуть-чуть.

Виджет Spycat

Что такое виджет? Это определенная фишка или примочка, прикрученная к веб-сайту или в нашем случае к сообществу ВКонтакте для увеличения функциональности оных. Делает жизнь сайтостроителя насыщеннее, наполняет голову новыми знаниями, а также иногда приводит к баттхёрту ツ

Установка виджета

Переходим на страницу виджета https://vk.com/app5686299_-120826490

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

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

Открываем приложение

Список виджетов пуст? Не беда! Создаем новый и нажимаем Настроить виджет Персональный

Настройка виджета

Перед заполнением можно ознакомиться с инструкцией

В поля вписываем следующий текст:

Если написать 

Теперь нужно получить ссылку для кнопки. Для этого нужно опубликовать нашу Wiki-страницу Подписка. Для этого  в поле Добавить запись на главной странице группы вставляем ссылку на страницу Подписка. Помните, мы сохранили ее в конце первой части урока? vk.com/page-128364240_52407284. Как только страница прикрепится к записи — ссылку можно убрать, страница все равно останется прикрепленной. Публикуем запись и в записи нажимаем Подписка — получаем ссылку в адресной строке браузера

вот ее мы и вставляем в Ссылку кнопки

Нажимаем Сохранить и Включить внизу справа

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

Нажимаем Сохранить. У меня после сохранения виджет сругался на имя приложения, мол, не больше 25 символов. Ну как скажешь, начальник, оставим просто Spycat в названии ツ

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

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

На этом все, вопросы в комментариях или через систему ЛС, зарегистрировавшись на сайте.

С уважением.

 

2
Автор | 2018-01-31T21:23:57+00:00 Январь 27th, 2018|ВКонтакте|Нет комментариев

Оставить комментарий

Войти с помощью: