Мы рады представить новый плагин для DataLife Engine (DLE) под названием DLE-tg-iv, который позволяет интегрировать ваш сайт с функцией Telegram Instant View. Эта технология позволяет пользователям просматривать статьи и публикации прямо в Telegram, без необходимости открывать веб-страницы в браузере. Instant View обеспечивает быструю и удобную для чтения версию контента, оптимизированную для мобильных устройств

Преимущества Telegram Instant View для сайтов

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

Что делает плагин DLE-tg-iv?

Плагин DLE-tg-iv позволяет создать отдельный шаблон {THEME}/tg_iv.tpl, который используется для формирования версии публикации в формате Telegram Instant View. Этот шаблон поддерживает ограниченный набор тегов, что аналогично форматам Яндекс Турбо-страниц или Google AMP, но дает определенные преимущества владельцам сайтов

Ключевые функции плагина:

- Создание отдельного шаблона: Плагин формирует шаблон tg_iv.tpl, который позволяет использовать теги для полной новости, чтобы создать нужное отображение внутри Telegram.
- Доступ к Instant View версии: Публикации доступны по ссылке вида https://yousite.com/tg-iv,{news-id}-.html, которую можно отправлять в Telegram.
- Автоматизация через RSS: Плагин генерирует специальную RSS ленту site.ru/rss_tgiv.xml, которая содержит ссылки на Instant View версии публикаций. Эту ленту можно использовать для автоматической публикации в Telegram с помощью ботов.

Установка и настройка плагина:

1. Установка плагина: Доступен на GitHub по ссылке: https://github.com/tcse/DLE-tg-iv/
2. Настройка шаблонов: В шаблоне fullstory.tpl добавить ссылку на Telegram Instant View.
3. Настройка RSS: В файле .htaccess добавить правила редиректа для RSS ленты в формате Telegram Instant View.
Этот плагин упрощает интеграцию вашего сайта с Telegram Instant View, делая ваш контент более доступным и удобным для пользователей Telegram.
4. Откройте файл шаблона /templates/rss_tgiv.tpl и укажите свое имя домена вместо

<link>https://tcse-cms.com/tg-iv,{news-id}-.html</link>

Подробнее о плагине DLE-tg-iv

ссылка на репозиторий https://github.com/tcse/DLE-tg-iv/

В DLE текст публикации целиком формируется шаблоном fullstory.tpl но для формата Telegram IV количество поддержимаемых тегов строго ограничено, по сути сам формат TG IV это свой аналог Яндекс Турбо-страниц или Google AMP, но если это дает некоторые бонусы владельцам сайта - надо пользоваться.



Плагин создает отдельный шаблон {THEME}/tg_iv.tpl в рамках которого можно использовать теги полной новости для формирования необходимого отображения внутри мессенджера Телеграм

Доступ к такой версии страницы осуществляется по ссылке вида

https://yousite.com/tg-iv,{news-id}-.html

Ее можно отправлять в телеграм и если ошибок в верстке которую поддерживает TG IV то будет сформирована "та самая" версия.

Для процесса автоматизации работы с такими ссылками (не все же время их руками добавлять) в плагине присутствует отдельный файл, который создает отдельную RSS ленту сайта, которая вместо основного адреса новости, в RSS параметре link передает ссылку на /tg-iv,{news-id}-.html версию публикации.
site.ru/rss_tgiv.xml - RSS лента в формате telegram instant view

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

Шаблоны плагина DLE-tg-iv

/templates/rss_tgiv.tpl - формирует RSS для каждой отдельной новости
/templates/{THEME}/tg_iv.tpl - шаблон аналог fullstory.tpl но для формата TG IV


Теги используемые в шаблоне tg_iv.tpl
{category-name} - Название категории
{autor} - автор публкикации и
{alt-name} - ЧПУ новости
{date} - 2023-12-26T16:45:22+03:00
{category-alt-name} - ЧПУ категории
{og-site-name} - Названиев OpenGraph из настроек DLE
{og-description} - Описание OpenGraph из настроек DLE
{home-url} - Адрес сайта
{tg-chanel} - Имя Telegram канала, задается в админке
{tg-cover-url} - URL обложки публикации для Telegram, задается в админке

[tg-chanel] выводит текст, если тег {tg-chanel} не пустой [/tg-chanel]
[not-tg-chanel] выводит текст, если тег {tg-chanel} пустой [/not-tg-chanel]

[tg-cover-url] выводит текст, если тег {tg-cover-url} не пустой [/tg-cover-url]
[not-tg-cover-url] выводит текст, если тег {tg-cover-url} пустой [/not-tg-cover-url]

Картинки можно задавать стандартными тегами
{image-x} [image-x] текст [/image-x] [not-image-x] текст [/not-image-x]

Так же поддерживается работа с дополнительными полями [xfgiven_x] [xfvalue_x] [/xfgiven_x]
и [xfnotgiven_X] [/xfnotgiven_X]


Установка:
Telegram Instant View by TCSE for DataLife Engine
В шаблон полной новости fullstory.tpl добавить в нужное место ссылку на Telegram Instant View Например

<a href="/tg-iv,{news-id}-.html" target="_blank">Telegram Instant View</a>

В файле шаблона Telegram Instant View в папке {THEME}/tg_iv.tpl обязательно оставить метатег так как именно он позволяет без каких либо проверок на стороне Telegram делать вашим страницам IV версию.
Установка количества новостей экспортируемых в Telegram Instant View задается в разделе Настройки скрипта -> Настройки системы вкладка RSS вписать необходимое количество.
Для получения красивого адреса rss ленты для экспорта в Telegram необходимо добавить правила редиректов.
В /.htaccess после строки

RewriteRule ^rss.xml$ index.php?mod=rss [L]

вставить

RewriteRule ^rss_tgiv.xml$ index.php?mod=tg_instant_view_rss [L]

Всё. Теперь у нас есть две ленты RSS на сайте:
site.ru/rss.xml - Стандартная лента движка;
site.ru/rss_tgiv.xml - RSS лента в формате telegram instant view полным текстом новостей.

Скачать плагин

https://github.com/tcse/DLE-tg-iv/releases
или
Скачать файл: tg_iv_dle18.zip [18,02 Kb] (cкачиваний: 15)

Некоторые дополнения к первому релизу:

Демонстрация работы плагина в нашем канале http://t.me/tcsecms



Отдельный php скрипт по расписанию через cron опрашивает нашу RSS ленту https://tcse-cms.com/rss_tgiv.xml и отправляет через бота новые сообщения в телеграм канал @tcsecms

Для шаблона {THEME}/tg_iv.tpl в случае, когда его просматривают с ПК, имеет смысл добавить стилизацию. На телефонах внутри Телеграм она работать не будет, и скорее всего даже не сработает режим instant view, именно для этого вывод стилей завернем в теги определяющие что страница просматривается с ПК

Перед тегом

</head>

вставляем

[desktop]
    <!-- стили для настольных систем -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    	/* Основные настройки */
		body {
		    font-family: 'Helvetica Neue', Arial, sans-serif;
		    line-height: 1.6;
		    color: #333;
		    background-color: #fff;
		    margin: 0;
		    padding: 0;
		    max-width: 720px;
		    margin: 0 auto;
		}

		/* Заголовки */
		h1, h2, h3, h4, h5, h6 {
		    font-weight: bold;
		    margin: 1em 0 0.5em;
		    line-height: 1.2;
		}

		h1 { font-size: 2em; }
		h2 { font-size: 1.8em; }
		h3 { font-size: 1.6em; }
		h4 { font-size: 1.4em; }
		h5 { font-size: 1.2em; }
		h6 { font-size: 1em; }

		/* Параграфы */
		p {
		    margin: 1em 0;
		}

		/* Ссылки */
		a {
		    color: #0084B4;
		    text-decoration: none;
		}

		a:hover {
		    text-decoration: underline;
		}

		/* Изображения */
		img {
		    max-width: 100%;
		    height: auto;
		    display: block;
		    margin: 1em auto;
		}

		/* Блоки цитат */
		blockquote {
		    border-left: 4px solid #ccc;
		    padding: 0 1em;
		    margin: 1em 0;
		    color: #666;
		    font-style: italic;
		}

		/* Списки */
		ul, ol {
		    margin: 1em 0;
		    padding-left: 1.5em;
		}

		li {
		    margin: 0.5em 0;
		}

		/* Код и предварительно форматированный текст */
		pre {
		    background-color: #f4f4f4;
		    padding: 1em;
		    overflow-x: auto;
		    border-radius: 4px;
		}

		code {
		    font-family: 'Courier New', Courier, monospace;
		    background-color: #f4f4f4;
		    padding: 2px 4px;
		    border-radius: 4px;
		}

		/* Таблицы */
		table {
		    width: 100%;
		    border-collapse: collapse;
		    margin: 1em 0;
		}

		th, td {
		    border: 1px solid #ddd;
		    padding: 0.5em;
		    text-align: left;
		}

		th {
		    background-color: #f4f4f4;
		}

		/* Горизонтальные линии */
		hr {
		    border: 0;
		    border-top: 1px solid #ddd;
		    margin: 2em 0;
		}

		/* Футер */
		footer {
		    margin-top: 2em;
		    font-size: 0.9em;
		    color: #666;
		    text-align: center;
		}

		/* Медиа запросы для адаптивности */
		@media (max-width: 600px) {
		    body {
		        padding: 0 1em;
		    }
		    
		    h1 { font-size: 1.8em; }
		    h2 { font-size: 1.6em; }
		    h3 { font-size: 1.4em; }
		}
    </style>
    [/desktop]

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

Для этого в файле шаблона {THEME}/tg_iv.tpl
перед тегом < /head>
вставить:

{* Чистый JS-редирект с Instant View версии на основную страницу *}
<script>
// Проверяем, открыто ли в Telegram (встроенный браузер)
function isInTelegram() {
    const ua = navigator.userAgent || navigator.vendor || window.opera;
    return /TelegramBot|Telegram/i.test(ua) && /Mobile|iP(hone|od)|Android|BlackBerry/.test(ua);
}

// Если НЕ в Telegram — делаем редирект
if (!isInTelegram()) {
    window.location.replace("{full-link}");
}
</script>

Живой пример https://www.iv-service.ru/tg-iv,14959-.html

Внутри телеграм страница отображается в IV формате

а при переходе по ссылке в веб-браузере на ПК