Если вы задумались об этом вопросе, значит у вас уже есть свой сайт или блог, а также канал в 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://t.me/iv?url=https%3A%2F%2Fzzapusk.ru%2Fkak-poschitat-peresechenie-auditorii-v-telegram%2F&rhash=1b7f14a95dc438
А теперь смотрите как я разбил полученную ссылку. Всё что выделено можно менять, но как менять:
Открываем любую страничку вашего блога, которая по структуре похожа на ту, которую мы недавно обрабатывали и смотрим на её адрес
https://zzapusk.ru/podrobnyj-razbor-razvitiya-i-monetizatsii-odnogo-iz-nashih-kanalov/
Копируем выделенный фрагмент и подставляем вместо такого же фрагмента для прошлой статьи.
Ну в принципе всё, если что-то не понятно спрашивайте @e_drozdov