mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-11-23 15:58:27 +01:00
297 lines
20 KiB
HTML
297 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Instant View</title>
|
||
|
||
<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?241" rel="stylesheet">
|
||
<link href="/css/codemirror.css?1" rel="stylesheet">
|
||
<link href="/css/instantview.css?115" rel="stylesheet">
|
||
|
||
</head>
|
||
<body class="no-transition">
|
||
<header>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||
<div class="header-wrap">
|
||
<div id="header-panel" class="header-panel">
|
||
<div class="header-breadcrumb header-breadcrumb-simple">
|
||
<ol id="breadcrumb" class="header-nav breadcrumb"><li class="iv-logo"><a href="/"><i class="iv-icon"></i><span class="iv-logo-title">Instant View</span></a></li></ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main class="intro container">
|
||
<div class="row">
|
||
<div class="col-sm-3 col-sm-push-9 col-lg-offset-1 col-lg-3 col-lg-push-7">
|
||
<section class="nav-menu">
|
||
<ul class="nav nav-pills nav-stacked"><li class="active"><a href="/">Intro</a><div id="dev_side_nav_cont"></div></li><li><a href="/templates">Templates</a></li><li><a href="/checklist">Checklist</a></li><li><a href="/contest/winners2017">2017 Contest Winners</a></li><li><a href="/contest/winners2019">2019 Contest Winners</a></li><li class="divider"></li><li><a href="/samples/">Sample Templates</a></li><li><a href="/my/" data-need-auth>My Templates</a></li><li><a href="/docs">Manual</a></li></ul>
|
||
<div class="nav-footer">
|
||
<a class="logged-link" href="/auth" data-need-auth>Login</a>
|
||
<span class="logged">
|
||
<span class="logged-label">Hello, anonymous!</span>
|
||
</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="col-sm-9 col-sm-pull-3 col-lg-7 col-lg-pull-3">
|
||
<div class="content">
|
||
<div id="dev_page_content_wrap" class=" ">
|
||
<div class="dev_page_bread_crumbs"></div>
|
||
<h1 id="dev_page_title">Instant Views Explained</h1>
|
||
|
||
<div id="dev_page_content"><!-- scroll_nav -->
|
||
|
||
<div class="dev_side_image">
|
||
<a href="/file/811140067/3/6oS3A6aSzxU.261217/1d6f75b81ed67c983a" target="_blank"><img src="/file/811140890/2/3WnXjPnynwU.52493/709f815bf5f24bff9c" title="Instant View. Click for hi-res picture">
|
||
</a></div>
|
||
|
||
<p><a href="https://telegram.org/blog/instant-view">Instant View</a> allows Telegram users to view articles from around the Web in a consistent way, with zero loading time. When you get a link to an article via Telegram, simply tap the <strong>Instant View</strong> button, and the page will open instantly.</p>
|
||
<p>With Instant View, Telegram users can enjoy articles from any mass media or blogs in a uniform and easily readable way. Instant View pages support text and media of any type and work great even if the original website was not optimized for mobile devices.</p>
|
||
<p>On top of this, Instant View pages are extremely lightweight and are cached on the Telegram servers, so they load instantly on pretty much any connection — hence the name. No more waiting for clunky websites to load, now you can get the good stuff right away!</p>
|
||
<p>And the best part is that webmasters don't need to change anything on their websites for Instant Views to work.</p>
|
||
<div class="blog_2images_wrap">
|
||
<div class="blog_image_wrap">
|
||
<a href="/file/811140347/1/iYFvGV-SW4o.184311/18c4a43fda01b92735" target="_blank"><img src="/file/811140347/1/iYFvGV-SW4o.184311/18c4a43fda01b92735" title="Instant View Button"/></a>
|
||
<p>Instant View Button</p>
|
||
</div>
|
||
<div class="blog_image_wrap">
|
||
<a href="/file/811140915/2/bVBQHilQshY.84355/0ead38bc9a0136a38e" target="_blank"><img src="/file/811140915/2/bVBQHilQshY.84355/0ead38bc9a0136a38e" title="Instant View Page"/></a>
|
||
<p>Instant View Page</p> </div>
|
||
</div>
|
||
|
||
<h3><a class="anchor-link" href="#how-does-this-work"><i class="anchor-icon"></i></a><a class="anchor" name="how-does-this-work"></a>How does this work?</h3>
|
||
<p>When you share a link via Telegram and a <a href="https://telegram.org/blog/link-preview">link preview</a> is generated, our Instant View bot also checks if it has an <strong>Instant View Template</strong> for that website. Templates are sets of instructions we call <strong>rules</strong> that teach the IV bot to build instant view pages for particular domains or URLs.</p>
|
||
<p>If a template exists for the link, the bot uses it to find the relevant content on the page (headings, text, media, embedded elements), remove clutter, and create a slim and beautiful Instant View page.</p>
|
||
<p>Anyone can use our <strong>Instant View Editor</strong> to create templates. Once a template for a URL is <a href="#publishing-templates">approved by our team</a>, all Telegram users will get the option to view the page in the <strong>Instant View</strong> format whenever they see a link to it on Telegram.</p>
|
||
<p>If you publish your content on Telegram yourself, you don‘t even need to wait for us to approve your template. You can just send specially formatted links to your subscribers, and they’ll get Instant View pages built using your template right away.</p>
|
||
<p><a href="#publishing-templates">Read More About Publishing Templates »</a></p>
|
||
<h4><a class="anchor-link" href="#join-buttons"><i class="anchor-icon"></i></a><a class="anchor" name="join-buttons"></a>Join buttons</h4>
|
||
<p>Another added bonus if you have a channel is that you can direct users to <strong>join</strong> your channel from the Instant View pages built from your articles. </p>
|
||
<div class="blog_image_wrap">
|
||
<a href="/file/811140131/2/rmN-DZ-bP0U.76048/ffd647c1c9d33532a2" target="_blank"><img src="/file/811140131/2/rmN-DZ-bP0U.76048/ffd647c1c9d33532a2" title="Join Button"/></a>
|
||
<p>Join Button</p> </div>
|
||
|
||
<p>For this to work, the template must contain a <code>channel</code> property that holds a link to your channel. <a href="/docs#instant-view-format">More in the docs »</a></p>
|
||
<h3><a class="anchor-link" href="#instant-view-editor"><i class="anchor-icon"></i></a><a class="anchor" name="instant-view-editor"></a>Instant View Editor</h3>
|
||
<p>Telegram's Instant View Editor allows you to create and test templates for any domain. To begin, just go to <a href="/my">My Templates</a>, type a target URL for your Instant View template into the box, and hit ‘enter’. This will open the editor. The source page will be displayed on the left.</p>
|
||
<blockquote>
|
||
<p><strong>Tip:</strong> Use the <em>Developer Tools</em> in your browser (e.g. <em>Inspect</em> mode in Chrome) to study the HTML markup of the page.</p>
|
||
</blockquote>
|
||
<div>
|
||
<a href="/file/811140020/2/8E3vmEN_Jlw.185118/f36256f7768563cf37" target="_blank"><img src="/file/811140020/2/8E3vmEN_Jlw.185118/f36256f7768563cf37" title="Behold the instant view editor" style="max-width: 600px" class="dev_page_image" /></a><br>
|
||
</div>
|
||
|
||
<p>The middle section of the page is where you create your template for the chosen domain name or URL. Templates consist of simple instructions to our IV bot we call <strong>rules</strong>. You can later study the syntax in detail <a href="/docs">here</a>. Once you've saved your rules for the page (<code>cmd + S</code> or <code>ctrl + S</code> in the Rules window), the window on the right will display the Instant View page that the IV bot would create based on the current instructions. </p>
|
||
<blockquote>
|
||
<p>Note the <strong>status line</strong> at the bottom of the page — it displays the result of the last operation. This is also where you'll find the output of the <a href="/docs#debug">@debug</a> function:</p>
|
||
</blockquote>
|
||
<div>
|
||
<a href="/file/811140578/2/58axEeROh6Y.21862/b89167fbe7c9efc160" target="_blank"><img src="/file/811140578/2/58axEeROh6Y.21862/b89167fbe7c9efc160" title="Debug console at the bottom of the screen" class="dev_page_image" style="max-width: 600px" /></a>
|
||
</div>
|
||
|
||
<h4><a class="anchor-link" href="#sample-templates"><i class="anchor-icon"></i></a><a class="anchor" name="sample-templates"></a>Sample templates</h4>
|
||
<p>If you'd like an example, you can check out the <a href="/samples/"><strong>exact same templates</strong></a> that we're currently using to generate Instant View pages for posts on <a href="/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2F%40ev%2Fwelcome-to-medium-9e53ca408c48">Medium</a>, <a href="/samples/telegra.ph/?url=http:%2F%2Ftelegra.ph%2Fapi">Telegra.ph</a>, and the <a href="/samples/telegram.org/?url=https:%2F%2Ftelegram.org%2Fblog%2Fandroid-themes">Telegram Blog</a>. We've added many comments to these templates, so they literally speak for themselves.</p>
|
||
<p>Feel free to experiment with them and see what changes. Don‘t worry, your changes won’t be applied to the actual Instant View pages that regular Telegram users can see.</p>
|
||
<h3><a class="anchor-link" href="#templates-tutorial"><i class="anchor-icon"></i></a><a class="anchor" name="templates-tutorial"></a>Templates tutorial</h3>
|
||
<p>When creating an Instant View template, you have four main objectives:</p>
|
||
<ul>
|
||
<li>Instant View pages must only be generated for pages that <strong>need</strong> them.</li>
|
||
<li>All <strong>essential content</strong> from the source page must be represented.</li>
|
||
<li>All <strong>unnecessary elements</strong> must be eliminated from the Instant View page.</li>
|
||
<li>Your template must work well with <strong>any</strong> of the pages it covers.</li>
|
||
</ul>
|
||
<p>Accordingly, one of the ways to create a template is to follow these steps:</p>
|
||
<h4><a class="anchor-link" href="#step-1-aim-your-template"><i class="anchor-icon"></i></a><a class="anchor" name="step-1-aim-your-template"></a>Step 1. Aim your template</h4>
|
||
<p>Instant View pages work best with relatively static articles. On the other hand, the main page of a news site that contains ever-changing lists of links to new articles would hardly benefit from the IV treatment.</p>
|
||
<p>For the first step, you will likely use <a href="/docs#conditions">conditions</a> to clearly define which parts of the target website will and will not be covered by your template.</p>
|
||
<h4><a class="anchor-link" href="#step-2-grab-the-essentials"><i class="anchor-icon"></i></a><a class="anchor" name="step-2-grab-the-essentials"></a>Step 2. Grab the essentials</h4>
|
||
<p>Now it's time to do some real business. An Instant View page requires at least two <a href="/docs#properties">properties</a> to be created: a <strong>title</strong> and a <strong>body</strong>. Take a close look at the target article and make sure that all important elements are carried over to the IV page in a format <a href="/docs#supported-types">supported</a> by the Telegram apps.</p>
|
||
<p>At this stage, you may need to use <a href="/docs#functions">functions</a> to transform some elements before they are transferred. By the time you're done, your IV page should show the entire text of the article, along with all the headings and subheadings, quotes, cover and other photos, videos, and other kinds of embedded content from the source page.</p>
|
||
<h4><a class="anchor-link" href="#step-3-remove-the-rest"><i class="anchor-icon"></i></a><a class="anchor" name="step-3-remove-the-rest"></a>Step 3. Remove the rest</h4>
|
||
<p>Salvage the remaining useful bits, then use the <a href="/docs#remove">@remove</a> <a href="/docs#functions">function</a> to drop the rest. By now you should have a clean and slim IV page that displays the pure content and none of the fluff. </p>
|
||
<h4><a class="anchor-link" href="#step-4-refine-your-template"><i class="anchor-icon"></i></a><a class="anchor" name="step-4-refine-your-template"></a>Step 4. Refine your template</h4>
|
||
<p>At this stage, we advise you to leave the familiar confines of the page you were using for testing and check out different pages from your target website. See if any pages that don't deserve IVs are getting them — and whether IV pages are missing for any that do deserve them.</p>
|
||
<p>Also, check whether pages with irregular elements are processed correctly. Pay special attention to ensure that various types of media, embedded content, quotes, and separators are all displayed nicely. Check 5-10 different links and make the relevant adjustments.</p>
|
||
<blockquote>
|
||
<p>See also: <a href="/checklist">Our Perfect Template Checklist »</a></p>
|
||
</blockquote>
|
||
<p>Naturally, this is just a brief outline of what you could do — Instant View pages offer limitless possibilities.</p>
|
||
<h4><a class="anchor-link" href="#tracking-changes"><i class="anchor-icon"></i></a><a class="anchor" name="tracking-changes"></a>Tracking changes</h4>
|
||
<p>Once you're <a href="#step-4-refine-your-template">satisfied</a> with your template's generated IV pages, press the <strong>Track Changes</strong> button. If modified template rules are subsequently applied, they can now be checked across all applicable IV pages within the system. </p>
|
||
<div class="blog_image_wrap">
|
||
<a href="/file/811140791/3/JoaXZvppPQ0.22684/d2bc3ee38083b9517f" target="_blank"><img src="/file/811140791/3/JoaXZvppPQ0.22684/d2bc3ee38083b9517f" title="Track Changes"/></a>
|
||
<p>Track Changes</p>
|
||
</div>
|
||
|
||
<p>After Track Changes is enabled, editing your template will not immediately check for changes across all pages. Instead, when you're happy with the currently generated IV page, and no warnings are shown, click <strong>Mark as Checked</strong> to see if your changes broke anything on the other IV pages impacted by your template. </p>
|
||
<div class="blog_image_wrap">
|
||
<a href="/file/811140724/3/7MpYm6TT6JY.20019/cd3d7eeba2cf200083" target="_blank"><img src="/file/811140724/3/7MpYm6TT6JY.20019/cd3d7eeba2cf200083" title="Pages Modified"/></a>
|
||
<p>Pages Modified</p> </div>
|
||
|
||
<p>If any changes are detected, the status line will display the difference and the result:</p>
|
||
<div class="blog_image_wrap">
|
||
<a href="/file/811140753/1/FlwvFWDwgMA.33431/3d865bbd31175986a0" target="_blank"><img src="/file/811140753/1/FlwvFWDwgMA.33431/3d865bbd31175986a0" title="Changes Detected"/></a>
|
||
<p>Changes Detected</p> </div>
|
||
|
||
|
||
<blockquote>
|
||
<p>Take care that your changes don‘t break pages that already had good IV pages. There’s a handy indicator at the top of the page that shows the status of the pages relevant for your template. As long as it's <strong>green</strong>, everything's fine.</p>
|
||
</blockquote>
|
||
<h3><a class="anchor-link" href="#publishing-templates"><i class="anchor-icon"></i></a><a class="anchor" name="publishing-templates"></a>Publishing templates</h3>
|
||
<p>If the Instant View page has been processed successfully, you'll see a <strong>View in Telegram</strong> button in the top right corner – you can use it to view the resulting page in-app.</p>
|
||
<p><strong>For your own audience</strong></p>
|
||
<p>Note that if you send the resulting <code>t.me/iv?url=...&rhash=...</code> link to other Telegram users, they will see an Instant View page built using your template (the <em>rhash</em> parameter in the link determines which template is used to create the page). This means that, as a website owner, you can create a template for your page and publish <code>t.me/iv?url=...</code> links with the corresponding <em>rhash</em> to your Telegram channel — and your subscribers will be able to view your articles in the Instant View format right away.</p>
|
||
<p><strong>For all Telegram users</strong></p>
|
||
<p>If you'd like your template to become truly public and seen by all users, regardless of the link they get, the template will need to be approved by the Telegram team.</p>
|
||
<hr>
|
||
<blockquote>
|
||
<p>And that‘s it, you’re now ready to move on to the <a href="/docs">full instant view documentation</a>.<br>Don't forget that you can also check out our <a href="/samples">annotated sample templates</a>.</p>
|
||
</blockquote>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main><div class="popup-container login-popup-container hide" id="login-popup-container">
|
||
<div class="popup">
|
||
<div class="popup-body">
|
||
<section>
|
||
<h2>Log In</h2>
|
||
<p>Log in here to create Instant View templates. Please enter your <b>phone number</b> in the <a target="_blank" rel="noopener" href="https://telegram.org/faq#login-and-sms">international format</a> and we will send a confirmation message to your account via Telegram.</p>
|
||
|
||
<div id="login-alert"></div>
|
||
<form id="send-form" class="login-form" onsubmit="return requestConfirmation(event);">
|
||
<div class="form-group">
|
||
<input type="tel" class="form-control iv-form-control input-lg" id="phone-number" placeholder="+12223334455" autocomplete="off"/>
|
||
</div>
|
||
<div class="popup-buttons">
|
||
<a class="btn btn-link btn-lg login-cancel-btn">Cancel</a><!--
|
||
--><button type="submit" class="btn btn-link btn-lg">Next</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div id="login-form" class="hide">
|
||
<div class="form-group">
|
||
<span class="form-control iv-form-control input input-lg input-disabled"><strong id="phone-number-field"></strong> (<a class="login-back" href="/auth">Incorrect?</a>)</span>
|
||
<p class="help-block dots-animated">We've just sent you a message.<br/>Please confirm access via Telegram</p>
|
||
</div>
|
||
<div class="popup-buttons">
|
||
<a class="btn btn-link btn-lg login-cancel-btn">Cancel</a><!--
|
||
--><a class="btn btn-link btn-lg login-back">Back</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/jquery.min.js?1"></script>
|
||
<script src="/js/bootstrap.min.js"></script>
|
||
<script src="/js/main.js?47"></script>
|
||
<script src="/js/codemirror/codemirror.js?1"></script>
|
||
<script src="/js/codemirror/simple.js?1"></script>
|
||
<script src="/js/codemirror/runmode.js?1"></script>
|
||
<script src="/js/codemirror-instantview.js?21"></script>
|
||
<script src="/js/instantview.js?72"></script>
|
||
|
||
<script>openPopup('#login-popup-container');
|
||
window.initDevPageNav&&initDevPageNav();
|
||
$(window).resize(updateNavBar);updateNavBar();
|
||
$("pre").addClass("cm-s-default").each(function(){CodeMirror.runMode($(this).text(),"instantview",this);});
|
||
function showLoginError(error_text) {
|
||
$('#login-alert').html('<div class="alert alert-danger"> <a class="close" data-dismiss="alert" href="#">×</a>' + error_text + ' </div>').show();
|
||
}
|
||
function requestConfirmation(event) {
|
||
event.preventDefault();
|
||
$('#login-alert').hide();
|
||
var phone = $('#phone-number').val();
|
||
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: '/auth/request',
|
||
data: {
|
||
phone: phone
|
||
},
|
||
success: function(result) {
|
||
$('#phone-number-field').text(phone);
|
||
$('#send-form').addClass('hide');
|
||
$('#login-form').removeClass('hide');
|
||
checkAuth(result.temp_session);
|
||
},
|
||
error: function(xhr) {
|
||
showLoginError(xhr.responseText || 'Server error');
|
||
},
|
||
dataType: 'json'
|
||
});
|
||
return false;
|
||
}
|
||
function cancelConfirmation(event) {
|
||
event && event.preventDefault();
|
||
$('#login-alert').hide();
|
||
$('#phone-number-field').text('');
|
||
$('#send-form').removeClass('hide');
|
||
$('#login-form').addClass('hide');
|
||
$('#phone-number').focus();
|
||
clearTimeout(window.authTimeout);
|
||
return false;
|
||
}
|
||
function checkAuth(temp_session) {
|
||
clearTimeout(window.authTimeout);
|
||
window.authTimeout = setTimeout(function doCheckAuth() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: '/auth/login',
|
||
data: {
|
||
temp_session: temp_session
|
||
},
|
||
success: function(result) {
|
||
if (result) {
|
||
location.reload();
|
||
} else {
|
||
checkAuth(temp_session);
|
||
}
|
||
},
|
||
error: function (xhr) {
|
||
showLoginError(xhr.responseText || 'Server error');
|
||
},
|
||
dataType: 'json'
|
||
});
|
||
}, 700);
|
||
}
|
||
$('#login-popup-container').on('popup:open', function() {
|
||
$('#phone-number').focus();
|
||
});
|
||
$('#login-popup-container').on('popup:close', function() {
|
||
cancelConfirmation();
|
||
if (location.pathname == '/auth') {
|
||
window.history && history.replaceState(null, null, '/');
|
||
}
|
||
});
|
||
App.unauth = true;
|
||
$('a[data-need-auth]').click(function(e) {
|
||
e.preventDefault();
|
||
openPopup('#login-popup-container');
|
||
});
|
||
$('#login-popup-container .login-cancel-btn').click(function(e) {
|
||
e.preventDefault();
|
||
closePopup('#login-popup-container');
|
||
});
|
||
$('.login-back').click(cancelConfirmation);
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|