Sharing to Instagram Stories – a definitive guide

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 name and stickerAsset.

ContentView.swiftCopy
18struct Wand {
19  let name: String
20  let stickerAsset: String
21}

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.

ContentView.swiftCopy
10fileprivate let wands: [Wand] = [
11    Wand(name: "Dumbledore's Wand", stickerAsset: "dumbledore"),
12    Wand(name: "Potter's Wand", stickerAsset: "potter"),
13    Wand(name: "Granger's Wand", stickerAsset: "granger")
14]

I'll also create a NavigationView and embed a List in it to have some barebones of UI. Nothing fancy.

ContentView.swiftCopy
16    struct ContentView: View {
17      var body: some View {
18    NavigationView {
19    List(wands, id: \.name){ wand in
20      Text(wand.name)
21        }
22    .navigationBarTitle(Text("Ollivanders"), displayMode: .inline)
23    }
24      }
25    }

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.

ContentView.swiftCopy
16    struct ContentView: View {
17        
18        func shareToInstagramStories(
19            stickerImage: String,
20            backgroundTopColor: String = "#7F0909",
21            backgroundBottomColor: String = "#303030"
22        ) {
23            // 1. Get a data object of our UIImage...
24            let stickerImageData = UIImage(named: stickerImage)?.pngData()
25            
26            // 2. Verify if we are able to open instagram-stories URL schema.
27            // If we are able to, let's add our Sticker image to UIPasteboard.
28
29            let urlScheme = URL(string: "instagram-stories://share?source_application=\(Bundle.main.bundleIdentifier ?? "")")
30            
31            if let urlScheme = urlScheme {
32                if UIApplication.shared.canOpenURL(urlScheme) {
33                    
34                    var pasteboardItems: [[String : Any]]? = nil
35                    if let stickerImageData = stickerImageData {
36                        pasteboardItems = [
37                            [
38                                "com.instagram.sharedSticker.stickerImage": stickerImageData,
39                                "com.instagram.sharedSticker.backgroundTopColor": backgroundTopColor,
40                                "com.instagram.sharedSticker.backgroundBottomColor": backgroundBottomColor
41                            ]
42                        ]
43                    }
44                    
45                    // We'll expire these pasteboard items in 5 minutes...
46                    let pasteboardOptions = [
47                        UIPasteboard.OptionsKey.expirationDate: Date().addingTimeInterval(60 * 5)
48                    ]
49                    
50                    if let pasteboardItems = pasteboardItems {
51                        UIPasteboard.general.setItems(pasteboardItems, options: pasteboardOptions)
52                    }
53                    
54                    // 3. Try opening the URL...
55                    UIApplication.shared.open(urlScheme, options: [:], completionHandler: nil)
56                } else {
57                    // App may not be installed. Handle those errors here...
58                    print("Something went wrong. Maybe Instagram is not installed on this device?")
59                }
60            }
61        }
62        
63        var body: some View {
64            NavigationView {
65                List(wands, id: \.name){ wand in
66                    Text(wand.name).onTapGesture {
67                        shareToInstagramStories(stickerImage: wand.stickerAsset)
68                    }
69                }
70                .navigationBarTitle(Text("Ollivanders"), displayMode: .inline)
71            }
72        }
73    }

1. We check if we can open the instagram-stories URL scheme with our application
2. If we can, we move on to create items for UIPasteboard
3. 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.plistCopy
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>instagram-stories</string>
</array>

Phew. That's it. Let's see this badass in action.

Conclusion

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.