reobin-gatsby-source-instagram v0.2.0
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
- You need to have a Facebook page (I know... :/)
- Go to your site settings -> Instagram -> Login into your Instagram account
- Create a app
- Go to the Graph API Explorer
- Select your App from the top right dropdown menu
- Select "Get User Access Token" from dropdown (right of access token field) and select needed permissions (manage_pages, pages_show_list, instagram_basic)
- Copy user access token
- Access Token Debugger:
- Paste copied token and press "Debug"
- Press "Extend Access Token" and copy the generated long-lived user access token
- Graph API Explorer:
- Paste copied token into the "Access Token" field
- Make a GET request with "PAGE_ID?fields=access_token"
- Find the permanent page access token in the response (node "access_token")
- Access Token Debugger:
- Paste the permanent token and press "Debug"
- "Expires" should be "Never"
- Copy the access token
- Graph API Explorer:
- Make a GET request with "PAGE_ID?fields=instagram_business_account" to get your Business ID