IGStoryKit

In this tutorial, we’ll learn how to use the IGStoryKit framework to share stickers with customized background to Instagram Stories.

Overview

IGStoryKit lets you easily share content stickers with different background types to Instagram stories from your iOS and iPadOS apps.

Installation

IGStoryKit is available via Swift Package Manager. To add IGStoryKit simply add this repo’s URL to your project’s package file.

https://github.com/SwapnanilDhol/IGStoryKit

Prerequisites

To follow along with this tutorial, you’ll need some basic knowledge of the Swift Programming Language. You’ll also need Xcode versions supporting iOS 11 and above.

Getting started

Before we start configuring and posting to Instagram stories, we’ll need to create a new entry in the application’s Info.plist file.
Click the Info.plist file in your project hierarchy and create a new Array with the key LSApplicationQueriesSchemes. Expand this entry and add a new item by clicking on the + button on the row. This new item should be named Item0 by default. Set this Item0’s value to instagram-stories. This configures our app to open Instagram stories when we ask it to. Done? Let’s continue.

Understanding how IGKit works

IGData

IGData is a Swift object that defines the data being shared to Instagram stories. It contains the following parameters:

• backgroundType: Defines the BackgroundType of the story. BackgroundType is discussed in detail below.
• colorTop: Defines the top color of the story background. In case of .color background type, the colorTop color is used as a solid color background.
• colorBottom: Defines the bottom color of the story background. Used only in the case of .gradient background type. In conjunction with the colorTop property, Instagram renders a linear gradient as the story background.
• backgroundImage: Defines the background image of the story background. Used only in the case of .imagebackground type.
• contentSticker: Defines a content sticker image property. This sticker can be customized by the user in the Instagram app.

But what exactly is a BackgroundType?

Background Type

BackgroundType is an enum that describes the background type of the Instagram Story. It can be of 4 pre defined types:

• none: No background. This mode requires that the user shares a sticker image content.
• color: A solid color background. The user provides a UIColor value and the IGDispatcher class creates a Instagram story with a solid background color. For this case the user may or may not provide a sticker content image. In case the user doesn’t provide a sticker content image IGDispatcher will only create a story with a solid color background.
• gradient: A linear gradient background. The user provides two UIColor into colorTop and colorBottom while configuring an IGData. The IGDispatcher class then creates an Instagram story with a linear gradient background. For this case, the user may or may not provide a sticker content image. In case the user doesn’t provide a sticker content image IGDispatcher will only create a story with a linear gradient background.
• image: An image background. The user provides an UIImage into the backgroundImage parameter while creating an object of type IGData. The IGDispatcher class then creates an Instagram story with an image background. For this case, the user may or may not provide a sticker content image. In case the user doesn’t provide a sticker content image IGDispatcher will only create a story with an image background.

Small Conclusion

From the above, we can conclude that our coding flow will be as follows

• Create a IGData object and configure it with the parameters provided
• Create an instance of IGDispatcher and initialize it with the created IGData object.
• Start the flow by calling .start() on the IGDispatcher instance.

Testing out a few examples

Case 1: Sticker Image with .none BackgroundType

The .none background type can be used when you only want to share a sticker image and not include a background of any type. It is necessary that the user includes a sticker content card for this BackgroundType else the framework will throw an assertion failure during debug runtime.

To test this out let’s create an instance of IGData and configure it with a .none background type and an SFSymbol as a content sticker image.

let igData = IGData(backgroundType: .none,
                            colorTop: nil,
                            colorBottom: nil,
                            backgroundImage: nil,
                            contentSticker: UIImage(systemName: "sun.min"))

When using the .none BackgroundType, IGStoryKit will ignore all but the contentSticker parameter so you can let them be nil.

Case 2: Sticker Image with .color BackgroundType

The .color background type can be used when you want to include a background of a solid color type. It is not necessary that the user includes a sticker content card for this background type .

Let’s create an instance of IGData and configure it with a .color background type and an SFSymbol as a content sticker image. Pass in an UIColorfor the colorTop parameter.

let igData = IGData(backgroundType: .color,
                            colorTop: .systemOrange,
                            colorBottom: nil,
                            backgroundImage: nil,
                            contentSticker: UIImage(systemName: "sun.min"))

Case 3: Sticker Image with .gradient BackgroundType

The .gradient background type can be used when you want to include a background of a linear gradient type. It is notnecessary that the user includes a sticker content card for this background type.

Let’s create an instance of IGData and configure it with a .color background type and an SFSymbol as a content sticker image. Pass in an UIColorfor the colorTop parameter and another UIColor for the colorBottom parameter.

let igData = IGData(backgroundType: .color,
                            colorTop: .systemOrange,
                            colorBottom: .systemRed,
                            backgroundImage: nil,
                            contentSticker: UIImage(systemName: "sun.min"))

Case 4: Sticker Image with .gradient BackgroundType

The .image background type can be used when you want to include an image as the background of the Instagram Story. It is not necessary that the user includes a sticker content card for this background type.

You can pass in any UIImage to the backgroundImage parameter. Instagram (Facebook) recommends an image of size720x1080 or in the ratio (9:16 or 9:18)

let igData = IGData(backgroundType: .color,
                            colorTop: nil,
                            colorBottom: nil,
                            backgroundImage: nil,
                            contentSticker: UIImage(systemName: "sun.min"))

Starting the sequence

Now create an instance of IGDispatcher and initialize it with an igData object.

let igDispatcher = IGDispatcher(igData: igData)

Now, call .start() on the dispatcher.

igDispatcher.start()

If you’ve followed through with this tutorial, Instagram story should pop right up with your configuration!

https://github.com/swapnanildhol/IGStoryKit

Thank you for reading. If you have any queries feel free to tweet @SwapnanilDhol.