telegram-crawler/data/core.telegram.org/widgets/share.html

251 lines
13 KiB
HTML
Raw Normal View History

2022-02-23 06:45:45 +01:00
<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
<title>Sharing Button</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="A Telegram Sharing Button is an easy way to let users forward content from your website or app to their friends, Channels…">
<meta property="og:title" content="Sharing Button">
<meta property="og:image" content="https://core.telegram.org/file/464001511/3/yrhjSo2FPDw.14020/b040084e8ad9951a4b">
<meta property="og:description" content="A Telegram Sharing Button is an easy way to let users forward content from your website or app to their friends, Channels…">
<link rel="shortcut icon" href="/favicon.ico?4" type="image/x-icon" />
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
<link href="/css/bootstrap-extra.css?2" rel="stylesheet">
<link href="/css/telegram.css?215" rel="stylesheet" media="screen">
<style>
</style>
</head>
<body class="preload">
<div class="dev_page_wrap">
<div class="dev_page_head navbar navbar-static-top navbar-tg">
<div class="navbar-inner">
<div class="container clearfix">
<ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul>
<ul class="nav navbar-nav">
<li><a href="//telegram.org/">Home</a></li>
<li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li>
<li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li>
<li class=""><a href="/api">API</a></li>
<li class=""><a href="/mtproto">Protocol</a></li>
<li class=""><a href="/schema">Schema</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix">
<div class="dev_page">
<div id="dev_page_content_wrap" class=" ">
<div class="dev_page_bread_crumbs"><ul class="breadcrumb clearfix"><li><a href="/widgets" >Widgets</a></li><i class="icon icon-breadcrumb-divider"></i><li><a href="/widgets/share" >Sharing Button</a></li></ul></div>
<h1 id="dev_page_title">Sharing Button</h1>
<div id="dev_page_content"><p>A Telegram <strong>Sharing Button</strong> is an easy way to let users forward content from your website or app to their <strong>friends</strong>, <a href="https://telegram.org/tour/channels"><strong>Channels</strong></a> or <a href="https://telegram.org/blog/albums-saved-messages#saved-messages"><strong>Saved Messages</strong></a> on Telegram.</p>
<div class="blog_image_wrap blog_medium_image_wrap">
<a href="/file/464001548/2/Ug-7BpYHOGI.51801/f0095722cd99a34a46" target="_blank"><img src="/file/464001511/3/yrhjSo2FPDw.14020/b040084e8ad9951a4b" title="TITLE" alt="TITLE" srcset="/file/464001548/2/Ug-7BpYHOGI.51801/f0095722cd99a34a46 , 2x" /></a>
</div>
<p>When a user presses the button, Telegram asks them to choose a chat, group or channel where your link will be shared. You can also add some text that describes the link the user will be able to edit it before sending the message. </p>
<div class="blog_image_wrap blog_medium_image_wrap">
<a href="/file/464001274/2/e1tzJ2HkJOk.156878/ca3fda3984e764eee4" target="_blank"><img src="/file/464001467/1/aAY6bzDmuCI.37875/076ad2c2586eca3c06" title="TITLE" alt="TITLE" srcset="/file/464001274/2/e1tzJ2HkJOk.156878/ca3fda3984e764eee4 , 2x" /></a>
</div>
<blockquote>
<p>Check out posts on the <a href="https://telegram.org/blog">Telegram Blog</a> for working examples of sharing buttons.</p>
</blockquote>
<h3><a class="anchor" name="adding-telegram-sharing-buttons-to-your-website" href="#adding-telegram-sharing-buttons-to-your-website"><i class="anchor-icon"></i></a>Adding Telegram sharing buttons to your website</h3>
<h4><a class="anchor" name="widget-constructor" href="#widget-constructor"><i class="anchor-icon"></i></a>Widget Constructor</h4>
<p>Use this constructor to get embeddable code for your website.</p>
<p><br/></p>
<p><form class="form-horizontal form-telegram clearfix" id="share_widget_config">
<div class="form-group">
<label class="col-md-3 control-label">URL to Share:</label>
<div class="col-md-6">
<div class="textfield-item">
<input id="share_url" name="share_url" type="text" class="form-control" placeholder="Page link, e.g. https://telegram.org/" onchange="updateWidget()" onblur="updateWidget()">
<div class="textfield-item-underline"></div>
<span class="textfield-item-error" id="share_url_error"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Optional Comment:</label>
<div class="col-md-6">
<div class="textfield-item">
<input id="share_comment" name="share_comment" type="text" class="form-control" placeholder="Check this out&#33;" onchange="updateWidget()" onblur="updateWidget()">
<div class="textfield-item-underline"></div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Button Size:</label>
<div class="col-md-6">
<label class="radio-item radio-item-block">
<input type="radio" class="radio" name="button_size" value="" onchange="updateWidget()" checked />
<span class="radio-input ripple-handler"><span class="ripple-mask"><span class="ripple"></span></span><span class="radio-input-icon"></span></span><span class="radio-label">Medium</span>
</label>
<label class="radio-item radio-item-block">
<input type="radio" class="radio" name="button_size" value="large" onchange="updateWidget()" />
<span class="radio-input ripple-handler"><span class="ripple-mask"><span class="ripple"></span></span><span class="radio-input-icon"></span></span><span class="radio-label">Large</span>
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Button Text:</label>
<div class="col-md-6">
<label class="radio-item radio-item-block">
<input type="radio" class="radio" name="button_text" value="" onchange="updateWidget()" checked />
<span class="radio-input ripple-handler"><span class="ripple-mask"><span class="ripple"></span></span><span class="radio-input-icon"></span></span><span class="radio-label">Share</span>
</label>
<label class="radio-item radio-item-block">
<input type="radio" class="radio" name="button_text" value="notext" onchange="updateWidget()" />
<span class="radio-input ripple-handler"><span class="ripple-mask"><span class="ripple"></span></span><span class="radio-input-icon"></span></span><span class="radio-label">No Text</span>
</label>
</div>
</div>
<div class="form-group">
<label for="embed_code" class="col-md-3 control-label">Embed Code:</label>
<div class="col-md-6">
<textarea id="embed_code" class="form-control embed_code" rows="5" readonly onclick="this.select();"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<div class="widget_container" id="widget_container"></div>
</div>
</div>
</form></p>
<h4><a class="anchor" name="custom-buttons" href="#custom-buttons"><i class="anchor-icon"></i></a>Custom buttons</h4>
<p>Feel free to create your own custom UI for the button. The only thing you need to make it work is to point the user to this URL on click:</p>
<pre><code>https://t.me/share/url?url={url}&amp;text={text}</code></pre>
<p>where <code>{url}</code> is the URL the user will be sharing and <code>{text}</code> is an optional description that will be included with the link. Both values should be <a href="https://en.wikipedia.org/wiki/Percent-encoding">URL-encoded</a>.</p>
<p>Here is a sample code for PHP:</p>
<pre><code>/**
* @param string $url Absolute URL to share, e.g. &quot;https://example.com/path/to/article?with=params&quot;
* @param string $text Optional comment to share URL with, e.g. &quot;Check out this article!&quot;
* @return string Button HTML markup, feel free to modify to your taste
*/
function telegramForwardButton($url, $text = &#39;&#39;) {
$share_url = &#39;https://t.me/share/url?url=&#39;.rawurlencode($url).&#39;&amp;text=&#39;.rawurlencode($text);
return &quot;&lt;a href=\&quot;{$share_url}\&quot;&gt;Share&lt;/a&gt;&quot;;
}</code></pre>
<p>You are welcome to use the <a href="https://telegram.org/press#telegram-logos">Telegram Logos</a> in your custom button design.</p>
<h4><a class="anchor" name="integrations-and-libraries" href="#integrations-and-libraries"><i class="anchor-icon"></i></a>Integrations and libraries</h4>
<ul>
<li><a href="https://en.blog.wordpress.com/2016/04/13/new-on-wordpress-com-sharing-buttons-for-whatsapp-telegram-and-skype/">Sharing buttons on WordPress.com blogs</a></li>
<li><a href="https://www.addtoany.com/blog/new-share-buttons-and-icons-sms-telegram-google-classroom-github/">AddToAny share buttons</a></li>
</ul>
<p>If you have a library, plugin or integration script for Telegram sharing buttons, please contact <a href="https://t.me/botsupport">@BotSupport</a> and we&#39;ll add you to this list.</p>
</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="//telegram.org/faq">About</a></h5>
<ul>
<li><a href="//telegram.org/faq">FAQ</a></li>
<li><a href="//telegram.org/blog">Blog</a></li>
<li><a href="//telegram.org/jobs">Jobs</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5>
<ul>
<li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li>
<li><a href="//telegram.org/dl/android">Android</a></li>
<li><a href="//telegram.org/dl/wp">Windows Phone</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/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="//telegram.org/dl/web">Web-browser</a></li>
</ul>
</div>
<div class="footer_column footer_column_platform">
<h5><a href="/">Platform</a></h5>
<ul>
<li><a href="/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="//telegram.org/faq">About</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/blog">Blog</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps">Apps</a></h5>
</div>
<div class="footer_column">
<h5><a href="/">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>
</div>
<script src="/js/main.js?43"></script>
<script src="/js/jquery.min.js?1"></script>
<script src="/js/jquery-ui.min.js?1"></script>
<script src="/js/bootstrap.min.js?1"></script>
<script>function updateWidget() {
var form = $('#share_widget_config').get(0);
var tfi = $('#share_url').parents('.textfield-item');
var share_url = $('#share_url').val() || 'https://core.telegram.org/widgets/share',
match;
var share_comment = $('#share_comment').val() || '';
if (!share_url.match(/^(?:(?:https?):\/\/)?.+\//i)) {
tfi.addClass('is-invalid');
$('#share_url_error').html("URL is invalid");
$('#share_url').one('input', function() {
tfi.removeClass('is-invalid');
});
return;
}
var button_size = form.button_size.value;
var button_text = form.button_text.value;
tfi.removeClass('is-invalid');
var code = '<script async src="https://telegram.org/js/telegram-widget.js?15" data-telegram-share-url="' + escapeHTML(share_url) + '"' + (share_comment ? ' data-comment="' + escapeHTML(share_comment) + '"' : '') + (button_size ? ' data-size="' + escapeHTML(button_size) + '"' : '') + (button_text ? ' data-text="' + escapeHTML(button_text) + '"' : '') + '><\/script>';
$('#embed_code').val(code);
$('#embed_code').height(0);
$('#embed_code').height($('#embed_code').get(0).scrollHeight);
if (window.lastWidgetCode != code) {
window.lastWidgetCode = code;
$('#widget_container').html(code);
}
}
updateWidget();
initRipple();
backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>