<h1>Preparing your blog for Telegram Instant View (IV)</h1>
<p>If you are looking into making your website/blog more appealing for your 
customers, you can look into how social media/messengers are presenting 
your content to customers. Luckily, some of them allow you to control that 
process a bit. Let&#39;s dive into Telegram Instant Views and follow their 
<a href="https://instantview.telegram.org/">official tutorial</a>.</p>
<h2>Pre-requisites:</h2>
<ol>
<li>Have an account in Telegram</li>
<li>Have a publicly accessible website</li>
</ol>
<h2>Example of implementation of Telegram IV</h2>
<p>When we are starting to work on Telegram IV, we need to know the HTML part that 
we want to display and which section/domain we want to be understandable by IV 
system. 
First, we need to define the version of IV, by <code>~version: &quot;2.1&quot;</code>. 
Then, we will limit IV to work only on all links, which are located on <a href="https://decodeapps.pp.ua/blog">https://decodeapps.pp.ua/blog</a>,
we will do that by using <a href="https://instantview.telegram.org/docs#path">?path</a> condition. 
Every DeCODE blog post has an &lt;h1&gt; tag, we can use it for the title of IV. Desciption 
we will extract using the XPath specification, and for the date display - we will use the function <code>@datetime</code>
provided by Telegram IV engine. </p>
<pre><code>body: //div[has-class(&quot;content&quot;)]
title: $body//h1
description: /html/head/meta[@name=&quot;description&quot;]/@content
@datetime(0): ($body//span)[1]
published_date: $@
</code></pre><p>If you will also define <code>channel</code> property, you will also display a link to 
your public Telegram channel
![/blog/channel-join-button.png](Telegram channel join button)</p>
<p>When you will declare <code>published_date</code>, you will have something like this: 
![/blog/date-parsed.png](Published date of Instant View)</p>
<p>In order to remove all elements, which you don&#39;t want to show in IV, you can 
use <code>@remove</code> function.</p>
<h2>Complete code for Telegram IV</h2>
<pre><code>~version: &quot;2.1&quot;

?path: /blog/.+

channel: &quot;@decode_news&quot;
body: //div[has-class(&quot;content&quot;)]
title: $body//h1
description: /html/head/meta[@name=&quot;description&quot;]/@content
@datetime(0): ($body//span)[1]
published_date: $@

&lt;figure&gt;: $body//p[.//img]

@remove: //div[@id=&quot;tags&quot;]
@remove: ($body//span)[1]
@remove: //div[@id=&quot;social_shares&quot;]
</code></pre><p>Photo by <a href="https://unsplash.com/@pluyar?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Shane Aldendorff</a> on <a href="https://unsplash.com/photos/gray-and-black-metal-electronic-device-lot-3AzL-IR3v7Y?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></p>
