Як швидко налаштувати Instant View зі свого блогу

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

Перше, що ми робимо, це заходимо на сайт— https://instantview.telegram.org/ і проходимо авторизацію через Telegram. В результаті має вийти ось так:

Знаходимо в меню кнопку «My Templates»

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

Розглянемо на прикладі однієї з наших статей на сайті.

Після того як ми натиснемо Enter нас перенаправить на сторінку зі створенням шаблону для свого блогу. На перший погляд все що буде написано далі може здатися дуже складним, але це тільки так здається. Просто дотримуйтесь інструкцій і все вийде.

У новому вікні нас чекає три поля:

  • Оригінал нашого сайта
  • Поле правил
  • Видозмінений шаблон

Так, а тепер уважно. В першу чергу ми повинні визначити тіло нашої статті. На цьому етапі нам важливо виключити всі сторонні фішки, які є у вас на сайті, нам важлива лише стаття.

Як це робиться?

Ми будемо розглядати на прикладі Google Chrome.

Відкриваємо сторінку зі статтею, тиснемо комбінацію клавіш ctrl+shift+i. Перед нами відкриється вікно з вихідним кодом сторінки. Не лякайтеся, програмувати нічого не потрібно. Якщо проводити курсором по рядках, то ви можете помітити як змінюється заливка різних елементів на сайті.

Нам потрібно вибрати такий <div> елемент, який захоплює максимально точно статтю, але нічого зайвого. Пробіжіться за елементами і подивіться який найбільш підходящий. Важливо щоб заголовок статті також не потрапляв в цей <div>. Наприклад, у нас вийшло ось так:

Відразу зазначу кілька моментів:

  • В прямокутник я виділив блок, який не вдалося виключити з допомогою підбору правильних <div> як я не старався він все одно потрапляє в тіло статті. З ним ми розберемося пізніше.
  • По стрілочці розташований наш правильний <div>. У кожного сайт відрізняється, тому у кожного цей елемент буде свій
  • Підкреслений текст це головна мета нашого пошуку <div>

Отже, починаємо магію

Беремо рядок

body: //div[has-class("entry-inner")]

Замість entry-inner підставляємо наш підкреслений текст, в нашому випадку це thn_post_wrap. Вийшло так:

body: //div[has-class("thn_post_wrap")]

Потім вставляємо цей код в середнє віконце сайту з налаштуванням шаблону

Не забудьте натиснути ctrl+S для магії. У правому вікні з’явився наш Instant View. Але він поки сирий і ми можемо його доопрацювати. А ще виліз нікому не потрібний шматок блоку «Схоже», який потрібно прибрати.

Завантаження картинки

Тепер давайте довантажимо картинку з блогу, щоб вона стала як обкладинка статті. Для цього потрібно перед раніше введеним кодом body поставити такий код:
@append(<img>, src, @content): //meta[@property="og:image"]
cover: $@

Ось як виглядає все в підсумку:

Додаємо автора статті

Додаємо ще один невеликий шматочок коду і отримуємо в поле автор, ім’я автора статті:

Якщо у вас на сайті статті пишуть різні автори і у кожного є свій особистий аккаунт і при цьому їх ім’я виводиться десь під статтею в своєму окремому блоці <div>, то можна знайти назву цього блоку, як наприклад ми робили з самого початку і вставити його в такій ось код:

author: //div[@class="author__title"]

Замість author__title вписуйте свою назву блоку.

Прибираємо зайвий блок

Для того, щоб прибрати зайвий шматок у нас на сторінках, ми скористаємося таким способом:

Спочатку знаходимо <div> в якому знаходиться цей блок, і записуємо його назву

А потім вставляємо його в такий код:

@remove:$body//div[has-class("ya-share2")]

Слово «Схоже» пропало і це нас радує.

Публікуємо

Насамперед тиснемо на дві кнопки зверху. Спочатку праву, потім ліву. Відкриється вікно з адресою нашої:

Беремо це посилання і публікуємо його на каналі, або ділимося в чатах. Щоб воно більш акуратно виглядало, за допомогою ботів ховаємо його в слова.

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

https://tlg.wtf/iv?url=https%3A%2F%2Fzzapusk.com%2Fkak-poschitat-peresechenie-auditorii-v-telegram%2F&rhash=1b7f14a95dc438

А тепер дивіться, як я розбив отримане посилання. Все, що виділено, можна міняти, але як змінювати:

Відкриваємо будь-яку сторінку вашого блогу, яка за структурою схожа на ту, яку ми нещодавно обробляли і дивимося на її адресу

https://zzapusk.com/podrobnyj-razbor-razvitiya-i-monetizatsii-odnogo-iz-nashih-kanalov/

Копіюємо виділений фрагмент і підставляємо замість такого ж фрагмента для минулої статті.

Ну в принципі все, якщо щось не зрозуміло запитуйте @e_drozdov