🚀 Making website Telegram Instant View compatible
Telegram Instant View is a feature that allows users to view web articles within Telegram without opening them in a browser. It reformats articles to fit the Telegram app’s interface, making them easier to read on mobile devices. According to the documentation:
Instant View 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 Instant View button, and the page will open instantly.
However, as of now, it looks like this feature is unavailable for newcomers. It’s quite sad, as I feel IV is greatly underrated, and should be revisited by Telegram Team to ensure its’ availability to developers. But still, there is a workaround to make it work.
What’s the problem?
Shortly, to implement true IV for your website (when you just post a link and an IV button appears), you have to:
- Create a template using their IV editor.
- Publish it and wait for Telegram Team approval.
And maybe it would work (still, such method is questionable), but for many years there has been some problem with review submission. You can Google it yourself; this review system simply doesn’t work.
How to resolve it
If not to consider weird links like t.me/iv?url=...&rhash=... as a decision, the only way to workaround template review is to adapt your site to existing templates. The very first place where I found this method is petro_64’s article. Shortly, you have to use an undocumented tg:site_verification meta tag and make your website fit a specific template.
Your structure should not be exactly the same, just key elements must be accessible by specific XPath queries (which IV template uses). For example, you may have more nesting levels for your headers or body or something else.
Bridgetown / Jekyll Instant View compatibility
As for static website generators, such method should not be a big problem, unless you have some really tricky markup. The only thing which can be difficult is a case when you need to change the markup produced by your .md generator.
For example, my code snippets had markup pre > code, but the IV template recognizes snippets just as pre and inline monospace font as code, so they had conflicts. With Bridgetown, you can fix this using HTML Inspectors (plugins/iv-snippets.rb).
class Builders::PostConclusion < SiteBuilder
def build
inspect_html do |document, resource|
document.query_selector_all("pre.highlight > code").each do |element|
element.parent.add_child(element.inner_html)
element.remove
end
end
end
Also take a look on the other notes: