Instagram has over 400 million active users, which is more than that of Twitter. This presents a huge opportunity for brands to market themselves through the visual platform. If you haven't been taking advantage of it, you should!
Those who know me know that I am obsessed with crafting delightful user experiences. As much as value this feature holds for marketers, it also vouches for a pleasing UX. This blog is a rundown of how developers can let users share content on Instagram using deep links. I am assuming you have a new SwiftUI project set up. Let's get coding.
Ollivanders is a wand shop founded in 382 B.C, located in Diagon Alley South Side in London, England. It is owned by the Ollivander family, widely acknowledged to be the best wandmakers in Great Britain. As bizarre as it may sound, this Harry Potter Wand Shop wants the wizards to easily share amazing stickers of their wands across Instagram – in the hope to gain massive virality.
To start with, let's create a model that fits this demo. I'd call it
Wand. Each wand will have a
Wand.swiftView on GitHub
While we are at it, we shall also create some mock data on wands. Here are some assets that we will be using in this demo – best to drag them into your
Assets.xcassets right away.
I'll also create a
NavigationView and embed a
List in it to have some barebones of UI. Nothing fancy.
Not bad, SwiftUI. Now that we have all this done, let's get to the real thing. We shall write some functions to implement deep linking to Instagram Stories.
- We check if we can open the
instagram-storiesURL scheme with our application
- If we can, we move on to create items for
- Once we have those items on
UIPasteboard, we go further and open the URL
If all goes well, Instagram will take things from here and make a sticker out of the asset image.
We will also add things in
Info.plist to let iOS know it is okay for us to open the
instagram-stories URL scheme.
Info.plistView on GitHub
Phew. That's it. Let's see this badass in action.
Ollivanders in action
That's pretty much there is to sharing to Instagram Stories. In production, you can get the image with an API call. This image can be generated at the back using Puppeteer or Jimp or any other tool at your disposal. You can also generate the image on-device using
CGContext. I'll leave those details to you.
Also, here's a link to the repository.