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.

2 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!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

More articles

Latest article

GITS Tech Talks: Transform Your Business and Growth with Google Cloud Platform

In the uncertain situation, business leaders are under pressure to prioritize investments and optimize costs to support changing business goals in the...

Strategi Omnichannel di B2B, B2C, juga D2C dan Strategi Marketing

Di dunia bisnis banyak sekali istilah yang perlu Anda kenali. Salah satunya adalah bagaimana melakukan strategi Omnichannel di...

Contoh Aplikasi Loyalty Program atau Loyalty App Indonesia

Ketika menjalankan sebuah bisnis, sangat penting bagi perusahaan Anda untuk memiliki relasi yang baik dengan para pelanggan. Demi kelangsungan bisnis itu sendiri,...

9 Cara Meningkatkan Loyalitas Pelanggan yang Efektif dalam Meningkatkan Pendapatan

Dalam bidang usaha, ada beberapa hal yang penting untuk dioptimalkan. Salah satunya adalah loyalitas pelanggan sehingga Anda yang memiliki usaha atau bisnis...

Ketahui Harga Pembuatan Website E-Commerce dan Aplikasi E-Commerce

Banyaknya orang yang melakukan belanja daring membuat bisnis ini berkembang cukup baik, terutama jika Anda hendak terjun ke bidang tersebut. Namun, ada...