12

I am working on a web app in which some content is generated in the form of text (and will soon include images as well). I want to add a share button which will allow the user to add this content to their Instagram story.

So the flow of this is going to be:

  1. User does something on the website
  2. The website generates some content based on user input
  3. User clicks on "Share on Instagram" and posts it on his/her story

Is there a way to do this using Javascript or an API call like the Twitter share option directly from the HTML ?

I am using Python on the backend (Flask) and JS on the frontend

RishiC
  • 768
  • 1
  • 10
  • 34
  • No answers yet :/, have you found anything on this in the past 8 months? I'm looking for the same thing. – Peter Bejan Jan 24 '21 at 20:06
  • Unfortunately, no. It seems it is only possible to do it from a mobile app, no support for websites yet :( – RishiC Jan 25 '21 at 03:39
  • 3
    I found a way, I replicated the tik-tok logic and I can share images and videos directly opening them in the story camera page, its actually pretty simple and clever+. – Peter Bejan Jan 25 '21 at 22:11
  • 1
    @PeterBejan Any chance you can share your solution? Thanks! – Steph Jan 10 '22 at 11:02

3 Answers3

16

OK, lets make this simple.

The direct answer as found on the official Facebook developers page is no. You can't trigger an API to create an instagram story, as for now only the "read-mode" is supported through API.

But as most things in life you can hack your way around.

You can create a button that says, "share on your instagram stories" and here's what it is gonna do:

  1. Trigger a function on the back-end that creates a screenshot/image or a video of the content you want to share
  2. Send that content to the user so it's the last content they have in the gallery

UPDATE

  1. Trigger the open story camera in Instagram app with this link: instagram://story-camera. (the last content they have will be the content u sent and will be the first thing they see for posting a story)

There is a better solution for the third point:

  1. Trigger the "share story" function through this link: instagram-stories://share. This link redirects you directly to the editing page. If you find a way to POST to this link in your header an image URI coded, it should open it. I've read different code examples and documentation (from instagram dev page) and you can share this content as background (image/video) or sticker. Spotify does something similar by posting the image as a sticker.

It goes without saying that this will work when the website is opened in a phone and not in a desktop browser as in desktop you can't post stories.

Peter Bejan
  • 405
  • 3
  • 13
  • 1
    That's a great work-around. I will try it out – RishiC Jan 26 '21 at 06:36
  • 1
    hi! anyone knows if there is a way to open directly the gallery when clicking on instagram://story-camera? I made this work but I don't think the approach is the most UX friendly so I'm looking for an implementation like that. It should be like: -User click on share on Instagram stories => Opens the gallery on stories => User select the downloaded screen => Share. Thx in advance. – Franco Alemandi Nov 16 '21 at 15:26
  • @Peter Bejan, what exactly do you mean by "Send that content to the user so it's the last content they have in the gallery?" How are you sending it to the user? – TheRealMikeD Nov 16 '21 at 21:02
  • Well, you can treat that button like an export/download link or API or whatever can send a file. – Peter Bejan Nov 17 '21 at 16:04
  • 1
    I think I get that. If it's a download link, then (on iOS for example) the user will still have to choose to save it to photos, files, etc., correct? – TheRealMikeD Nov 17 '21 at 20:46
  • I guess so, it might not be the best solution though, this last part may have better solutions. See how tiktok does it. It automatically selects the content in the story camera mode for instagram. – Peter Bejan Nov 18 '21 at 16:41
  • How can I pass data with `instagram-stories://share`? https://stackoverflow.com/questions/74576064/how-can-i-make-an-instagram-deep-link-to-open-instagram-and-create-with-a-custom – János Nov 25 '22 at 17:53
1

The New York Times has done this.

In iOS, it generates an Instagram Story, with the headline and lede of the respective news article.

To do this, you'll have press the "share" button on an iPhone and then "Instagram Stories."

Auto generated Instagram Story, via The New York Times iOS app

Twitter has also done this for quite a while.

Viktor Elias
  • 11
  • 1
0

Instagram recently released a new feature enabling this functionality on mobile. Please check out this post for details.

Quick summary, you can use the navigator.share API to share images straight from web to Instagram, directly opening a Post, Story, or Message in Instagram with the image included.

bcaspar
  • 163
  • 1
  • 9
  • How did you come up directly to the Instagram share screen (screenshot that you shared in the linked response)? Because when I trigger navigator share method on my mobile web browser I get general sharing menu and I don't know how to open Instagram share screen. This mid step is missing in your answer. – vldmrrdjcc May 03 '23 at 08:36