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.

3 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

GITS Tech Talks: Deployment Manager on Google Cloud Platform

Automate the creation and management of Google Cloud Platform resources using Deployment Manager. Write flexible template and configuration files and use them...

IT Cost Assessment Untuk Enterprise

Dalam sebuah bisnis atau enterprise, banyak hal menyangkut biaya atau pengeluaran yang harus benar-benar diperhatikan. Salah satu hal penting dalam pengelolaan cost...

Strategi IT Cost Reduction untuk Bisnis

Dalam sebuah bisnis biaya yang membengkak dapat menyebabkan bisnis menjadi terhambat. Biaya yang membengkak bisa dari mana saja dan jika tidak dilakukan...

Machine Learning untuk Retail Demand Forecast

Dalam dunia bisnis saat ini teknologi sangat memegang peran penting dalam jalannya sebuah usaha. Di jaman yang serba teknologi ini tentunya industri...

Become a Customer-centric dan Data-driven Retailer

Dalam industri retail, konsumen adalah segalanya. Artinya konsumen merupakan poin penting dalam menjalankan bisnis retail. Pada masa sekarang di mana teknologi sudah...