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 50 photos.
- scraping a hashtag page.
- scraping a user profile's informations.
- querying the Instagram Graph Api using a provided
access_token
npm install --save gatsby-source-instagram
If you intend to use the public scraping method then you need to pass the concerning username id. You can find it https://codeofaninja.com/tools/find-instagram-user-id
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-source-instagram`,
options: {
username: `usernameId`,
},
},
]
** Deprecated **
Due to instagram adding a login screen for scraping calls this is no longer working on Cloud builders. I am currently researching a solution, ideas and PRs welcome.
If you want to source a user's profile from their username then you need the following:
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-source-instagram`,
options: {
type: `user-profile`,
username: `username`,
},
},
]
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",
paginate: 100,
maxPosts: 1000,
},
},
]
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.
** Deprecated **
Due to instagram adding a login screen for scraping calls this is no longer working on Cloud builders. I am currently researching a solution, ideas and PRs welcome.
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`,
},
},
]
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
}
}
}
}
}
** Deprecated **
Due to instagram adding a login screen for scraping calls this is no longer working on Cloud builders. I am currently researching a solution, ideas and PRs welcome.
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
}
}
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:
** Disclaimer: ** These steps might not be clear, or not exactly working for everybody. Working on updated or automated steps right now. Progress is at oorestisime#24 Any help on this side is greatly welcomed and appreciated!
- 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
- Make sure you are using v7 as api version
- Select your facebook app
- Click "Generate Access Token"
- Add the following permissions (pages_manage_ads, pages_manage_metadata, pages_read_engagement, pages_read_user_content, pages_show_list, instagram_basic)
- Make a GET request at
me/accounts
- copy the access_token in the response (we call this temporary_token)
- click on the id to change the explorer url and append
?fields=instagram_business_account&access_token={access-token}
- save your
instagram_business_account.id
, this is your instagram_id
- Access Token Debugger:
- Paste your temporary_token and press "Debug"
- You should see this token now expires in 3 months
- Press "Extend Access Token" and press the new debug that appears next to the token
- You should see this token now never expires
- Copy this new token (we will call this access_token)
With these two information you can now use the plugin as:
{
resolve: `gatsby-source-instagram`,
options: {
username: username,
access_token: access_token,
instagram_id: instagram_id,
},
},