telegram-crawler/data/web/telegram.org/blog/share-preview.html
2022-05-13 12:05:36 +02:00

270 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?230" 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/notifications-bots" class="side_blog_entry">
<div class="side_blog_date">Apr 16</div>
<div class="side_blog_title">Notification Sounds, Bot Revolution and More</div>
</a><a href="/blog/downloads-attachments-streaming" class="side_blog_entry">
<div class="side_blog_date">Mar 11</div>
<div class="side_blog_title">Download Manager, New Attachment Menu, Live Streaming With Other Apps and More</div>
</a><a href="/blog/video-stickers-better-reactions" class="side_blog_entry">
<div class="side_blog_date">Jan 31</div>
<div class="side_blog_title">Video Stickers, Better Reactions and More</div>
</a><a href="/blog/reactions-spoilers-translations" class="side_blog_entry">
<div class="side_blog_date">Dec 30</div>
<div class="side_blog_title">Reactions, Spoilers, Translation and QR Codes</div>
</a><a href="/blog/protected-content-delete-by-date-and-more" class="side_blog_entry">
<div class="side_blog_date">Dec 7</div>
<div class="side_blog_title">Protected Content, Delete by Date, Device Management and More</div>
</a><a href="/blog/shared-media-scrolling-calendar-join-requests-and-more" class="side_blog_entry">
<div class="side_blog_date">Nov 3</div>
<div class="side_blog_title">Hyper-Speed Scrolling and Calendar View for Shared Media, Join Requests and More</div>
</a><a href="/blog/chat-themes-interactive-emoji-read-receipts" class="side_blog_entry">
<div class="side_blog_date">Sep 19</div>
<div class="side_blog_title">Chat Themes, Interactive Emoji, Read Receipts in Groups</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/notifications-bots"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/464001531/fb90/y871yZUW70Y.372928/9fdf3a084a04b47ec8" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Notification Sounds, Bot Revolution and More</h4>
<div class="dev_blog_card_lead">Today&#39;s update adds creating your own notification tones, setting custom durations for muting chats or auto-deleting messages, as well…</div>
</div>
<div class="dev_blog_card_date">Apr 16, 2022</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/downloads-attachments-streaming"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/464001418/12513/cF-RXvZE-6U.103646/9abb402fe4e74b126f" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Download Manager, New Attachment Menu, Live Streaming With Other Apps and More</h4>
<div class="dev_blog_card_lead">Today&#39;s update brings tools to help you control your downloads, send documents with a tap, re-arrange media albums before sending, turn…</div>
</div>
<div class="dev_blog_card_date">Mar 11, 2022</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/video-stickers-better-reactions"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/464001234/e805/Z0pNrCJET-E.104373/a38ce74977bc53b064" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Video Stickers, Better Reactions and More</h4>
<div class="dev_blog_card_lead">This update brings easy-to-make video stickers, better reactions with more compact animations and extra emoji, a button to review unseen…</div>
</div>
<div class="dev_blog_card_date">Jan 31, 2022</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/reactions-spoilers-translations"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/464001488/d35b/oNi_rR0In0o.124097/c74f7d759893b78bfb" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Reactions, Spoilers, Translation and QR Codes</h4>
<div class="dev_blog_card_lead">Telegram&#39;s 12th update of the year introduces reactions, message translation, themed QR codes, hidden text (spoilers), and more.</div>
</div>
<div class="dev_blog_card_date">Dec 30, 2021</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="/blog">Blog</a></li>
<li><a href="/jobs">Jobs</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="/dl/android">Android</a></li>
<li><a href="/dl/wp">Windows Phone</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="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)">Twitter</a></h5>
</div>
</div>
</div>
<script src="/js/main.js?46"></script>
<script>initScrollVideos(true);
twitterCustomShareInit();
blogSideImageInit();
backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>