iOS • 3 min read

Sharing to Instagram Stories – a definitive guide

A rundown on posting your app's content to Instagram Stories.

Ishan

Ishan Chhabra

Software Developer

The Code Cakery Logo

published in

The Code Cakery

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.

Wand.swift

View on GitHub
10struct Wand {
11  let name: String
12  let stickerAsset: String
13}

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.swift

View on GitHub
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.swift

View on GitHub
16struct 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}
Ollivanders UI Mockup

Ollivanders NavigationList

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.swift

View on GitHub
16struct 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.plist

View on GitHub
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>instagram-stories</string>
</array>

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

Ollivanders Demo

Ollivanders 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.

Subscribe to email updates

How'd you rate this thought?

😞😐😃