Support Twitter and Telegram link unfurling

[hesterbruikman]

Problem

Using a chat key, shared outside of Status, is not as convenient as it can be. Reducing any barriers to allow users to 'promote' Status by sharing their chat key can increase acquisition.

join.status.im currently supports Twitter cards, OpenGraph and iFramely with a generic https://status.im/img/share-get-status.png image. When a chat key is added, no description or thumbnail is included

To make it easier for people to act on a join link being shared on Twitter or Telegram, the thumbnail should be a image link to a png of the QR code image.

User story

• As a user I want to scan a QR code straight from my Twitter feed or Telegram chat, because this costs me less effort and I can instantly see what the link is about.
• As a user I want to share my Status chat key, visually demonstrating that I've joined Status, because I want it to look cool if I'm going to convince my network to move to a new tool

Solution

When sharing a https://join.status.im/u/... link on Telegram or Twitter, the QR code should be included as a image link to a png of the QR.

Meta data

cc @j-zerah for review Title: Join me on Status Description: Private communication. Available on mobile: iOS, Android and Desktop (Beta): Mac, Linux, or Windows Thumbnail: https://status.im/img/ chatkey

Next steps

Styling of the png, to include a Status wordmark/tagline and identicon of the chat key

[jakubgs]

I assume this should just work if we set the Open Graph properties like we do on the main site: https://github.com/status-im/status.im/blob/84dfcf04ed8b877c84253e2f13d55d02e13b15ba/themes/navy/layout/partial/head.ejs#L35-L41 Example:

    <meta property="og:site_name" content="Status" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Status - Private, Secure Communication" />
    <meta property="og:description" content="Status brings the power of Ethereum into your pocket by combining a messenger, crypto-wallet, and Web3 browser." />
    <meta property="og:url" content="https://status.im/index.html" /> 
    <meta property="og:image" content="https://status.im/img/share.png" />

[jakubgs]

This might be a pain in the ass, because by default a QR code is square, so it gets cropped/obscured: Used https://www.opengraph.xyz/ to check.

[jakubgs]

Done and done: https://www.opengraph.xyz/url/https:%2F%2Fjoin.status.im%2Fu%2Fjakubgs.eth/

[jakubgs]

We can now adjust how the image looks in a separate PR. The relevant part is: https://github.com/status-im/universal-links-handler/blob/33bc461ca2637bfad34efeac9854f7278f3ba19f/routes/index.js#L191-L202 I add the Status logo in the SVG XML. We can adjust that to include some other things.