Preparing your blog for Telegram Instant View (IV)

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's dive into Telegram Instant Views and follow their official tutorial.

Pre-requisites:

1. Have an account in Telegram
2. Have a publicly accessible website

Example of implementation of Telegram IV

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 ~version: "2.1". Then, we will limit IV to work only on all links, which are located on https://decodeapps.pp.ua/blog, we will do that by using ?path condition. Every DeCODE blog post has an <h1> 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 @datetime provided by Telegram IV engine.

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

If you will also define channel property, you will also display a link to your public Telegram channel 

When you will declare published_date, you will have something like this: 

In order to remove all elements, which you don't want to show in IV, you can use @remove function.

Complete code for Telegram IV

~version: "2.1"

?path: /blog/.+

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

<figure>: $body//p[.//img]

@remove: //div[@id="tags"]
@remove: ($body//span)[1]
@remove: //div[@id="social_shares"]

Photo by Shane Aldendorff on Unsplash