npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

gatsby-source-instagram

0.5.0 • Public • Published

gatsby-source-instagram

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

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

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

install

npm i gatsby-source-instagram

Downloadsweekly downloads

1,563

version

0.5.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability