telegram-crawler/data/telegram.org/blog/share-preview.html
2021-06-25 12:27:58 +00:00

269 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="alternate icon" href="/favicon.ico?4" type="image/x-icon" />
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
<link href="/css/telegram.css?212" rel="stylesheet" media="screen">
<style>
</style>
</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> <b class="minicaret"></b></a>
<ul class="dropdown-menu"><li class=""><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/group-video-calls" class="side_blog_entry">
<div class="side_blog_date">Jun 25</div>
<div class="side_blog_title">Group Video Calls</div>
</a><a href="/blog/animated-backgrounds" class="side_blog_entry">
<div class="side_blog_date">Jun 25</div>
<div class="side_blog_title"> Animated Backgrounds</div>
</a><a href="/blog/payments-2-0-scheduled-voice-chats" class="side_blog_entry">
<div class="side_blog_date">Apr 26</div>
<div class="side_blog_title">Payments 2.0, Scheduled Voice Chats, New Web Versions</div>
</a><a href="/blog/voice-chats-on-steroids" class="side_blog_entry">
<div class="side_blog_date">Mar 19</div>
<div class="side_blog_title">Voice Chats 2.0: Channels, Millions of Listeners, Recorded Chats, Admin Tools</div>
</a><a href="/blog/autodelete-inv2" class="side_blog_entry">
<div class="side_blog_date">Feb 23</div>
<div class="side_blog_title">Auto-Delete, Widgets and Expiring Invite Links</div>
</a><a href="/blog/move-history" class="side_blog_entry">
<div class="side_blog_date">Jan 28</div>
<div class="side_blog_title">Moving Chat History from Other Apps</div>
</a><a href="/blog/voice-chats" class="side_blog_entry">
<div class="side_blog_date">Dec 23</div>
<div class="side_blog_title">Voice Chats Done Right</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/group-video-calls"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/464001231/2/Q0OFpRBNruI.71986/42d2a05bd0d1bd091b" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Group Video Calls</h4>
<div class="dev_blog_card_lead">Today&#39;s update lets you turn on your camera or share your screen during Voice Chats in groups on all devices, including tablets and desktops. This brings voice chats to a whole new…</div>
</div>
<div class="dev_blog_card_date">Jun 25, 2021</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/animated-backgrounds"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/464001689/5/LAdUj8JXG_c.61616/b196801953bc54ecd5" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title"> Animated Backgrounds</h4>
<div class="dev_blog_card_lead">In addition to Group Video Calls, this update adds animated backgrounds and message sending animations, as well as a new menu button for bots, new ways to import stickers, reminders…</div>
</div>
<div class="dev_blog_card_date">Jun 25, 2021</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/payments-2-0-scheduled-voice-chats"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/464001783/2/6Is-qGJkgX4.92603/d4d7fe3e0fc14ff3ba" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Payments 2.0, Scheduled Voice Chats, New Web Versions</h4>
<div class="dev_blog_card_lead">This update brings Payments 2.0 for all Telegram chats, Scheduling and Mini Profiles for Voice Chats, new versions of Telegram Web for…</div>
</div>
<div class="dev_blog_card_date">Apr 26, 2021</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/voice-chats-on-steroids"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/464001855/3/O31CcF_-a20.86962/cafa0c3d7dd2df1134" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Voice Chats 2.0: Channels, Millions of Listeners, Recorded Chats, Admin Tools</h4>
<div class="dev_blog_card_lead">Voice Chats first appeared in December, adding a new dimension of live talk to Telegram groups. Starting today, they become available in…</div>
</div>
<div class="dev_blog_card_date">Mar 19, 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?42"></script>
<script>initScrollVideos(true);
twitterCustomShareInit();
blogSideImageInit();
backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>