Have ideas to improve npm?Join in the discussion! »

    @theowenyoung/gatsby-source-instagram

    1.0.0 • Public • Published

    gatsby-source-instagram

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

    // fork from gatsby-source-instagram, support instagram display api, custom endpoint

    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: `@theowenyoung/gatsby-source-instagram`,
        options: {
          username: `username`,
        },
      },
    ]

    Public scraping for a user's profile

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

    // In your gatsby-config.js
    plugins: [
      {
        resolve: `@theowenyoung/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

    // get your own media
    plugins: [
      {
        resolve: `@theowenyoung/gatsby-source-instagram`,
        options: {
          access_token: "a valid access token",
        },
      },
    ]

    How to get access token?

    // more params
    plugins: [
      {
        resolve: `@theowenyoung/gatsby-source-instagram`,
        options: {
          username: `username`,
          access_token: "a valid access token",
          instagram_id:
            "your instagram_business_account id / or instagram user id if you use graph.instagram.com endpoint",
          paginate: 100,
          maxPosts: 1000,
          endpoint: "https://graph.instagram.com", // optional, the default api endpoint is https://graph.facebook.com/v3.1, you can also choose https://graph.instagram.com as the base api endpoint, see https://developers.facebook.com/docs/instagram-basic-display-api
        },
      },
    ]

    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.

    The paginate parameter will influence the limit set for the api call (defaults to 100) and the maxPosts enables to limit the maximum number of posts we will store. Defaults to undefined.

    Hashtag scraping

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

    // In your gatsby-config.js
    plugins: [
      {
        resolve: `@theowenyoung/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 display API token

    See How to create access_token using User Token Generator

    Instagram Graph API business 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
      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:
      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:
      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:
      1. Paste the permanent token and press "Debug"
      2. "Expires" should be "Never"
      3. Copy the access token
    8. Graph API Explorer:
      1. Make a GET request with "PAGE_ID?fields=instagram_business_account" to get your Business ID

    Install

    npm i @theowenyoung/gatsby-source-instagram

    DownloadsWeekly Downloads

    456

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    21.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar