Как поделиться ссылкой на ваш сайт в мессенджере и соцсети, чтобы ее открыл каждый? Предпросмотр страниц — — Трибуна на vc. ru

Как поделиться ссылкой на ваш сайт в мессенджере и соцсети, чтобы ее открыл каждый? Предпросмотр страниц — Thumber.ru

Мы часто делимся ссылками на страницы разных сайтов в мессенджерах и соцсетях. Получая такие ссылки, первое, за что цепляется взгляд — картинка. Она абстрактно отображает суть страницы, но без прочтения сопровождающего текста нельзя понять, что нас там ждет. Исправить ситуацию с восприятием таких превью-тумб спешит Thumber.ru!

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

Ну и куда это годится в наше время?

И вот в один из вечеров, читая любимые новостные порталы и просматривая сайты из закладок, я обратил внимание, что некоторые сайты меняют этот подход и делают красивую картинку (тумбу-превью) для каждой страницы с выводом каких-то текстовых данных поверх изображения, чтобы получилась некая онлайн-визитка страницы.

Ну вот же оно! Почему бы не сделать сервис, который сможет предоставить такой функционал любым сайтам? Ведь накладывать динамический текст на картинку — это уже задача для программиста и сайта в целом, как в плане написания алгоритма, так и в плане инфраструктуры. А на некоторых хостингах (где хранятся многие блоги или статейные сайты) может и вообще не быть такой возможности, если нельзя подключить нужные библиотеки для языка програмирования.

. если уже кто-то сделал такое? Мне кажется, этот вопрос себе задают все, кто хочет запилить как минимум MVP нового сервиса, чтобы не изобретать велосипед. Но даже если уже работающие конкуренты обнаружены, почему бы не улучшить то, что сделано плохо или не сделано совсем?!

Быстрый анализ гугла показал, что в русском сегменте интернета ничего подобного нет (ну или мне не удалось найти на тот момент), а поиск по забугорной части того же гугла по десятку вариаций запросов показывал совершенно неактуальные сайты.

Поэтому, сказано (зачеркнуто) подумано — сделано!

Я сел изучать уже существующие примеры таких картинок (тумб, превью — можно называть как угодно) на сайтах, где они, собственно, и были замечены.

В целом — всё очевидно. Берем фоновую картинку, добавленную как главную для конкретной страницы, накладываем на нее текст, взятый, например, из заголовка H1, по вкусу добавляем вторичный текст и логотип сайта. Вуа-ля!

После сбора всевозможных кейсов был составлен список параметров, которые понадобятся клиентам нового сервиса в виде конструктора. В него вошли:

• Фон (изображение или градиент)
• Адаптация фона (прозрачность, ч/б)
• Логотип сайт
• Основной текст
• Вторичный текст
• Слоган сайта или подпись сайта (тут можно сформулировать по-разному)

Первым шагом стал небольшой скрипт, который просто генерировал картинку со всеми указанными параметрами на основе статичных данных. Это была, по сути, проверка работоспособности идеи и важного критерия — времени генерации такой тумбы. Понятно, что второе сильно зависит от мощности сервера, но обойти эту метрику стороной было нельзя на начальном этапе.

А далее, поскольку первый шаг не завершился провалом, была сделана оболочка в виде полноценного UI для пользователей и получился сервис Thumber.ru. Использовать его крайне просто:

1. после регистрации добавляем свой сайт и подтверждаем его
2. к каждому вебсайту привязываем прототип, созданный через конструктор на основе общих параметров и конкретного шаблона для тумбы-превью
3. для прототипа генерируется код, который надо поставить на все / нужные страницы (полная инструкция доступна в ЛК)
4. готово! Можно делиться ссылками где угодно — все будут видеть красивые изображения в предпросмотре страниц вашего сайта.

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

И действительно, у каждой страницы ведь может быть своё изображение?! Да и заголовочный текст тоже везде уникальный. Такие вещи были предусмотрены и они будут браться генератором тумб с каждой страницы, если применить разметку для графического оформления и текстового.

Помимо самих текстов, взятых со страницы сайта, конструктор предлагает выбрать шаблон, по которому будет генерироваться тумба. Шаблон — это схема расположения данных на картинке — где и как будут находиться надписи, в каком углу будет располагаться логотип и т.д. Пока что шаблонов немного, но это лишь дело времени фантазии.

Помимо основного назначения сервиса — генерировать красивые превьюшки для страниц, пользователь получает возможность видеть — где (в каких мессенджерах / соцсетях) и как часто делятся ссылками на страницы его сайта (-ов). Thumber.ru распознает более десятка каналок коммуникации, среди которых facebook, vkontakte, whatsapp, viber, instagram и другие.

