Skip to content
Create nodes from instagram posts
Branch: master
Clone or download
Latest commit d50cd96 Mar 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Release new version Mar 19, 2019
src Add an example site, source from hashtags Mar 19, 2019
.babelrc Specify babel target Sep 14, 2018
.eslintrc.json Add an example site, source from hashtags Mar 19, 2019
.gitignore Add an example site, source from hashtags Mar 19, 2019
.npmignore Release new version Mar 19, 2019
.prettierrc
LICENSE Initial commit Sep 10, 2018
README.md Add an example site, source from hashtags Mar 19, 2019
index.js
netlify.toml Add netlify toml Mar 19, 2019
package.json Release new version Mar 19, 2019
yarn.lock Add an example site, source from hashtags Mar 19, 2019

README.md

gatsby-source-instagram

npm version npm PRs Welcome Average time to resolve an issue NPM

Source plugin for sourcing data from Instagram. There are three ways to get information from instagram:

  • scraping the homepage of the Instagram account. It can only get last 12 photos.
  • scraping a hashtag page.
  • querying the Instagram Graph Api using a provided access_token

Table of Contents

Install

npm install --save gatsby-source-instagram

How to use

Public scraping

If you intend to use the public scraping method then you need to pass the concerning username

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-instagram`,
    options: {
      username: `username`,
    },
  },
]

Graph API

If you intend to use the Instagram Graph Api then you need to pass the instagram id and an access token

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-instagram`,
    options: {
      username: `username`,
      access_token: "a valid access token",
      instagram_id: "your instagram_business_account id",
    },
  },
]

Passing the username in this case is optional. If the Graph Api throws any exception and the username is provided then it will use the public scraping method as a fallback.

Hashtag scraping

If you want to source nodes from hashtags then you need the following:

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-instagram`,
    options: {
      type: `hashtag`,
      hashtag: `snowing`,
    },
  },
]

How to query

The plugin tries to provide uniform results regardless of the way you choose to retrieve the information

Common fields include:

  • id
  • likes
  • original
  • timestamp
  • comments
  • caption
  • username (fallbacks to the hashtag name in case of hashtag scraping)
  • preview
  • mediaType

The public scraping method can additionaly retrieve:

  • thumbnails
  • dimensions
query {
  allInstaNode {
    edges {
      node {
        id
        likes
        comments
        mediaType
        preview
        original
        timestamp
        caption
        localFile {
          childImageSharp {
            fixed(width: 150, height: 150) {
              ...GatsbyImageSharpFixed
            }
          }
        }
        # Only available with the public api scraper
        thumbnails {
          src
          config_width
          config_height
        }
        dimensions {
          height
          width
        }
      }
    }
  }
}

Image processing

To use image processing you need gatsby-transformer-sharp, gatsby-plugin-sharp and their dependencies gatsby-image and gatsby-source-filesystem in your gatsby-config.js.

You can apply image processing on each instagram node. To access image processing in your queries you need to use the localFile on the InstaNode as shown above:

Instagram Graph API token

Special thanks to LekoArts

  1. You need to have a Facebook page (I know... :/)
  2. Go to your site settings -> Instagram -> Login into your Instagram account
  3. Create a app
  4. Go to the [Graph API Explorer][gae]
    1. Select your App from the top right dropdown menu
    2. Select "Get User Access Token" from dropdown (right of access token field) and select needed permissions (manage_pages, pages_show_list, instagram_basic)
    3. Copy user access token
  5. [Access Token Debugger][atd]:
    1. Paste copied token and press "Debug"
    2. Press "Extend Access Token" and copy the generated long-lived user access token
  6. [Graph API Explorer][gae]:
    1. Paste copied token into the "Access Token" field
    2. Make a GET request with "PAGE_ID?fields=access_token"
    3. Find the permanent page access token in the response (node "access_token")
  7. [Access Token Debugger][atd]:
    1. Paste the permanent token and press "Debug"
    2. "Expires" should be "Never"
    3. Copy the access token
  8. [Graph API Explorer][gae]:
    1. Make a GET request with "PAGE_ID?fields=instagram_business_account" to get your Business ID
You can’t perform that action at this time.