mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-11-24 08:16:34 +01:00
243 lines
12 KiB
HTML
243 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html class="">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Post Widget</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta property="description" content="You can embed messages from public groups and channels anywhere. Here’s what an embed of a Telegram message looks like when…">
|
||
<meta property="og:title" content="Post Widget">
|
||
<meta property="og:image" content="https://blogfork.telegram.org/file/811140747/166d/MNEJA3BlETo.107862/6fe98d36f382b03091">
|
||
<meta property="og:description" content="You can embed messages from public groups and channels anywhere. Here’s what an embed of a Telegram message looks like when…">
|
||
<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/post" >Post Widget</a></li></ul></div>
|
||
<h1 id="dev_page_title">Post Widget</h1>
|
||
|
||
<div id="dev_page_content"><p>You can <strong>embed messages from public groups and channels</strong> anywhere. Here’s what an embed of a Telegram message looks like when included on a web page:</p>
|
||
<div><br>
|
||
<script async src="https://telegram.org/js/telegram-widget.js?1" data-telegram-post="durov/68" data-width="100%"></script>
|
||
<br><br>
|
||
</div>
|
||
|
||
<p>To get the HTML-code for embedding a message, just <strong>open its t.me link</strong> (e.g., <a href="https://t.me/durov/43">t.me/durov/43</a>) in a web browser and click <strong>< > EMBED</strong>:</p>
|
||
<div class="blog_image_wrap">
|
||
<a href="/file/811140747/166d/MNEJA3BlETo.107862/6fe98d36f382b03091" target="_blank"><img src="/file/811140747/166d/MNEJA3BlETo.107862/6fe98d36f382b03091" title="Login on external website" /></a>
|
||
</div>
|
||
|
||
<h3><a class="anchor" name="configure-widget" href="#configure-widget"><i class="anchor-icon"></i></a>Configure widget</h3>
|
||
<p>You can choose more options using the form below.</p>
|
||
<p><form class="form-horizontal form-telegram clearfix" id="post_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, e.g. https://t.me/telegram/83">
|
||
<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">Width:</label>
|
||
<div class="col-md-6">
|
||
<div class="textfield-item" style="width: 50px;">
|
||
<input id="width" name="width" type="text" class="form-control" placeholder="100%" maxlength="4">
|
||
<div class="textfield-item-underline"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-md-3 control-label">Author Photo:</label>
|
||
<div class="col-md-6">
|
||
<label class="radio-item radio-item-block">
|
||
<input type="radio" class="radio" name="author_photo" value="" 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">Auto</span>
|
||
</label>
|
||
<label class="radio-item radio-item-block">
|
||
<input type="radio" class="radio" name="author_photo" value="true" />
|
||
<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">Always show</span>
|
||
</label>
|
||
<label class="radio-item radio-item-block">
|
||
<input type="radio" class="radio" name="author_photo" value="false" />
|
||
<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">Always hide</span>
|
||
</label>
|
||
</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="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>
|
||
</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>
|
||
</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="//telegram.org/press">Press</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>PostWidget.init({"default_link":"https:\/\/t.me\/telegram\/83","link_error":"Invalid post link","widget_script":"https:\/\/telegram.org\/js\/telegram-widget.js?22"});
|
||
backToTopInit("Go up");
|
||
removePreloadInit();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|