mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-12-12 01:40:59 +01:00
229 lines
12 KiB
HTML
229 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html class="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Discussion Widget</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta property="description" content="You can embed discussions from any public channel on your website. You only need a link to a post with comments to embed…">
|
|
<meta property="og:title" content="Discussion Widget">
|
|
<meta property="og:image" content="">
|
|
<meta property="og:description" content="You can embed discussions from any public channel on your website. You only need a link to a post with comments to embed…">
|
|
<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/core-widgets.css?1" rel="stylesheet">
|
|
|
|
<link href="/css/telegram.css?236" 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/discussion" >Discussion Widget</a></li></ul></div>
|
|
<h1 id="dev_page_title">Discussion Widget</h1>
|
|
|
|
<div id="dev_page_content"><p>You can <strong>embed discussions from any public channel</strong> on your website. You only need a link to a post with comments to embed it together with all discussion. </p>
|
|
<p>If you have a website with articles and a telegram channel where you post links to these articles, you can use this widget to show discussions from that channel on your website. In this case you only need a link to the channel. Discussions will be available on your website as soon as you post a link into the channel. For this to work, you should add the <code><link rel="canonical" href="%page_url%"></code> tag to the page header where <code>%page_url%</code> is the canonical URL of the current page.</p>
|
|
<h3><a class="anchor" name="configure-widget" href="#configure-widget"><i class="anchor-icon"></i></a>Configure widget</h3>
|
|
<p>You can choose options for your widget using the form below.</p>
|
|
<p><form class="form-horizontal form-telegram clearfix" id="discussion_widget_config">
|
|
<div class="form-group">
|
|
<label class="col-md-3 control-label">Link to post:</label>
|
|
<div class="col-md-6">
|
|
<div class="textfield-item">
|
|
<input id="post_link" name="post_link" type="text" class="form-control" placeholder="link to a public post or a channel">
|
|
<div class="textfield-item-underline"></div>
|
|
<span class="textfield-item-error" id="post_link_error"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-md-3 control-label">Comments limit:</label>
|
|
<div class="col-md-2">
|
|
<div class="textfield-item" style="width:100%">
|
|
<input id="comments_limit" name="comments_limit" type="text" autocomplete="off" class="form-control" placeholder="5" maxlength="2">
|
|
<div class="textfield-item-underline"></div>
|
|
</div>
|
|
</div>
|
|
<label class="col-md-2 control-label">Height:</label>
|
|
<div class="col-md-2">
|
|
<div class="textfield-item" style="width:100%">
|
|
<input id="height" name="height" type="text" autocomplete="off" class="form-control" placeholder="auto" maxlength="4">
|
|
<div class="textfield-item-underline"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-md-3 control-label">Accent color:</label>
|
|
<div class="col-md-6">
|
|
<div class="widget-accent-colors">
|
|
<label class="widget-accent-color-item">
|
|
<input type="radio" class="radio" name="color" value="default" checked />
|
|
<div class="widget-color-circle"></div>
|
|
<div class="widget-color-label">Default</div>
|
|
</label>
|
|
<label class="widget-accent-color-item" data-color="13B4C6" data-bg-color="13C5D9" data-dark-color="39C4E8">
|
|
<input type="radio" class="radio" name="color" value="13B4C6" />
|
|
<div class="widget-color-circle" style="background-color: #13C5D9;"></div>
|
|
<div class="widget-color-label">Cyan</div>
|
|
</label>
|
|
<label class="widget-accent-color-item" data-color="29B127" data-bg-color="4CB94E" data-dark-color="72E350">
|
|
<input type="radio" class="radio" name="color" value="29B127" />
|
|
<div class="widget-color-circle" style="background-color: #4CB94E;"></div>
|
|
<div class="widget-color-label">Green</div>
|
|
</label>
|
|
<label class="widget-accent-color-item" data-color="CA9C0E" data-bg-color="E8B824" data-dark-color="F0B138">
|
|
<input type="radio" class="radio" name="color" value="CA9C0E" />
|
|
<div class="widget-color-circle" style="background-color: #E8B824;"></div>
|
|
<div class="widget-color-label">Yellow</div>
|
|
</label>
|
|
<label class="widget-accent-color-item" data-color="E22F38" data-bg-color="F34750" data-dark-color="F95C54">
|
|
<input type="radio" class="radio" name="color" value="E22F38" />
|
|
<div class="widget-color-circle" style="background-color: #F34750;"></div>
|
|
<div class="widget-color-label">Red</div>
|
|
</label>
|
|
<label class="widget-accent-color-item" data-color="343638" data-bg-color="343638" data-dark-color="FFFFFF" data-text="Black" data-dark-text="White">
|
|
<input type="radio" class="radio" name="color" value="343638" />
|
|
<div class="widget-color-circle" style="background-color: #343638;"></div>
|
|
<div class="widget-color-label">Black</div>
|
|
</label>
|
|
<label class="widget-accent-color-item">
|
|
<input type="radio" class="radio" name="color" value="custom">
|
|
<div class="widget-color-circle widget-color-circle-custom" style="color: #F646A4;"></div>
|
|
<div class="widget-color-label widget-color-label-custom">Custom</div>
|
|
<div class="textfield-item widget-accent-color-field-item">
|
|
<input class="form-control widget-accent-color-field" name="customcolor" type="text" autocomplete="off" value="F646A4" maxlength="6">
|
|
<div class="textfield-item-underline"></div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<label class="checkbox-item checkbox-item-block">
|
|
<input type="checkbox" class="checkbox" name="colorful" value="1" />
|
|
<span class="checkbox-input ripple-handler"><span class="ripple-mask"><span class="ripple"></span></span><span class="checkbox-input-icon"></span></span><span class="checkbox-label">Use different colors for names</span>
|
|
</label>
|
|
<label class="checkbox-item checkbox-item-block">
|
|
<input type="checkbox" class="checkbox" name="dark" value="1" />
|
|
<span class="checkbox-input ripple-handler"><span class="ripple-mask"><span class="ripple"></span></span><span class="checkbox-input-icon"></span></span><span class="checkbox-label">Dark theme</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 class="help-block canonical-helper hide">Make sure you have a <code><link rel="canonical" href="%page_url%"></code> tag in the page header with the canonical url of the current page.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-md-offset-1 col-md-10">
|
|
<div class="widget_container row" id="widget_container"></div>
|
|
</div>
|
|
</div>
|
|
</form></p>
|
|
<h3><a class="anchor" name="basic-comments" href="#basic-comments"><i class="anchor-icon"></i></a>Basic comments</h3>
|
|
<p>If you're looking to simply add Telegram comments to <strong>pages on your website</strong>, without linking them with a channel, you can use our <a href="https://comments.app/">basic comments</a> solution.</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/privacy">Privacy</a></li>
|
|
<li><a href="//telegram.org/press">Press</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/android">Android</a></li>
|
|
<li><a href="//telegram.org/dl/web">Mobile Web</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?47"></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 src="/js/core-widgets.js?1"></script>
|
|
|
|
<script>DiscussionWidget.init({"default_link":"https:\/\/t.me\/contest\/198","link_error":"Invalid post link","widget_script":"https:\/\/telegram.org\/js\/telegram-widget.js?22"});
|
|
backToTopInit("Go up");
|
|
removePreloadInit();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|