gatsby-source-instagram

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

• scraping the posts of an Instagram account. It can only get last 12 photos.
• scraping a hashtag page.
• scraping a user profile's informations.
• querying the Instagram Graph Api using a provided access_token

Table of Contents

• Install
• How to use
  • Public scraping for posts
  • Public scraping for a user's profile
  • Graph API
  • Hashtag scraping
• How to query
  • Posts
  • User profile information
• Image processing
• Instagram Graph API token

Install

npm install --save gatsby-source-instagram

How to use

Public scraping for posts

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`,
    },
  },
]

Public scraping for a user's profile

If you want to source a user's profile from his username then you need the following:

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-instagram`,
    options: {
      type: `user-profile`,
      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

Posts

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
        }
      }
    }
  }
}

User profile information

Fields include:

• id
• username
• full_name
• biography
• edge_followed_by (followers)
• edge_follow (who the user follows)
• profile_pic_url
• profile_pic_url_hd

query {
  instaUserNode {
    id
    username
    full_name
    biography
    edge_followed_by
    edge_follow
    profile_pic_url
    profile_pic_url_hd
  }
}

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