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

Overview

Installation

https://github.com/SwapnanilDhol/IGStoryKit

Prerequisites

Getting started

Understanding how IGKit works

IGData

  • 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

  • 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

  • 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

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

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

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

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

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.

•21 • WWDC ’21, ’20, ’19 Scholar •GSoC 2020 with VLC •iOS Engineer •Airplane and Space Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store