Have you ever wondered how Spotify application on iOS and Android are able to share their song, playlist, or an album to Instagram Stories? For you who like to code iOS, no need to keep wondering about it! Let’s read this iOS tutorial and try it yourself!   How to make our application in iOS is able to share content to Instagram story?   Here is how you do it:

1. First thing first, you need to whitelist Instagram’s custom URL scheme in order for your application to use it. To do this, add instagram-stories to the LSApplicationQueriesSchemes key in your application’s Info.plist.
2. Create the content you want to share in an UIView version.
3. Convert or turn your UIView into an UIImage.
4. Share your content as a Sticker Image with a key name: “com.instagram.sharedSticker.stickerImage” on your pasteboardItems code.
5. If you want to add a gradient background, you can add two key names on your pasteboardItems code later on, which are: “com.instagram.sharedSticker.backgroundTopColor”, “com.instagram.sharedSticker.backgroundBottomColor”.

Well, that is pretty much all of it! Now, ready to try! Let’s start this iOS tutorial and turn it into code on XCode!

iOS Tutorial How to Develop Your iOS Application to Share to Instagram Story

1.Open your Info.plist file as a source code. Then, add these items into your Info.plist file:

<key>LSApplicationQueriesSchemes</key>
<array>
   <string>instagram</string>
   <string>instagram-stories</string>
</array>

2. Create the content in an UIView. On this example, we will make one that is the same with what they share on Spotify. This includes an UIImage and an UILabel. It will look like this on the storyboard:

3. Now, let’s turn this UIView into an UIImage with a little magic code. Here is how:

First, you need to create a function to turn UIView to UIImage:

func asImage() -> UIImage {
        if #available(iOS 10.0, *) {
            let renderer = UIGraphicsImageRenderer(bounds: bounds)
            return renderer.image { rendererContext in
                layer.render(in: rendererContext.cgContext)
            }
        } else {
            UIGraphicsBeginImageContext(self.frame.size)
            self.layer.render(in:UIGraphicsGetCurrentContext()!)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return UIImage(cgImage: image!.cgImage!)
        }
 }

After that, you need to define your UIView in your View Controller like this:

var storyStickerToPost = UIImage()let bundle = Bundle(for: NameOfYourUIViewClass.self)
let contentView = UINib(nibName: "NameOfYourUIView", bundle: bundle)
let contentViewToShow = contentView.instantiate(withOwner: self, options: nil)[0] as! NameOfYourUIViewClass// Set your UIView content as Image below
self.storyStickerToPost = newsViewShow.asImage()

Read also: Processing Notification Data Using Notification Service Extension — iOS Mobile Developer Must Read!

4. Now, it is time for you to pass the image/sticker data to the shareToInstagramStories function. Here is the function code:

if let storiesUrl = URL(string: "instagram-stories://share") {
    if UIApplication.shared.canOpenURL(storiesUrl) {
        guard let imageData = UIImagePNGRepresentation(self.storyImg) else { return }
        let pasteboardItems: [String: Any] = [
            "com.instagram.sharedSticker.stickerImage": imageData,
            "com.instagram.sharedSticker.backgroundTopColor": "#636e72",
            "com.instagram.sharedSticker.backgroundBottomColor": "#b2bec3"
        ]
        if #available(iOS 10, *) {
            let pasteboardOptions = [
                UIPasteboard.OptionsKey.expirationDate: Date().addingTimeInterval(300)
            ]
            UIPasteboard.general.setItems([pasteboardItems], options: pasteboardOptions)
            UIApplication.shared.open(storiesUrl, options: [:], completionHandler: nil)
         }
         self.dismiss(animated: true, completion: nil)
    } else {
         self.showMessage(message: "Sorry the application is not installed", error: true)
    }
}

The code above has given you the access to input your image data, also top and bottom gradient color to share to the Instagram stories.

5. Now, let’s give it a try on your own project!

That’s it from me for now. Next up, I will share to you about how to add video as a background to share to Instagram stories content.

Read also: Build iOS Widget Extensions with SwiftUI & How to Make Apps Widget in Different Sizes

Thank you for sticking up until the end of this tutorial! If you have any question or feedback, feel free to put it on the comment section below!

Here is the example project: ios-dev-bdg/share-to-instagram-stories

---

Muhammad Arif Rahman is an iOS Developer at GITS Indonesia.

---

GITS.ID has developed some applications and helped our clients. One of the example is mobile applications for Android and iOS based users, with Toyota. To know more about it, you can access here.