Broken Instagram Embeds - failed oembed api call

[bradgarropy]

• gatsby-remark-embedder version: 4.1.0
• node version: 12.18.3
• npm (or yarn) version: 6.14.8

---

Relevant code or config

{
    resolve: "gatsby-remark-embedder",
    options: {
        customTransformers: [spotify, youtube, facebook],
        services: {
            Instagram: {
                accessToken: process.env.FACEBOOK_ACCESS_TOKEN,
            },
        },
    },
},

What you did

I upgraded to the latest version of gatsby-remark-embedder, and created a Facebook accessToken. Then I modified the gatsby-config.js file to include the proper configuration for Instagram, which includes an environment variable stored in Netlify. Finally, I included a link to an Instagram post in a markdown file to be parsed by gatsby-remark-embedder.

https://www.instagram.com/p/CCGyTbdHtck

What happened

The following error appeared while processing 'https://www.instagram.com/p/CCCzGImHE4Z':

Request to https://graph.facebook.com/v8.0/instagram_oembed?url=https://www.instagram.com/p/CCCzGImHE4Z&access_token=<redacted>&omitscript=true returned non-OK status (400)

   3 |   aspectRatio
   4 |   src
   5 |   srcSet
   6 |   srcWebp
   7 |   srcSetWebp
   8 |   sizes
   9 | }
  10 |
  11 | query dProjectsdailytexascountryComsrctemplatespostJs3935968862($slug: String!) {
  12 |   markdownRemark(frontmatter: {slug: {eq: $slug}}) {
> 13 |     html
     |     ^
  14 |     frontmatter {
  15 |       slug
  16 |       title
  17 |       date(formatString: "MMMM D, YYYY")
  18 |       tags
  19 |       image {
  20 |         publicURL
  21 |         childImageSharp {
  22 |           fluid(maxWidth: 700) {
  23 |             ...GatsbyImageSharpFluid_withWebp

File path: D:/projects/dailytexascountry.com/src/templates/post.js
Url path: /posts/koe-wetzel-sells-out
Plugin: none

Reproduction repository
https://github.com/bradgarropy/dailytexascountry.com/tree/store

Problem description
Updating to the latest version of gatsby-remark-embedder has broken my Instagram embeds.

Suggested solution
🤷🏼‍♂️

[MichaelDeBoey]

Hey @bradgarropy! 👋

I can't reproduce the error you're getting when using my accessToken.
Could you check the https://graph.facebook.com/v8.0/instagram_oembed?url=https://www.instagram.com/p/CCCzGImHE4Z&access_token=<redacted>&omitscript=true link manually and see what error you're getting there and post the response in the issue please?

I think it's a problem with your accessToken tbh.

[bradgarropy]

@MichaelDeBoey,
Opening the following link.

https://graph.facebook.com/v8.0/instagram_oembed?url=https://www.instagram.com/p/CCGyTbdHtck&access_token=<redacted>&omitscript=true

I get this response.

{
   "error": {
      "message": "(#10) To use this endpoint you must first add the OEMBED product to your app.",
      "type": "OAuthException",
      "code": 10,
      "fbtrace_id": "ATJjR2-HFWb5byRtP8tx7sN"
   }
}

[bradgarropy]

I found that I had to go the My Apps section of the Facebook Developers portal and enable oEmbed by clicking Set Up as shown in the image below.

Now everything is working as expected, thanks so for the support!