<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample Templates - 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/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><li class="active">Sample Templates</li></ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<main class="rules 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><a href="/">Intro</a></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 class="active"><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&#33;</span>
  </span>
</div>
</section>
    </div>
    <div class="col-sm-9 col-sm-pull-3 col-lg-7 col-lg-pull-3">
      <div class="content">
        <section>
  <h3>Sample Templates</h3>
  <p class="about-text">In this section, you can check out the exact same templates that we&#39;re currently using to generate Instant View pages for posts on <b>Medium</b>, <b>Telegra.ph</b>, and the <b>Telegram Blog</b>. We&#39;ve added many comments to these templates, so they literally speak for themselves.</p>
  
</section><section data-section="medium.com">
  <h3>
  <a class="section-header" href="/samples/medium.com/">medium.com</a><span class="header-count">7</span>
</h3>
  <a class="list-group-row" href="/samples/medium.com/"><div class="list-group-item iv-icon-before list-group-item-success" style="width: 100%;">
  <div class="list-group-item-body">
    <h4 class="list-group-item-heading"><b>7 pages</b></h4>
    <p class="list-group-item-text">Not modified</p>
  </div>
</div></a>
  <div class="list-group list-group-template hide">
    <a class="list-group-item iv-icon-before list-group-item-success" href="/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2F%40_cmdv_%2Fi-want-to-learn-javascript-in-2015-e96cd85ad225">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225
    </h4>
    <p class="list-group-item-text">
      Want to learn JavaScript ?
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2F%40durov%2Fhow-to-hack-telegram-43dc9e6c5ac2">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://medium.com/@durov/how-to-hack-telegram-43dc9e6c5ac2
    </h4>
    <p class="list-group-item-text">
      How to “hack” Telegram
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2F%40ev%2Fwelcome-to-medium-9e53ca408c48">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://medium.com/@ev/welcome-to-medium-9e53ca408c48
    </h4>
    <p class="list-group-item-text">
      Welcome to Medium
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2F%40ev%2Fwriting-in-medium-df8eac9f4a5e">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://medium.com/@ev/writing-in-medium-df8eac9f4a5e
    </h4>
    <p class="list-group-item-text">
      Writing in Medium
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2F%40frisch%2Fmath-the-elections-over-can-we-please-move-on-20b2ad1b6088">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://medium.com/@frisch/math-the-elections-over-can-we-please-move-on-20b2ad1b6088
    </h4>
    <p class="list-group-item-text">
      Math: The Election’s Over. Can We Please Move On?
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2Fcharged-tech%2Fapple-just-told-the-world-it-has-no-idea-who-the-mac-is-for-722a2438389b">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://medium.com/charged-tech/apple-just-told-the-world-it-has-no-idea-who-the-mac-is-for-722a2438389b
    </h4>
    <p class="list-group-item-text">
      Apple just told the world it has no idea who the Mac is for
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2Fmatter%2Fthe-terrifying-true-story-of-the-garbage-that-could-kill-the-whole-human-race-b17eebd6d54">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://medium.com/matter/the-terrifying-true-story-of-the-garbage-that-could-kill-the-whole-human-race-b17eebd6d54
    </h4>
    <p class="list-group-item-text">
      The terrifying true story of the garbage that could kill the whole human race
    </p>
  </div>
</a>
    
  </div>
</section><section data-section="telegra.ph">
  <h3>
  <a class="section-header" href="/samples/telegra.ph/">telegra.ph</a><span class="header-count">2</span>
</h3>
  <a class="list-group-row" href="/samples/telegra.ph/"><div class="list-group-item iv-icon-before list-group-item-success" style="width: 100%;">
  <div class="list-group-item-body">
    <h4 class="list-group-item-heading"><b>2 pages</b></h4>
    <p class="list-group-item-text">Not modified</p>
  </div>
</div></a>
  <div class="list-group list-group-template hide">
    <a class="list-group-item iv-icon-before list-group-item-success" href="/samples/telegra.ph/?url=https%3A%2F%2Ftelegra.ph%2FGifs-FAQ">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://telegra.ph/Gifs-FAQ
    </h4>
    <p class="list-group-item-text">
      What are GIFs?
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/telegra.ph/?url=https%3A%2F%2Ftelegra.ph%2Fapi">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://telegra.ph/api
    </h4>
    <p class="list-group-item-text">
      Telegraph API
    </p>
  </div>
</a>
    
  </div>
</section><section data-section="telegram.org">
  <h3>
  <a class="section-header" href="/samples/telegram.org/">telegram.org</a><span class="header-count">7</span>
