1. Wiki-розмітка
2. Створення сторінки підписки ВКонтакте
3. установка віджета
4. Налаштування віджета

Добрий день. Сьогодні ми поговоримо про актуальній темі, якою цікавляться все частіше власники груп ВКонтакте. Останнім часом мені все частіше надходять запитання на кшталт «А як ви зробили таку гарну форму привітання для своїх груп і сторінку підписки?» І я пропоную творцям і адміністраторам ваших спільнот бути в тренді і використовувати всю міць платформи 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 вставити свої цифри. Закриваємо сьомий рядок]]

Восьма осередок верстається як перші шість. Закриваємо таблицю «прямий слеш + права фігурна дужка» |}

Натискаємо перегляд і дивимося, що вийшло

Ось готова розмітка цієї сторінки

{| fixed noborder nopadding

| ~ 150px 150px 150px 150px

| -

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

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

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

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

| -

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

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

| [[Photo141157564_456240055 | 150px; noborder; nopadding | https: //vk.com/widget_community.php?act=a_subscribe_box&oid=-128364240&state=1]]

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

| }

Фух. Сторінка створена. Зберігаємо посилання на сторінку у вигляді vk.com/page-128364240_52407284.

Ми дісталися до середини. Тому давайте влаштуємо перерву. Сходіть на кухню, налийте чаю або кави і трохи відпочиньте. Можете три хвилини послухати Вівальді в новому виконанні талановитих музикантів.

Продовжуємо урок. Частина друга. Залишилося трохи.

Що таке віджет? Це певна фішка або примочка, прикручена до веб-сайту або в нашому випадку до товариства ВКонтакте для збільшення функціональності оних. Робить життя сайтостроітеля більш насиченим, наповнює голову новими знаннями, а також іноді призводить до баттхёрту ツ

установка віджета

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

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

Заходимо на сторінку групи і бачимо, що у нас з'явилася додаткова фішка

відкриваємо додаток

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

Налаштування віджета

Перед заповненням можна ознайомитися з інструкцією

В поля вписуємо наступний текст:

Назва віджета * - Підписка (можете придумати своє)

Тема * - Привіт, {Firstname}! Ми раді вас бачити! (Знову ж пишете своє вітання, де змінна {Firstname} якраз ім'я користувача)

Якщо написати {Firstname} {Lastname}, то звернення до відвідувача буде відбуватися по Імені і Прізвища.

Посилання заголовка - можна вставити посилання

Число - можна залишити порожнім

Тема картки * - пишемо свій текст

Посилання заголовка картки - можна вставити посилання

Текст - пишемо свій текст

Текст кнопки - Підпишіться

Посилання кнопки - vk.com/comp.kursy?w=page-128364240_52407284

Тепер потрібно отримати посилання для кнопки. Для цього потрібно опублікувати нашу Wiki-сторінку Підписка. Для цього в поле Додати запис на головній сторінці групи вставляємо посилання на сторінку Підписка. Пам'ятайте, ми зберегли її в кінці першої частини уроку? vk.com/page-128364240_52407284. Як тільки сторінка прикріпиться до запису - посилання можна прибрати, сторінка все одно залишиться прикріпленою. Публікуємо запис і в запису натискаємо Підписка - отримуємо посилання в адресному рядку браузера

ось її ми і вставляємо в Посилання кнопки

Текст футера - необов'язково

Посилання футера - необов'язково

Натискаємо Зберегти та Включити внизу праворуч

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

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

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

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

На цьому все, питання в коментарях або через систему ЛЗ, зареєструвавшись на сайті.

З повагою.