CODEWITHSUNDEEP
javascriptpythonhtmlinstagram
RishiC
RishiC

Reputation: 826

Share content of a webpage to Instagram story

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

Upvotes: 15

Views: 39006

Answers (4)

Nagendra Yadav
Nagendra Yadav

Reputation: 1

function InstagramShare($url = null){


    // Redirect User to Instagram for Authentication

    if (!isset($_GET['code'])) {
        $authUrl = $this->getInstagramAuthUrl();
        return $this->redirect($authUrl);
    }




    // Handle the Redirect and Exchange Code for Access Token

    $code = $_GET['code'];
    $accessTokenData = $this->getAccessToken($code);
    if (isset($accessTokenData['access_token'])) {



        $shortLivedToken = $accessTokenData['access_token'];
        $longLivedTokenData = $this->getLongLivedToken($shortLivedToken);
        if (isset($longLivedTokenData['access_token'])) {



            $longLivedToken = $longLivedTokenData['access_token'];
            $this->shareStory($longLivedToken, $url);
        } else {
            throw new \Exception('Failed to exchange short-lived token for long-lived token.');
        }



    } 

else {



        throw new \Exception('Failed to retrieve access token.');
    }



}

Upvotes: -1

bcaspar
bcaspar

Reputation: 403

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.

Upvotes: 0

Peter Bejan
Peter Bejan

Reputation: 425

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.

Upvotes: 18

Viktor Elias
Viktor Elias

Reputation: 21

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.

Upvotes: 2

Related Questions