telegram-crawler/data/web/telegram.org/blog/share-preview.html
2024-06-30 14:26:52 +00:00

271 lines
17 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
<title>Sharing and Previews</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Sharing and Previews">
<meta property="og:image" content="https://telegram.org/file/811140019/1/mL_-WSj67g0/fe5ed63c6d04406980">
<meta property="og:site_name" content="Telegram">
<meta property="og:description" content="More than Bots 2.0 in version 3.8: check out the new sharing/previews and shiny new looks.">
<meta property="article:published_time" content="2016-04-12T01:55:35+00:00"><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:image" content="https://telegram.org/file/811140019/1/mL_-WSj67g0/fe5ed63c6d04406980" />
<meta property="fb:app_id" content="254098051407226">
<meta property="vk:app_id" content="3782569">
<meta name="apple-itunes-app" content="app-id=686449807">
<meta name="telegram:channel" content="@telegram">
<link rel="canonical" href="https://telegram.org/blog/share-preview" />
<link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" />
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
<link href="/css/telegram.css?239" rel="stylesheet" media="screen">
</head>
<body class="preload">
<div id="fb-root"></div>
<div class="tl_page_wrap">
<div class="tl_page_head navbar navbar-static-top navbar navbar-tg">
<div class="navbar-inner">
<div class="container clearfix">
<ul class="nav navbar-nav navbar-right"><li class="dropdown top_lang_select"><a class="dropdown-toggle" onclick="return dropdownClick(this, event)" href="#"><i class="dev_top_lang_icon"></i>EN <b class="minicaret"></b></a>
<ul class="dropdown-menu"><li class="chosen "><a href="?setln=en">English</a></li><li class="long "><a href="?setln=id">Bahasa Indonesia</a></li><li class="long "><a href="?setln=ms">Bahasa Melayu</a></li><li class=""><a href="?setln=de">Deutsch</a></li><li class=""><a href="?setln=es">Español</a></li><li class=""><a href="?setln=fr">Français</a></li><li class=""><a href="?setln=it">Italiano</a></li><li class=""><a href="?setln=nl">Nederlands</a></li><li class=""><a href="?setln=uz">Ozbek</a></li><li class=""><a href="?setln=pl">Polski</a></li><li class="long "><a href="?setln=pt-br">Português (Brasil)</a></li><li class=""><a href="?setln=tr">Türkçe</a></li><li class=""><a href="?setln=be">Беларуская</a></li><li class=""><a href="?setln=ru">Русский</a></li><li class=""><a href="?setln=uk">Українська</a></li><li class=""><a href="?setln=ar">العربية</a></li><li class=""><a href="?setln=fa">فارسی</a></li><li class=""><a href="?setln=ko">한국어</a></li></ul></li><li class="navbar-twitter hidden-xs"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i> Twitter</a></li></ul>
<ul class="nav navbar-nav">
<li class=""><a href="/">Home</a></li>
<li class=""><a href="/faq">FAQ</a></li>
<li class=""><a href="/apps">Apps</a></li>
<li class="hidden-xs "><a href="//core.telegram.org/api">API</a></li>
<li class="hidden-xs "><a href="//core.telegram.org/mtproto">Protocol</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix tl_page_container ">
<div class="tl_page">
<div class="tl_contest_page_wrap">
<div class="tl_blog_side_blog"><div class="side_blog_wrap">
<div class="side_blog">
<a href="/blog" class="side_blog_header">Recent News</a>
<div class="side_blog_entries">
<a href="/blog/mini-app-bar-paid-media-and-more" class="side_blog_entry">
<div class="side_blog_date">Jun 30</div>
<div class="side_blog_title">Mini App Bar, Paid Media, Story Search &amp; More</div>
</a><a href="/blog/telegram-stars" class="side_blog_entry">
<div class="side_blog_date">Jun 6</div>
<div class="side_blog_title">Telegram Stars: Pay for Digital Goods and More</div>
</a><a href="/blog/message-effects-and-more" class="side_blog_entry">
<div class="side_blog_date">May 31</div>
<div class="side_blog_title">Message Effects, Hashtag Search, and More</div>
</a><a href="/blog/my-profile-and-15-more" class="side_blog_entry">
<div class="side_blog_date">Apr 25</div>
<div class="side_blog_title">My Profile, Recommended Channels and 15 More Features</div>
</a><a href="/blog/sticker-maker" class="side_blog_entry">
<div class="side_blog_date">Apr 14</div>
<div class="side_blog_title">Sticker Editor — Create Your Own Stickers</div>
</a><a href="/blog/telegram-business" class="side_blog_entry">
<div class="side_blog_date">Mar 31</div>
<div class="side_blog_title">Introducing Telegram Business</div>
</a><a href="/blog/monetization-for-channels" class="side_blog_entry">
<div class="side_blog_date">Mar 31</div>
<div class="side_blog_title">Sharing Revenue with Channel Owners</div>
</a>
</div>
</div>
</div></div>
<div id="dev_page_content_wrap" class=" ">
<div class="dev_page_bread_crumbs"></div>
<h1 id="dev_page_title">Sharing and Previews</h1>
<div id="dev_page_content"><div class="blog_side_image_wrap">
<img src="/file/811140019/1/mL_-WSj67g0/fe5ed63c6d04406980" class="blog_side_image"/>
</div>
<p>In addition to a <a href="/blog/bots-2-0">major update to our Bot Platform</a>, we&#39;re making several design and interface improvements to our apps today. This post mostly shows <a href="https://telegram.org/dl/ios">iOS</a> screenshots, but be sure to check out the massive Android <a href="#new-design">redesign</a> we did in this version.</p>
<h4><a class="anchor" name="a-fresh-new-look-at-sharing" href="#a-fresh-new-look-at-sharing"><i class="anchor-icon"></i></a>A fresh new look at sharing</h4>
<p>Starting today, our <a href="https://telegram.org/dl/ios">iOS</a> users can easily share photos and videos to other Telegram chats with a comment, or send them to other apps.</p>
<div class="blog_2images_wrap">
<div class="blog_image_wrap">
<a href="/file/811140546/2/Zgl7pE0-AXs/5440cfa2dfb0b8b4e0" target="_blank"><img src="/file/811140546/2/Zgl7pE0-AXs/5440cfa2dfb0b8b4e0" title="New sharing menu"/></a>
<p>New sharing menu</p>
</div>
<div class="blog_image_wrap">
<a href="/file/811140278/1/yOS21IW0HG4/530ddb105575cd3086" target="_blank"><img src="/file/811140278/1/yOS21IW0HG4/530ddb105575cd3086" title="Open in other apps"/></a>
<p>Open in other apps</p> </div>
</div>
<h4><a class="anchor" name="new-video-player" href="#new-video-player"><i class="anchor-icon"></i></a>New video player</h4>
<p>We&#39;ve also added a new slick in-app media player so that you can watch videos from YouTube and other services in style. It will also take you fewer taps to start watching.</p>
<div class="blog_image_wrap">
<a href="/file/811140658/1/BLSfGB4kDLk/86049f8ad3711d49dc" target="_blank"><img src="/file/811140658/1/BLSfGB4kDLk/86049f8ad3711d49dc" title="New in-app video player" /></a>
<p>New in-app video player</p>
</div>
<h4><a class="anchor" name="preview-sticker-packs-and-stickers" href="#preview-sticker-packs-and-stickers"><i class="anchor-icon"></i></a>Preview sticker packs and stickers</h4>
<p>Adding new sticker packs has become easier. Tapping on any sticker in a chat will now instantly open the relevant sticker pack. You can preview and send stickers right from this menu. Now you won&#39;t have to teach your grandparents how to add stickers.</p>
<div class="blog_2images_wrap">
<div class="blog_image_wrap">
<a href="/file/811140295/2/cAL_A2vfFUE/6566c91ec069b51135" target="_blank"><img src="/file/811140295/2/cAL_A2vfFUE/6566c91ec069b51135" title="View sticker pack"/></a>
<p>View sticker pack</p>
</div>
<div class="blog_image_wrap">
<a href="/file/811140387/1/BM3ZuRjzIqA/f5a5c5889cb1fc7622" target="_blank"><img src="/file/811140387/1/BM3ZuRjzIqA/f5a5c5889cb1fc7622" title="If you're thinking that the sticker preview is strangely off-center here, consider that there's actually a finger holding the small version of that sticker on the phone screen at this moment."/></a>
<p>Preview sticker</p> </div>
</div>
<h4><a class="anchor" name="preview-gifs-and-bot-content" href="#preview-gifs-and-bot-content"><i class="anchor-icon"></i></a>Preview GIFs and bot content</h4>
<p>On iOS, Tap and hold to preview also works with GIFs in the GIF panel. Pull up for additional actions.</p>
<div class="smartphone_video_player_wrap">
<div class="smartphone_video_player_iphone">
<video class="smartphone_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" poster="/resources/video/cover/GIFs.png" autoplay loop controls muted>
<source src="/resources/video/GIFs.mp4" type="video/mp4">
</video>
</div>
</div>
<p>The same is true for content from inline bots. Tap and hold to preview results suggested by inline bots before sending. Try it now with <a href="https://telegram.me/gif">@gif</a>, <a href="https://telegram.me/sticker">@sticker</a> or <a href="https://telegram.me/coub">@coub</a>.</p>
<p>Don&#39;t worry, this is coming soon to Android too! Speaking of which…</p>
<h4><a class="anchor" name="new-design" href="#new-design"><i class="anchor-icon"></i></a>New design</h4>
<p>The Android app received a major tuneup in the design department. We&#39;ve redesigned the chat screen, optimized the colors, reimagined buttons and message bubbles, created beautiful progress bars, fully revamped documents and other attachments.</p>
<div class="blog_3images_wrap">
<div class="blog_image_wrap">
<a href="/file/811140063/1/mY1DqPgP_pM/b9d26f1457a9872f7d" target="_blank"><img src="/file/811140063/1/mY1DqPgP_pM/b9d26f1457a9872f7d" title="New design on Android"/></a>
</div>
<div class="blog_image_wrap">
<a href="/file/811140166/5/NOJqcpS5yIw/cf97dee23c01925ae2" target="_blank"><img src="/file/811140166/5/NOJqcpS5yIw/cf97dee23c01925ae2" title="New design on Android"/></a>
</div>
<div class="blog_image_wrap">
<a href="/file/811140207/2/08TjrnQOuw0/affd4f697ced476de3" target="_blank"><img src="/file/811140207/2/08TjrnQOuw0/affd4f697ced476de3" title="New design on Android"/></a>
</div>
</div>
<p>We&#39;ve also improved the design of our iOS app, adding juicy progress bars and a new look for documents. <a href="https://desktop.telegram.org">Telegram Desktop</a> has also received multiple design improvements and now fully supports the <a href="/blog/bots-2-0">new bots</a>.</p>
<div><br></div>
<blockquote>
<p>Yes, dont forget that in addition to the above were introducing the biggest update to our bot platform since June 2015 today. <a href="/blog/bots-2-0">Read more about Bots 2.0 »</a></p>
</blockquote>
<div><br></div>
<p><em>April 12, 2016<br>The Telegram Team</em></p>
</div>
</div>
<div class="tl_main_share clearfix">
<a href="https://t.me/share/url?url=https%3A%2F%2Ftelegram.org%2Fblog%2Fshare-preview&text=More%20than%20Bots%202.0%20in%20version%203.8%3A%20check%20out%20the%20new%20sharing%2Fpreviews%20and%20shiny%20new%20looks." class="tl_telegram_share_btn" id="tl_telegram_share_btn" data-text="More than Bots 2.0 in version 3.8: check out the new sharing/previews and shiny new looks." data-url="https://telegram.org/blog/share-preview"><i class="tl_telegram_share_icon"></i><span class="tl_telegram_share_label" target="_blank">Forward</span></a>
<a href="https://twitter.com/share" class="tl_twitter_share_btn" id="tl_twitter_share_btn" data-text="More than Bots 2.0 in version 3.8: check out the new sharing/previews and shiny new looks." data-url="https://telegram.org/blog/share-preview" data-via="Telegram">Tweet <span class="tl_twitter_share_cnt"></span></a>
</div>
</div>
<div class="tl_main_recent_news_wrap tlb_other_news_wrap tl_blog_list_page_wrap">
<h3 class="tl_main_recent_news_header">
<a href="/blog">Other News</a>
</h3>
<div class="tl_main_recent_news_cards clearfix">
<a class="dev_blog_card_link_wrap" href="/blog/mini-app-bar-paid-media-and-more"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400026/1/xwmW8Qofk5M.263566/16218cb12e7549e76b" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Mini App Bar, Paid Media, Story Search &amp; More</h4>
<div class="dev_blog_card_lead">Our June update adds a way to minimize mini apps into a compact bar, helps content creators monetize their channels with paid photos and…</div>
</div>
<div class="dev_blog_card_date">Jun 30, 2024</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/telegram-stars"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400431/1/-u0XrknOtfw.232636/60f98efd626b95d010" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Telegram Stars: Pay for Digital Goods and More</h4>
<div class="dev_blog_card_lead">Over 400 million users interact with bots and mini apps on Telegram every month to buy products, access services, play games, and much…</div>
</div>
<div class="dev_blog_card_date">Jun 6, 2024</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/message-effects-and-more"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400575/2/8KHh7_LfT2A.255792/813a31e04522b5856a" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Message Effects, Hashtag Search, and More</h4>
<div class="dev_blog_card_lead">With this update, you can add spectacular animated effects to messages you send, move captions above media, find public posts using global…</div>
</div>
<div class="dev_blog_card_date">May 31, 2024</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/my-profile-and-15-more"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400283/2/u3yTafRoh-g.259708/f2ec7d02b0bf09876e" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">My Profile, Recommended Channels and 15 More Features</h4>
<div class="dev_blog_card_lead">This month we&#39;ve added more than 15 new features, including recommended channels, a way to view your own profile and display your channel…</div>
</div>
<div class="dev_blog_card_date">Apr 25, 2024</div>
</div></a>
</div>
</div>
</div>
</div>
</div>
<div class="footer_wrap">
<div class="footer_columns_wrap footer_desktop">
<div class="footer_column footer_column_telegram">
<h5>Telegram</h5>
<div class="footer_telegram_description"></div>
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
</div>
<div class="footer_column">
<h5><a href="/faq">About</a></h5>
<ul>
<li><a href="/faq">FAQ</a></li>
<li><a href="/privacy">Privacy</a></li>
<li><a href="/press">Press</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="/apps#mobile-apps">Mobile Apps</a></h5>
<ul>
<li><a href="/dl/ios">iPhone/iPad</a></li>
<li><a href="/android">Android</a></li>
<li><a href="/dl/web">Mobile Web</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="/apps#desktop-apps">Desktop Apps</a></h5>
<ul>
<li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li>
<li><a href="//macos.telegram.org/">macOS</a></li>
<li><a href="/dl/web">Web-browser</a></li>
</ul>
</div>
<div class="footer_column footer_column_platform">
<h5><a href="//core.telegram.org/">Platform</a></h5>
<ul>
<li><a href="//core.telegram.org/api">API</a></li>
<li><a href="//translations.telegram.org/">Translations</a></li>
<li><a href="//instantview.telegram.org/">Instant View</a></li>
</ul>
</div>
</div>
<div class="footer_columns_wrap footer_mobile">
<div class="footer_column">
<h5><a href="/faq">About</a></h5>
</div>
<div class="footer_column">
<h5><a href="/blog">Blog</a></h5>
</div>
<div class="footer_column">
<h5><a href="/apps">Apps</a></h5>
</div>
<div class="footer_column">
<h5><a href="//core.telegram.org/">Platform</a></h5>
</div>
<div class="footer_column">
<h5><a href="/press">Press</a></h5>
</div>
</div>
</div>
<script src="/js/main.js?47"></script>
<script>initScrollVideos(true);
twitterCustomShareInit();
blogSideImageInit();
backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>