`archive.camball.io`

[camball]

Instagram Embed

Got an initial embed working on my local:

How I got it working:

1. On a public Instagram profile like my @cameron_archives, get the embed code for a post

2. Followed these instructions to modify the code Instagram gives you when you copy the embed HTML:

   <script async src="//www.instagram.com/embed.js"></script>

   to

   <script async src="https://www.instagram.com/embed.js"></script>

   If you don't do this step, it never displays content and simply displays "View this post on Instagram"

   UPDATE: No clue how, but it now works without that bypass. Leaving out the https: for now.

---

Scrap the following sections; the above is by far the easiest way to implement this. I don't think the following methods of pulling videos via their Graph API or accessing their oEmbed API are even available to me since I am not a registered business.

---

Data Source

Well, as of 21 days ago (at time of writing), the Instagram Basic Display API was officially deprecated. Sucks.

Apparently the Instagram Graph API (relevant subset called the "Instagram API with Facebook Login") will still work, specifically the Business Discovery API.

After more research, it looks like the Instagram oEmbed API will work for my use case.

• [x] Register as a Meta Developer and Create an App (instructions)
• [x] Get test usage working in the Meta Graph API Explorer
• [ ] Verify myself as a business by going here (instructions) – I am stuck here. I tried to verify myself but I don't have any legal documents proving I am a business... because I'm not a legal business entity, lol. Idk how to continue here.
• [ ] ...

Graph API Explorer Testing

In the Meta Graph API Explorer, I attempted to retrieve embed content for this @cameron_archives post link with the Oembed Video endpoint by trying the following and got the following error:

GET https://graph.facebook.com/v20.0/oembed_video?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FDANi4ukxUe1%2F&access_token=EAAY4Vm..."

{
  "error": {
    "message": "(#10) To use 'Oembed Read', your use of this endpoint must be reviewed and approved by Facebook. To submit this 'Oembed Read' feature for review please read our documentation on reviewable features: https://developers.facebook.com/docs/apps/review.",
    "type": "OAuthException",
    "code": 10,
    "fbtrace_id": "A_zXPAdIcTSvx996ctqeiWR"
  }
}

Once I get API access, I can use their JavaScript API to make calls in a syntactically cleaner way:

FB.api(
  '/oembed_video',
  'GET',
  {"url":"https://www.instagram.com/p/DANi4ukxUe1/"},
  function(response) {
      // Insert your code here
  }
);

Video Playing

• Play videos in the HTML video tag
• Want videos to autoplay. To get around browsers' autoplay
  • Don't forget to add the playsinline attribute to the video tag, as it is required for enabling autoplay in Safari
• Apply the video tag's muted attribute by default to mute the video on page load, and have a button that bounces subtly on the screen prompting the user to unmute, which would be a sticky choice until the user's session is over

<video
  controls
  autoplay
  playsinline
  muted
>
  <source src="/videos/example.mp4" type="video/mp4" />
  Video not supported in your browser; see <a href="https://www.instagram.com/cameron_archives/">@cameron_archives</a>.
</video>