fix(Instagram): Update Instagram oEmbed endpoint (#148)

BREAKING CHANGE: You'll now need to pass a required `accessToken` option whenever you're using the Instagram service. Check out the Instagram oEmbed access token docs and requirements to know how to get this.
MichaelDeBoey · Oct 20, 2020 · 2880ab1 · 2880ab1
1 parent 4247d4c
commit 2880ab1
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -382,6 +382,39 @@ https://instagram.com/p/B60jPE6J8U-
 
 </details>
 
+#### Options
+
+All options should go under the `Instagram` namespace.
+
+| name        | Type     | Required | Default | Description                                              |
+| ----------- | -------- | -------- | ------- | -------------------------------------------------------- |
+| accessToken | `string` | ✅       |         | An App Access Token (recommended) or Client Access Token |
+
+##### accessToken
+
+To get an App Access Token (recommended) or Client Access Token for the
+Instagram embed, check out the [Instagram oEmbed access token
+docs][instagram-oembed-access-token-docs] and
+[requirements][instagram-oembed-requirements-docs].
+
+The safest way to enter your `accessToken` is to set is as an [environment
+variable][gatsby-environment-variables-docs].
+
+<details>
+<summary><b>Example</b></summary>
+
+```js
+const GatsbyRemarkEmbedderOptions = {
+  services: {
+    Instagram: {
+      accessToken: env.process.INSTAGRAM_ACCESS_TOKEN,
+    },
+  },
+};
+```
+
+</details>
+
 ### Lichess
 
 #### Usage
@@ -863,6 +896,7 @@ MIT
 [codesandbox]: https://codesandbox.io
 [embedded-tweet-docs]: https://developer.twitter.com/web/embedded-tweets
 [gatsby]: https://github.com/gatsbyjs/gatsby
+[gatsby-environment-variables-docs]: https://www.gatsbyjs.com/docs/environment-variables
 [gatsby-https-docs]: https://gatsbyjs.org/docs/local-https
 [gatsby-plugin-instagram-embed]: https://github.com/MichaelDeBoey/gatsby-plugin-instagram-embed
 [gatsby-plugin-mdx]: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-mdx
@@ -871,6 +905,8 @@ MIT
 [gatsby-transformer-remark]: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark
 [giphy]: https://giphy.com
 [instagram]: https://instagram.com
+[instagram-oembed-access-token-docs]: https://developers.facebook.com/docs/instagram/oembed#access-tokens
+[instagram-oembed-requirements-docs]: https://developers.facebook.com/docs/instagram/oembed#requirements
 [kentcdodds.com-repo]: https://github.com/kentcdodds/kentcdodds.com
 [lichess]: https://lichess.org
 [netlify-environment-variables-docs]: https://docs.netlify.com/configure-builds/environment-variables/#deploy-urls-and-metadata

diff --git a/src/__tests__/plugin.js b/src/__tests__/plugin.js
@@ -27,6 +27,9 @@ describe('gatsby-remark-embedder', () => {
       { cache, markdownAST },
       {
         services: {
+          Instagram: {
+            accessToken: 'access-token',
+          },
           Twitch: {
             parent: 'embed.example.com',
           },

diff --git a/src/__tests__/transformers/Instagram.js b/src/__tests__/transformers/Instagram.js
@@ -104,7 +104,9 @@ test('Gets the correct Instagram iframe', async () => {
     `<blockquote class="instagram-media-mocked-fetch-transformer"><div><a href="https://instagram.com/p/B60jPE6J8U-"><p>example</p></a><p>A post shared by <a href="https://instagram.com/michaeldeboey">Michaël De Boey</a> (@michaeldeboey) on<timedatetime="2020-01-02T14:45:30+00:00">Jan 2, 2020 at 6:45am PST</time></p></div></blockquote>`
   );
 
-  const html = await getHTML('https://instagram.com/p/B60jPE6J8U-');
+  const html = await getHTML('https://instagram.com/p/B60jPE6J8U-', {
+    accessToken: 'access-token',
+  });
 
   expect(html).toMatchInlineSnapshot(
     `"<blockquote class=\\"instagram-media-mocked-fetch-transformer\\"><div><a href=\\"https://instagram.com/p/B60jPE6J8U-\\"><p>example</p></a><p>A post shared by <a href=\\"https://instagram.com/michaeldeboey\\">Michaël De Boey</a> (@michaeldeboey) on<timedatetime=\\"2020-01-02T14:45:30+00:00\\">Jan 2, 2020 at 6:45am PST</time></p></div></blockquote>"`
@@ -117,7 +119,16 @@ test('Plugin can transform Instagram links', async () => {
   );
   const markdownAST = getMarkdownASTForFile('Instagram');
 
-  const processedAST = await plugin({ cache, markdownAST });
+  const processedAST = await plugin(
+    { cache, markdownAST },
+    {
+      services: {
+        Instagram: {
+          accessToken: 'access-token',
+        },
+      },
+    }
+  );
 
   expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
     "<https://not-an-instagram-url.com>

diff --git a/src/transformers/Instagram.js b/src/transformers/Instagram.js
@@ -13,7 +13,9 @@ export const shouldTransform = (url) => {
   );
 };
 
-export const getHTML = (url) =>
+export const getHTML = (url, { accessToken }) =>
   fetchOEmbedData(
-    `https://api.instagram.com/oembed?url=${url}&omitscript=true`
+    `https://graph.facebook.com/v8.0/instagram_oembed?url=${url}&access_token=${accessToken}&omitscript=true`
   ).then(({ html }) => html);
+
+export const name = 'Instagram';