Main page
Blog
Let’s share articles in Telegram instantly!

Let’s share articles in Telegram instantly!

All (243)

APPs (22)

Bitrix24 (84)

CRM (20)

Events (11)

IT News (19)

Magento (14)

Odoo (1)

Projects (38)

Web 3 (21)

4 March 2019

Frontend TeamLead

Let’s share articles in Telegram instantly!

If you still don’t use Telegram, now is the time to start. All users may be interested in the statistics of this non-standard messenger, which indicates the positive dynamics of their popularity. And there are no tricks here: open code and fresh rationalization ideas daily replenish Telegram with new useful features that give an advantage over competitors. Instant page view is one of them.

Fast. Very fast

Telegram instant view is a technology which brief essence is the ability to instantly view all the content of the page to which we give a link, right in the messenger window. The user does not need to wait for the download, go (even automatically) to the browser or even do something at all: click the “ϟ Instant view” button at the bottom of the message and enjoy the view.

The page in this case will be displayed according to the instructions prescribed by you using XPath 1.0 in the Instant view template (IVT) instant view template and the settings of the telegram bot itself.

All this is focused directly on the recipient of information. He will see only the necessary data, not be distracted by the accompanying content, save time and even resources, if this issue is important for users with limited traffic. A valid template will also allow your content to be cached on the Telegram servers.

Let’s try together

Let's create an IVT for arbitrary publication. To do this, you will need a working Telegram application on your mobile or desktop, and in paragraph № 3 of the subsequent instructions you will be asked for the phone number to which the program is registered. It is also desirable to have your own Telegram channel for better viewing of the results, but this is not necessary (in the extreme case, the channel is created in three clicks). That's all for the preparation, now we go to the point. I will take as a basis my previous article from Avivi's blog A pig in a poke and Bitrix24 integration:

First of all we copy a link to the article: https://avivi.pro/en/blog/a-pig-in-a-poke-and-bitrix24-integration/;
Now we open the official documentation;
And actually the service Telegram for creation of IVT. After the transition we specify the telephone number and look in the messenger – there will be a notification.
We enter the copied link to the article in the single field at the page and push Enter:
This action moves us in “sandbox” — a place, where you can see and adapt everything. A simple interface of three columns reflects the original article, in fact a template, where all the “magic” happens and the result obtained.
Now we will work in the second column. First you need to point out the existence of the page we need. If you have Google Chrome like me, feel free to click F12 in the tab with the article, and look for - <head>. I chose a meta-tag that indicates that the article belongs to a blog entry. We register this in IVT.
?exists: /html/head/meta[@content="blogpost"]
How you can see, you can even the needed block with content, for example:
?exists://div[@class="blogpost"]
Now for the bot you need to specify the body of the article, where it will parse the information:
body: //div[@class="blogpost"]
Try to choose the most informative block, eliminating all unnecessary and unnecessary at once. This includes all sorts of banners, menu advertising, etc. - after all, an instant view is needed just to squeeze the most necessary. For comfort, you can later write to the $ body variable:
$body: //div[@class="blogpost"]
And you have the first result in the third column:

On this step you may have a problem with images at this stage: the bot completely refused to parse them and swore an error. But turning to the XPATH documentation, I found a simple solution by changing the <p> tag, in which the image is wrapped, to <div>:
$body//p/img/parent::p

Now is the time to direct the beauty in the template: specify the title, subtitle, date of publication, photo of the author. The bot has already tried for us, but from experience I will say that often he fails to do everything correctly. Sometimes it is prevented by page layout, sometimes by unknown strength. But if you do it manually, you need to do everything right:

cover: //div[@class="blogpost__post"]/img

title: $body//h1[1]

subtitle: “” <!--We don`t have a subtitle --> 

author:  <!--We don`t need this -->

published_date: $body//div[@class="blog-user__date"]/text()

Now we can see very clearly the result of our efforts:

Now we get rid of undesirable elements:

@remove: //div[@class="blogitem__top blogpost__top"]
@remove: //div[@class="socials__share"]

Do not forget to specify (if any) a link for your Telegram-channel. This will be very useful for its advancement, as it will enable those who wish to join in one click. In addition, your knowledge in setting up instant views will play to the benefit of your image:
channel: "@avivipro"
After this a button for joining to it will appear:
Finally when everything’s ready, we generate a link for spreading via the link ‘VIEW IN TELEGRAM’ and we get a needed link. That’s all.

Create by yourself

You may have seen earlier that the “ϟ Instant view” button appears when you share a link to popular sites via Telegram. This is due to the ongoing competition for the creation of IVT, where the Telegram moderators approved the valid templates and they were cached on the server of the cart. If your template is not moderated, there are at least 2 solutions:

To use an API Telegram and to write a bot for sending posts;
To use a ready-made (for example @ControllerBot)