mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-12-28 23:38:26 +01:00
253 lines
13 KiB
HTML
253 lines
13 KiB
HTML
<!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://blogfork.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="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/bootstrap-extra.css?2" rel="stylesheet">
|
||
|
||
<link href="/css/telegram.css?230" 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!" 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}&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. "https://example.com/path/to/article?with=params"
|
||
* @param string $text Optional comment to share URL with, e.g. "Check out this article!"
|
||
* @return string Button HTML markup, feel free to modify to your taste
|
||
*/
|
||
function telegramForwardButton($url, $text = '') {
|
||
$share_url = 'https://t.me/share/url?url='.rawurlencode($url).'&text='.rawurlencode($text);
|
||
return "<a href=\"{$share_url}\">Share</a>";
|
||
}</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'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?46"></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?19" 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>
|
||
|