Back to Posts

Add Instagram Pages to your site

By: Daniel Jimenez | Published on: Apr 07 2020

While working on a site I wanted to add a section where the latest Instagram posts would display. I came across gatsby-source-instagram. gatsby-source-instagram is a source plugin for sourcing data from Instagram.



npm install --save gatsby-source-instagram


      resolve: `gatsby-source-instagram`,
      options: {
        username: `ADD_INSTAGRAM_PROFILE_HERE`,

After the Install start your development Server by running

gatsby develop

Once it starts go to: localhost:8000/___graphql

Build a query for your Instagram Posts

Once you have your query go to the page where your query will go and paste it.

GraphQL Query
Query for the Instagram Posts

Your results will be passed down as props you can console.log(props) to view the result. Of course there are many ways to do this so pick whatever works for you. This was my result.


(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
            id: "B9rpueDpf1W"
            timestamp: 1584120884
            username: "INSTAGRAM_USERNAME"
            likes: 15
            original: ""
            __proto__: Object
            __proto__: Object
    1: {node: {…}}
    2: {node: {…}}
    3: {node: {…}}

After seeing what I had to work with I modified my code and .map() to return a new array with each individual Instagram Post.

Code for the Instagram Gallery

In my case I passed the data as props into a component named instagamSection where I structured how I wanted the galley to look like.

This is how it turned out to be if anyone was curious. Still not done but getting somewhere.

Qestions? Feel free to send me an email


2022 © Copyright, Daniel Jimenez