</h3>
  <a class="list-group-row" href="/samples/telegram.org/"><div class="list-group-item iv-icon-before list-group-item-success" style="width: 100%;">
  <div class="list-group-item-body">
    <h4 class="list-group-item-heading"><b>7 pages</b></h4>
    <p class="list-group-item-text">Not modified</p>
  </div>
</div></a>
  <div class="list-group list-group-template hide">
    <a class="list-group-item iv-icon-before list-group-item-success" href="/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Fandroid-themes">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://telegram.org/blog/android-themes
    </h4>
    <p class="list-group-item-text">
      Custom Themes
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Fcalls">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://telegram.org/blog/calls
    </h4>
    <p class="list-group-item-text">
      Voice Calls: Secure, Crystal-Clear, AI-Powered
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Fdesktop-1-0">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://telegram.org/blog/desktop-1-0
    </h4>
    <p class="list-group-item-text">
      Telegram Desktop reaches version 1.0 – and it&#39;s BEAUTIFUL
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Fedit">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://telegram.org/blog/edit
    </h4>
    <p class="list-group-item-text">
      Edit Messages, New Mentions and More
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Finstant-view">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://telegram.org/blog/instant-view
    </h4>
    <p class="list-group-item-text">
      Instant View, Telegraph, and Other Goodies
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Ftelegraph">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://telegram.org/blog/telegraph
    </h4>
    <p class="list-group-item-text">
      Meet the Telegraph API for Logins and Stats
    </p>
  </div>
</a><a class="list-group-item iv-icon-before list-group-item-success" href="/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Funsend-and-usage">
  <div class="list-group-item-body">
    
    <div class="list-group-item-status">Not modified</div>
    <h4 class="list-group-item-heading">
      https://telegram.org/blog/unsend-and-usage
    </h4>
    <p class="list-group-item-text">
      Unsend Messages, Network Usage, and More
    </p>
  </div>
</a>
    
  </div>
</section>
      </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&#39;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/instantview.js?72"></script>

    <script>App={"baseUrl":"\/api\/samples?hash=telegram-crawler","frameOrigin":"https:\/\/ivwebcontent.telegram.org","lang":{"delete_url_confirmation":"Are you sure you want to stop tracking this URL?","delete_url_confirm_button":"Delete","not_ready_for_contest_alert":"Sorry, this template covers too few article URLs that generate <b>valid Instant View pages<\/b> to enter the contest.<br\/><br\/>Please add at least <b>10 different URLs<\/b> from this website to your template and press <b>Track Changes<\/b> on each of them to make sure they are <a href=\"https:\/\/instantview.telegram.org\/checklist\">processed correctly<\/a> and generate valid pages.","submit_for_contest_confirmation":"Are you sure you want to submit this template for the contest?<br\/><br\/><b>NEW&#33;<\/b> Check out the <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/contest\/\/links\">list of potentially problematic links<\/a> for <b><\/b> and make sure that your template satisfies all the criteria for a <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/checklist\">perfect template<\/a>.<br\/><br\/>You can resubmit a fixed version later, but it will lose its place at the top of the list. All resubmissions will be considered new templates for the purposes of determining the winner.","submit_for_contest_confirm_button":"Confirm","submit_template_confirmation":"Are you sure you want to submit this template? <br\/>Make sure that your template satisfies all the criteria for a <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/checklist\">perfect template<\/a>.<br\/><br\/>Note that it will <b>not<\/b> participate in contest.","submit_template_confirm_button":"Confirm","revoke_from_contest_confirmation":"Are you sure you want to revoke this template from the contest? You can resubmit a new version later, but your template will lose its place at the top of the list.","revoke_from_contest_confirm_button":"Revoke","revoke_template_confirmation":"Are you sure you want to revoke this template?<br\/><br\/>Note that it does <b>not<\/b> participate in contest.","revoke_template_confirm_button":"Revoke","resubmit_for_contest_confirmation":"Are you sure you want to resubmit this template for the contest? Your previous template will lose its place at the top of the list. <br\/><br\/><b>NEW&#33;<\/b> Check out the <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/contest\/\/links\">list of potentially problematic links<\/a> for <b><\/b> and make sure that your new version satisfies all the criteria for a <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/checklist\">perfect template<\/a>.","resubmit_for_contest_confirm_button":"Confirm","resubmit_template_confirmation":"Are you sure you want to resubmit this template? <br\/>Make sure that your template satisfies all the criteria for a <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/checklist\">perfect template<\/a>.<br\/><br\/>Note that it will <b>not<\/b> participate in contest.","resubmit_template_confirm_button":"Confirm"}};
$(window).resize(updateNavBar);updateNavBar();
initRulesList();
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>