✦Best Coloring ideas Insights

Embed Instagram Stories Today: How & Why

By

Imagine boosting your social media presence by incorporating engaging, ephemeral content directly into your website or blog. Embedding Instagram stories can add an interactive layer to your platform, giving users a reason to stay longer and engage more. But how exactly do you make this happen? Let's dive into the world of Instagram story embedding, its benefits, and step-by-step guides for both technicians and non-tech users.

Before we start, let's briefly discuss why embedding Instagram stories could be a game-changer. It allows you to showcase your brand's lifestyle, share behind-the-scenes content, or even display user-generated content, all while keeping your website dynamic and fresh. Now, let's get rolling.

Embedding Instagram Stories: A Technical Approach

For web developers and those comfortable with a bit of coding, here's how you can embed Instagram stories directly into your website. Note that you'll need to generate an embed token first, which acts as your key to displaying the stories.

tianziyu moodboard solo (2/6)
tianziyu moodboard solo (2/6)
the instagram app on an iphone screen with texting and icons in different colors
the instagram app on an iphone screen with texting and icons in different colors
an aerial view of a forest with trees
an aerial view of a forest with trees

To generate an embed token, log in to your Instagram Business or Creator account on the web. Then, navigate to your profile, click on 'Edit Profile', and scroll down to find 'Embeds'. Here, you can generate a新 token.

Using the Instagram JS SDK

The Instagram JavaScript (JS) SDK is a powerful tool that allows you to interact with Instagram's API. Here's how you can use it to embed stories:

the person is sitting down with their feet up
the person is sitting down with their feet up
two people are sitting on the ground and one is holding up a large piece of luggage
two people are sitting on the ground and one is holding up a large piece of luggage
the screen shot shows many different images with words on them, including an image of a man
the screen shot shows many different images with words on them, including an image of a man

1. Include the SDK in your project using the script tag: ``. 2. Initialize the SDK with your app ID, access token, and user ID. Note that you can find your user ID by Inspecting the Network tab of your Instagram profile on the web. 3. Use the `instagramEmbed` function to embed the stories, making sure to replace `USER_ID` with your actual user ID and `BLOCK` with the div you want to use for embedding. Here's an example: ``

Using the Instagram OEmbed API

Another way to embed stories is by using the Instagram OEmbed API, which allows external applications to retrieve a post's embed code. Here's a step-by-step guide:

1. Visit to explore Instagram's OEmbed endpoint. 2. Replace the `https://oembed.com/embed.js` script with Instagram's official OEmbed script: ``. 3. Call the `embed` function where you want the story to be displayed, replacing `'ID'` with the story's unique ID found in the URL. Here's an example: ``

stories idea
stories idea
sims selphie
sims selphie
the sun is setting over the ocean with waves
the sun is setting over the ocean with waves
a man standing in front of a building next to two red bins with arrows pointing towards them
a man standing in front of a building next to two red bins with arrows pointing towards them
a collage of photos with flowers and mountains in the background, including two people
a collage of photos with flowers and mountains in the background, including two people
instagram story template inspo<3
instagram story template inspo<3

Embedding Instagram Stories: Non-Technical Approach

If you're not tech-savvy, relief is at hand. With third-party tools, you can still embed Instagram stories without touching a lick of code. Let's explore a popular free tool, EmbedPlus.

EmbedPlus offers a simple, user-friendly interface where you can add your story's direct link, customize the display, and generate the embed code. Just copy and paste the resulting code into your website or blog.

Using EmbedPlus

To use EmbedPlus, simply visit the website () and follow these three steps:

the screen shot shows several different images
the screen shot shows several different images
the text reads, what's you favorite summer activity? on an iphone screen
the text reads, what's you favorite summer activity? on an iphone screen
a collage of photos with the words what do you want to see more of here?
a collage of photos with the words what do you want to see more of here?
a collage of photos with words and pictures on them that read feb rua try
a collage of photos with words and pictures on them that read feb rua try
  • Paste the direct link of the story you want to embed in the provided field. You can find the link by first clicking on the 'Three Dots' in the story's top right corner, then selecting 'Share to...', and finally copying the link.
  • Customize the display by choosing the width, height, and background color of your embedded story.
  • Copy the generated embed code and paste it into your webpage or blog post.

And there you have it! Whether you're a seasoned developer or a social media manager, embedding Instagram stories on your website or blog is now a breeze. So, go ahead, give it a shot, and watch as your online presence transforms into a dynamic, engaging space. Happy embedding!