Если тумба используется как изображение для вывода на сайте, то такие данные тоже попадают в статистику и отделены от предпросмотра в мессенджерах. В рамках той же статистики с помощью фильтров можно анализировать данные по браузерам пользователей, увидивших это изображение.

Сервис оформлен как freemium — самый просто план, доступный всем после регистрации, дает полноценные возможности. Будут только ограничения по количеству тумб и скорости их генерации.

В платных тарифах уже доступен CDN для тумб (они генерируются один раз и загружаются туда, а после отдаются на большой скоростью), увеличены лимиты на различные характеристики, а также доступна детальная статистика по рендерингу и показу.

За свою карьеру разработчика я предпринимал много попыток сделать полезный сервис, но все идеи были либо со слишком сильно задранной планкой (а мой внутренний перфекционист не может слепить MVP за 2 дня и выложить на всеобщее обозрение) либо жалко пытались повторить возможности общепризнанных существующих решений.

Thumber.ru отличается тем, что полноценный функционал не должен объять необъятное, а цель, которая достигается с его помощью, совершенно очевидна. Поэтому, наверное, он и родился живым )

PS этот текст — тоже первый, так что любая критика будет воспринята объективно и каждый получит благодарственную конфетку.

главная задача программиста — убить в себе перфекциониста)

Тумбами парятся зачастую СМИ.
Крупные реализуют это сами силами своего отдела разработки. Мелкие, коих в каждом городе от 5 штук, могут быть заинтересованы в вашем сервисе.

90% всех мелких СМИ на Вордпрессе, поэтому актуально было бы реализовать плагин для него.

Функционально:
— добавление лого
— добавление даты
— добавление раздела (рубрики)
— добавление заголовка (как материала, так и вручную при публикации)
— добавление подписи
— возможность отразить картинку
— возможность применения неких фильтров, рамок, блоков и т.п.

Не всегда есть картинка для новости, можно и создавать ее с помощью фона + все вышеперечисленное.

Плагин для WP в планах, можно сказать уже почти в разработке ) спасибо за мнение и поддержку.
Касательно тех, кому актуальна идея сервиса — также любые блоггеры, с самодельными движками тоже. Ну и онлайн-магазины тоже, только им нужно больше данных на тумбу выводить. Возможность заложена, будет тоже делаться.

Попытка авторизации через ВК:

Cannot assign null to property AppEntityUser::$name of type string

Feature Unavailable: Facebook Login is currently unavailable for this app, since we are updating additional details for this app. Please try again later.

Вам нужен партнёр — дизайнер, пиарщик, продажник, кто-нибудь. Данная статья и сайт сервиса на данный момент очень плохо представляют продукт и продают его. С тарифами тоже надо подумать.

Вы изучали свою ЦА? Кто она? Кто сейчас делает себе отдельные сайты и как? Я вот не знаю, можно ли ваш код вставить на Тильду или может там есть встроенный аналог? А интеграция с вордпресс, юзерам этой CMS очень нравится, когда всё устанавливается через менеджер расширений в два клика. Отдельно надо подумать про интернет-магазины, как тумбе стоит выглядеть, как её генерировать, может дополнительные поля предусмотреть — для цены, скидки и т.д. и алгоритм обновления тумбы, если на странице происходят важные изменения (цена, скидка).

P.S. На своём сайте много лет назад сделал автогенерацию таких тумб для целевых страниц, выглядит отлично. Но был фейл, когда сделал такие же тумбы для профилей пользователей — 500к профилей тут же сгенерировали лишние 50 гб занятого на ssd сервера места и по 50 гб в каждом ежедневном бэкапе, ибо роботы поисковиков обходят все страницы сайта 🙂

Предпросмотр ссылок

Предварительный просмотр ссылки в Telegram позволяет отображать начальную часть веб-страницы под текстом сообщения. Когда пользователь в публикует сообщение в группе или канале, предварительный просмотр ссылки включен по умолчанию, и пользователь может отключить его, нажав «X» в панели над текстовым полем.

Любой Telegram бот (и @MenuBuilderBot в том числе) не может «видеть», включил пользователь предварительный просмотр ссылки или нет, поэтому мы создали опцию, позволяющую управлять этим в пользовательских ботах, созданных с на @MenuBuilderBot.

Поведение по умолчанию (для режима «Как Админ»).

В пользовательских ботах созданных на @MenuBuilderBot предпросмотр ссылок по умолчанию выключен. Поведение по умолчанию может быть изменено следующим образом:

• Перейдите в вашем боте:
☞ Админ > Настройки бота > Предпросмотр Ссылок.

1. Перейдите в «Админ»

2. Затем «Настройки Бота»

3. Переключите «Предпросмотр Ссылок» в положение «Включено».

Теперь все сообщения содержащие ссылки будут показывать их предпросмотр.

