OpenSource/telegram-crawler
OpenSource/telegram-crawler
1
0
Fork 0
mirror of https://github.com/MarshalX/telegram-crawler.git synced 2024-11-28 19:23:11 +01:00
Code Issues Projects Releases Packages Wiki Activity
telegram-crawler/data/web/core.telegram.org/widgets/share.html

254 lines
13 KiB
HTML
Raw Normal View History

Update content of files
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…">
Update content of files
2022-04-21 15:52:36 +02:00
<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" />
Update content of files
2022-02-23 06:45:45 +01:00
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
<link href="/css/bootstrap-extra.css?2" rel="stylesheet">
Update content of files
2023-01-05 19:02:43 +01:00
<link href="/css/telegram.css?234" rel="stylesheet" media="screen">
Update content of files
2022-02-23 06:45:45 +01:00
<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>
Update content of files
2022-09-09 12:10:24 +02:00
<li><a href="//telegram.org/privacy">Privacy</a></li>
Update content of files
2022-09-09 23:58:59 +02:00
<li><a href="//telegram.org/press">Press</a></li>
Update content of files
2022-02-23 06:45:45 +01:00
</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>
Update content of files
2022-09-09 23:58:59 +02:00
<li><a href="//telegram.org/android">Android</a></li>
<li><a href="//telegram.org/dl/web">Mobile Web</a></li>
Update content of files
2022-02-23 06:45:45 +01:00
</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>
Update content of files
2022-12-10 23:50:15 +01:00
<script src="/js/main.js?47"></script>
Update content of files
2022-02-23 06:45:45 +01:00
<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');
Update content of files
2022-10-09 03:45:33 +02:00
var code = '<script async src="https://telegram.org/js/telegram-widget.js?21" 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>';
Update content of files
2022-02-23 06:45:45 +01:00
$('#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>
Reference in a new issue Copy permalink