Mobile App Development iOS Tutorial 2020: Share to Instagram Stories Like Spotify 

iOS Tutorial 2020: Share to Instagram Stories Like Spotify 

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:

ios deveoper indonesia mobile application development image view spotify project ui
UIView spotifyShareImageView

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!

ios developer indonesia mobile application development spotify example project
Example How It will Look Like in Instagram Story

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.

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

More articles

Latest article

Implementasi REST API di iOS Development menggunakan Alamofire dan SwiftyJSON

iOS Development – Tentang REST API Bagi seorang developer, mungkin sudah tidak asing lagi...

GITS Expert Talks: Guide to Building a Learning Organization

In 1995, Peter Senge coined the term of a Learning Organization. He defines it as a company that facilitates learning of its...

GITS Webinar: How to Build UI UX Portfolio that Stand Out

Apa saja yang harus disiapkan UI/UX designer dalam membuat portfolio? Setelah kamu membuat UI design, lalu bagaimana cara mendokumentasikan...

12 Pelajaran dalam GITS 12 Tahun

GITS genap berumur 12 tahun pada 13 September ini. Ini juga tandanya saya sudah 2 tahun lebih 1...

Customer Loyalty Program yang Cocok untuk Masa Pandemi COVID-19

Customer loyalty program atau program loyalitas kepada pelanggan adalah tentang bagaimana menghargai pelanggan. Kemudian, pada akhirnya, pelanggan yang...