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.

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.

4 COMMENTS

  1. Hi Muhammad,
    Thanks for sharing this tutorial, I have implemented this in my app, where user can listen audio track and also share to facebook and instagram story.
    I want to put button in instagram and facebook story called “Play on MyApp” just like spotify does.
    I searched a-lot for this and did not get anything yet, can you please help me out in getting this resolved.
    Thanks
    Ritesh Patel

    • Hi Ritesh,
      Thanks for leaving your comment here! To implement a deeplink button like Spotify, you need to use Facebook Business Manager. Hope it helps!

  2. Hi Muhammad,
    Thanks for sharing this tutorial,

    I want to know how to put button in instagram called “Play on MyApp” just like spotify does. Can please refere me any links regarding this.?

LEAVE A REPLY

Please enter your comment!
Please enter your name here

More articles

Latest article

Creating Widget in iOS: Supporting Different Widget Sizes

How to make app widgets in different sizes? With three different sizes available (small, medium, and large), widgets can display a wide...

Cara Daftar Program dari Kampus Merdeka; Kerja Sama Kemendikbud, Google, GITS.ID, dan Lainnya

Tahukah kamu Kemdikbud (Kementerian Pendidikan dan Kebudayaan) telah meluncurkan program Kampus Merdeka? Nah untuk rekan-rekan mahasiswa yang belum tahu atau berminat mengikuti...

GITS Tech Talks: Best Practice for Migrating from On-Premise to Google Cloud

Are you missing an essential aspect of digital transformation? Organization often spend millions for IT infrastructure to keep confidentiality and data security...

Perancangan dan Implementasi Data Warehouse Perusahaan

Implementasi Data Warehouse - Sebuah perusahaan tentunya membutuhkan data secara khusus yang perlu dikelola dengan sistem dan pengaturan secara khusus pula. Data...

Tentang Data Analytics Tools dan Penerapannya pada Bisnis Perusahaan

Penjelasan Lengkap Data Analytics Tools Fungsi, dan Penerapannya – Dengan makin berkembangnya teknologi, tools dan perangkat yang lain...