Поведение сообщений.

Вы можете настроить предпросмотр ссылок для любого сообщения вне зависимости от настройки по умолчанию режима «Как Админ» в настройках бота. Для того чтобы установить собственную настройку предпросмотра для отдельного сообщения нужно:

• Перейдите в вашем боте:
☞ Редактор Постов.
• Выберите и зайдите в кнопку, для которой вы хотите добавить сообщение.
• Нажмите «*» для перехода в настройки сообщения.
• Нажмите «Предпросмотр Ссылок» — выбрав нужный режми.

Режим предпросмотра ссылок может быть:
● По умолчанию — «Как Админ» (работает в соответствии с глобальными настройками бота).
● Включено (предпросмотр ссылок всегда включён для этого сообщения).
● Выключено (предпросмотр ссылок всегда выключен для данного сообщения).

1. В редакторе постов нажать » * » (звёздочка) у нужного сообщения.

2. В настройках сообщения переключите режим нажав на кнопку «Предпросмотр Ссылок».

Настраиваем предпросмотр ссылок Телеграмм: все тонкости и нюансы

Функция предпросмотра ссылок в Телеграмм полезна для оформления sms в чатах, и для первоначального ознакомления с контентом.

Чтобы воспользоваться данной функцией, не придется копаться в настройках – достаточно скопировать ссылку в диалоговое окно или группу. После этого Телеграмм автоматически проанализирует сайт и вставит в окно сообщений картинку предпросмотра — текстовое сообщение или видео с ресурса.

Не стоит беспокоиться о приватности: все проверяется приложением, поэтому данные не будут утрачены или переданы другому человеку.

Для чего это нужно?

• Предпросмотр ссылок Телеграмм необходим для того, чтобы получить основную информацию о контенте, опубликованном на сайте;
• Если создается пост в группе, стоит позаботиться о его оформлении – это привлечет пользователей;
• Обращение внимания на ту или иную информацию. Если информация важна, то яркая и броская картинка предпросмотра заставит собеседника ознакомиться с сайтом и прочитать публикацию.

Почему не работает предпросмотр ссылок в Телеграмм?

Если вдруг ссылка отправлена, а изображение, иллюстрирующее содержание страницы, так и не появилось, не надо волноваться и ругать Telegram. Есть несколько причин вне приложения, которые можно назвать:

• Не проставлены теги. Чтобы изображение было показано при отправке ссылок, оно должно быть обрамлено тегами. Но на некоторых сайтах они могут быть не проставлены.
• Запрет на индексацию. Чтобы страницы сайта попали в выдачу, они должны быть открыты для индексации. Если же страница ещё не готова, её закрывают от индексации. Она не показывается в выдаче, но на неё можно попасть, «гуляя» по сайту. Если же пользователь отправит кому-нибудь ссылку на неё, то никакого предварительного изображения он не увидит.
• Запрет на постинг. Некоторые хотят как можно лучше защитить уникальные изображения на сайте. Для этого также проставляется определённый ключ в строке кода.
• Интернет. Чтобы превью подгрузилось, нужно подождать. Если же отправить ссылку в тот же момент, то оно не успеет загрузиться. Также не дождется подгрузки превью, если интернет медленный и слабый.

Как отключить предварительный просмотр в Телеграмм?

Отключить функцию не получится, но можно убрать превью. А сделать это очень просто:
После того как пользователь вставил ссылку в сообщение, надо навести мышку на изображение и нажать на крестик в правом верхнем углу.

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

Как сделать ссылку на Телеграмм?

Одни из первых вопросов, возникающих у пользователя – что такое ссылка на аккаунт Телеграмм, как ее сделать и чем она отличается от ссылки на группу или канал.
Линк можно получить в мессенджере, а отличие заключается в способе получения и внешнем виде:

• Частная страница (ссылка на профиль Телеграмм). Пользователю надо зайти в приложение, затем в меню «Настройки» тапнуть и скопировать username. Если эта строчка пустая – можно задать для себя уникальный username на латинице. Для того чтобы использовать username как линк, надо значок собачки заменить на «t.me/».

• Группы не поддерживают функции приглашения по URL, поэтому добавить участников в такой чат можно только вручную. Если проблема, как дать ссылку на группу, стоит ребром – придется преобразовать чат в супергруппу.
• Приватная супергруппа или частный канал. Линк на такие ресурсы в Телегамм имеет вид t.me/joinchat/ABCabc123, и получить эту комбинацию может только администратор. Важная особенность – у каждого админа своя уникальная комбинация букв и цифр для одной и той же группы/канала. Чтобы получить линк, потребуется зайти в настройки супергруппы или канала и в разделе «Информация о группе» («Описание канала») найти и скопировать.

