All Posts

Displaying an Instagram feed with Gatsby, part 1

In this three-part tutorial, I’ll show you how to build the Instagram gallery that you can see on my About page.

For Part 1 of the tutorial, you’ll need:

1) Get an Instagram access token

In order to get our posts into GraphQL, we’ll use the gatsby-source-instagram-all plugin, which requires an access token from Instagram.

  • Go to the Instagram Developer Portal and click the Register Your Application button. If you aren’t already logged in, you’ll be prompted to do so.
  • In the Developer Signup form, fill in the URL for your website and a description of what you want to do with their API, then hit Submit.
  • Click Manage Clients in the top navigation menu. Click the Register a New Client button.
  • Fill in the Application Name and Description fields. I named mine “GatsbyJS Display” and gave it the description “Instagram feed for my site”.
  • Fill in the URL for your website in the Website URL.
  • We’re going to use our local development server’s URL in the Valid redirect URIs field. For my setup, it’s ”http://localhost:8000”.
  • Fill in the Contact email field and click Register.

If the form submitted successfully, you should see a message and the details for your new client.

Note that there’s a string displayed called Client ID. We’ll need to have this ID in a later step to copy to our clipboard.

  • Click the Manage button in the upper right corner of the details block.
  • Click the Security tab. Uncheck Disable implicit OAuth:.
  • Click the Sandbox tab and ensure that your account is listed as admin. Click the Update Client button.

Keep the Manage Client page up in your browser.

Next, we’re going to start up our local Gatsby development server in order to generate the access token using the Client ID.

  • I start my local development server with “gatsby develop”; use whatever command you already use to get yours up and running.
  • Open a new tab in your browser and paste the following URL into the address bar. Replace YOURCLIENTID with your ID from the Manage Client page. Replace http://localhost:8000 with the URL of your local development server.
https://www.instagram.com/oauth/authorize/?client_id=YOURCLIENTID&redirect_uri=http://localhost:8000&response_type=token&scope=public_content

If everything worked, you should see an Instagram screen that says “This app is in sandbox mode and can only be authorized by sandbox users.”

Click the Authorize button.

You should then be redirected to your local development site. A long string of letters, numbers, and periods should appended to the localhost URL in the address bar - it should look something like this:

http://localhost:8000/#access_token=12345678910.0123456a.1234567a1234b1234c

Grab everything that comes after “access_token=” and paste it somewhere for safekeeping - that’s your access key.

Next, we’re going to set up the Gatsby plugin that will pull in our posts.

2) Add gatsby-source-instagram-all & gatsby-image

We’re going to add two plugins to our Gatsby site to grab and render our Instagram posts. The gatsby-source-instagram-all plugin enables us to use the Instagram API as a data source for GraphQL, and the gatsby-image plugin provides a React component that we’ll use to render optimized versions of our Instagram photos.

Go to the gatsby-source-instagram-all plugin documentation and follow the installation and configuration steps there.

Next, add the gatsby-image plugin using whatever package manager you use for your site. I use yarn, so I’ll install it with:

yarn add gatsby-image

3) Creating the Instagram component

In your components folder, create a new folder for your Instagram component. I’m going to name mine “Instagram”.

My Gatsby starter uses default exports, so first I’ll create an index.js file.

// index.js
export { default } from './Instagram';

Next, I’ll create the basic template for the display widget. I’ve adapted some of the JSX and GraphQL code from the demo repo provided by the creator of gatsby-source-instagram-all.

// Instagram.js
import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
import Image from 'gatsby-image';

const Instagram = () => (
  <StaticQuery
    query={graphql`
      query InstagramPosts {
        allInstagramContent(limit: 12) {
          edges {
            node {
              link
              localImage {
                childImageSharp {
                  fluid(maxHeight: 500, maxWidth: 500 quality: 50) {
                    ...GatsbyImageSharpFluid_withWebp_tracedSVG
                  }
                }
              }
              images {
                standard_resolution {
                  width
                  height
                  url
                }
                low_resolution {
                  url
                }
              }
            }
          }
        }
      }
    `}
    render={(data) => (
      <div>
        {
          data.allInstagramContent.edges.map((item, i) => (
            item.node.localImage ? (
              <div key={i}>
                <Image
                  fluid={item.node.localImage.childImageSharp.fluid}
                />
              </div>
            ) : (<div></div>)
          ))
        }
      </div>
    )}
  />
);

export default Instagram;

I can then import and add the component to my existing page template. When I reload a page, I can see 20 of my last Instagram posts being loaded.

Instagram posts loaded into a page template
Instagram posts loaded into a page template

What’s next

In Part 2 of this tutorial, we’ll manipulate the component’s template to create a responsive grid.

In Part 3, we’ll insert the component into Markdown. I’ll also list some housekeeping items and gotchas that you may encounter after you implement this component on your site.