Making a social media shareable link with c# .Net Core with “Universal Link” alternative to open up your iPhone app directly
Firstly what are social media sharing links? When you share a link or URL to an article or to some particular content or screen in a mobile app on social media such as WhatsApp or Facebook you get a really tidy sexy preview. For example look at the two links below how they appear on WhatsApp:
https://www.cnn.com/travel/article/asia-hotel-deals-covid-19/index.htmlhttps://www.netflix.com/title/80233783?s=i&trkid=13747225
When I paste the same links directly into this article as I write it Medium has been able to render the first link for CNN but notably not for Netflix.
Netflix (no preview is coming up): https://www.netflix.com/title/80233783?s=i&trkid=13747225
CNN (preview is similar to whats app)
You can read more about how Medium do this here: Embeds . It seems they use the third party https://embed.ly
Now both links in these two examples were generated from the sharing links provided within the CNN and Netflix IOS mobile applications.
However, for CNN what I click on the link from WhatsApp, it simply opens the article in the default browser despite me having the CNN app installed.
On the other hand when I click the Netflix link it opens the iOS Netflix app directly to the title. If you are on a mobile device now, give it a shot!
The ability to have normal internet URLS open on specific screens in iOS applications is known as Universal Links
Without universal links “deep links” would have to be used instead.
For example for Netflix a deep link looks like this:
nflx://www.netflix.com/title/80233783This is how one mobile application can talk to one another. Works well for that use, but not very useful for sharing. Why two problems I can think of:
Firstly, If you were to share the link above in for example an email it’s extremely unlikely for the email client to recognise it as a deep link and it would not work at all. It would simply show text which is not even clickable.
Secondly, using a deep link like the one above would be useless on social media sharing as it only operates locally to your device. It is not a typical internet URL (e.g http://www.mycoolap.com etc), i.e social media applications have no server to pickup the preview like in the examples above.
This is why we “Universal Links” are used, because it solves these problems.
They provide the ability for previews by pulling this information on the internet, and the primary use is to provide a direct link into the mobile application, and finally if the mobile application is not installed, you will be directed in the normal way to your default browser.
Whilst this article is focused on iOS the same thing is available on the Android and this is known as “Android App Links”
So what’s the problem with Universal Links. Well firstly you have to successfully get them registered with Apple and maintain the configuration and only changes can be made in new builds as well as updating the hosted configuration file. Even then there may be other problems stopping it working.
Take back control!
The solution I am about to present is simple, clear, robust and provides beautifully rendered shareable links simulating what Universal Links do without all the fuss.
Firstly, create a template HTML file say called share-template.html. Then at run time you will simply replace the {variables} with the relevant data.
The meta data that the social media applications use to generate the preview is entirely taken from the <head> meta data.
Obviously if you wish to actually show useful data on a website should the application not be installed then you will need something in the <body>.
However, if this is the case you will most likely need to redirect the request to your main website or return the website html itself.
Or copy and paste from below
<html>
<head prefix="og: http://ogp.me/ns#">
<title>{title}</title><meta name="description" content="{description}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="Slurp" content="NOODP" />
<meta name="Slurp" content="NOYDIR" />
<meta name="theme-color" content="#525050" />
<meta property="og:title" content="{title}">
<meta property="og:description" content="{description}">
<meta property="og:type" content="product">
<meta property="og:site_name" content="mycoolapp/>
<meta property="og:locale" content="en_GB" />
<meta property="og:url" content="{url}">
<meta property="og:image:alt" content="{title}" />
<meta property="og:image:secure_url" itemprop="image" content="{image-share}">
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta property="og:updated_time" content="{updated}" />
<meta property="fb:app_id" content="xxxxxxx">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@mycoolapp">
<meta name="twitter:creator" content="@mycoolapp">
<meta name="twitter:title" content="{title}">
<meta name="twitter:description" content="{description}">
<meta name="twitter:image" content="{image-share}">
<meta name="twitter:image:src" content="{image-share}">
<meta name="twitter:image:alt" content="{title}" />
<meta name="twitter:domain" content="www.MyCoolSite.co">
<meta name="apple-mobile-web-app-title" content="mycoolapp">
<meta name="application-name" content="MyCoolSite">
<meta name="msapplication-TileImage" content="mycoolapp">
<meta name="msapplication-TileColor" content="#bb1919">
<meta name="mobile-web-app-capable" content="yes">
</head>
<body>
<div><b>{description}</b></div>
<img src="{image}" alt="{title}" width="400" height="400">
</body>
</html>So now how to handle requests to the end point of the shareable link?
Remember we want the meta data to be returned in all cases, except when users on an iPhone actually click the link we want the actual application to open.
Let says the shareable link is:
https://www.mycoolapp.com/share/profile/80233783The deep link to our application migh be
mycoolapp:///profile?userid=80233783Simple, when the request hits our server if its coming from a browser on an iPhone we redirect the user to the deep link, otherwise we return the HTML.
For example in c# .net core add a method to your controller like this:
i.e If the link comes from a web browser on an iPhone the user will be redirected straight to the app, otherwise the HTML with all the juicy meta data will be returned and social media will render it nicely.
Obviously this can be extended to handle other devices like Android’s or even return different meta data depending on the origin of the request.
For example, when you first paste such a link in WhatsApp, it goes off and reads the meta data, i.e makes a request to the server. When this happens the User-Agent field in the header will include the fact its come from WhatsApp.
For my usage I simply required the header to be returned in all cases except when its from a browser on the iPhone so that I could redirect the user to the application.
No registering Universal Links with Apple, this is simple and just works.
Enjoy.