• Публичные каналы и супергруппы имеют линк, начинающийся с «t.me/», уникальное название для ссылки должен придумать создатель паблика – оно будет доступно участникам пабликов и всем пользователям при поиске в приложении. Найти URL можно в меню настроек канала ли супергруппы.

Приватная ссылка Telegram: как сделать?

В приватных каналах и супергруппах может быть по несколько администраторов; в таком случае у каждого админа будет уникальный линк. На вопрос, как узнать свою ссылку в Телеграмме, для администраторов каналов и супергрупп ответ одинаков:

• Открыть группу/канал и кликнуть по названию.

• Выбрать «Добавить участников».

• Выбрать «Пригласить в группу (канал) по ссылке.

• Получить линк, по которому любой пользователь сможет стать участником группы или чата.

Для версии на ПК нужно открыть меню группы и выбрать Manage Group

Нажать на «Создать ссылку на приглашение»

Согласиться с предупреждением о доступности группы для других пользователей по ссылке.

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

Как скопировать ссылку в Телеграмме?

Основные способы копирования линка:

• в приложении Телеграмм (как на смартфоне, так и на ПК) достаточно кликнуть по линку – появится сообщение, что информация скопирована;
• на смартфоне можно воспользоваться стандартным способом копирования – удерживая палец на тексте дождаться выделения URL цветом (как правило, синим) и появления всплывающего меню. В меню выбрать «Скопировать».
• На ПК можно мышкой выделить URL. Затем щелкнуть правой клавишей мыши и выбрать «Копировать».

После этого останется решить только один вопрос — как скинуть ссылку? Это можно сделать в личном сообщении или разместить линк на публиках в Телеграмм или интернете.

Сокращение ссылок Телеграмм: что это и как сделать?

Длинные рандомные комбинации букв и цифр выглядят небрежно, и к тому же не вызывают доверия. Администраторы приватных супергрупп или частных каналов могут решить эту проблему, преобразовав ресурс в публичный.

Если администратор не хочет публичности для канала или супергруппы у него есть выход – спрятать URL под текст, это можно сделать как с линком на сайте в интернете, так и в посте Телеграмм. Такое решение подойдет и для публичных каналов/супергрупп, если пользователи хотят оформить текст, содержащий URL.

Как сделать ссылку на Телеграмм на сайте?

Нередко можно увидеть на сайтах или форумах гиперссылки — подсвеченный текст, при клике на который открывается какая-нибудь страница. От пользователя не потребуется специальных знаний и навыков – достаточно воспользоваться готовой формулой: вместо ТЕКСТ подставить слово/слова, которые будут видны посетителям интернет-страницы, а вместо ГИПЕРССЫЛКА – URL на Телеграмм в формате http:// t.me/ABCabc123 . Чтобы гиперссылка заработала — надо точно следовать формуле.

1. На страницах в интернете, например, в блогах или статьях используется код HTML:
   < a href=»ГИПЕРССЫЛКА»>ТЕКСТ
2. На форумах, в комментариях к сайтам, в электронных письмах используют код BB
   [url=ГИПЕРССЫЛКА] ТЕКСТ [/url]

Как сделать гиперссылку в Телеграмм

Чтобы сделать гиперссылку для поста в канале или в сообщении придется воспользоваться ботом, например, @markdownbot. Начать стоит с добавления бота в канал Телеграмм с правами администратора. Для этого потребуется:

После этого можно начинать работу с ботом:

С этого момента можно с помощью @markdownbot создавать и публиковать посты в группе. Чтобы спрятать линк под текст в посте Телеграмм потребуется:

• В меню выбрать пункт «Настройки». Если пользователь давно не заходил в чат, начать работу можно командой «/start».
• Убедиться, что тип форматирования установлен Markdown. нажать кнопку «Назад».

• Выбрать «Свободный режим».

• Чтобы ГИПЕРССЫЛКУ спрятать под ТЕКСТ, надо в посте воспользоваться формулой [ТЕКСТ](ГИПЕРССЫЛКА) – внутри скобок и между ними не должно быть пробелов.

• В ответном сообщении бот продемонстрирует, как его увидят пользователи; в свободном режиме бот самостоятельно не отправляет публикации в канал.

• Если администратора устраивает результат — можно переслать пост в канал.

Эти несложные навыки работы с линками облегчат использование Телеграмм и позволят шире использовать возможности мессенджера.

Источник https://vc.ru/tribuna/296390-kak-podelitsya-ssylkoy-na-vash-sayt-v-messendzhere-i-socseti-chtoby-ee-otkryl-kazhdyy-predprosmotr-stranic-thumber-ru

Источник https://docs.menubuilder.cc/books/5-rukovodstva-po-funktsiyam/page/predprosmotr-ssylok

Источник https://telegramzy.ru/predprosmotr-ssylok/