⚛️📸 Gatsby source plugin to fetch ALL your instagram media from Instagram API + Gatsby Image support.
yarn add gatsby-source-instagram-all- Add this configuration to your gatsby-config.js:
{
resolve: `gatsby-source-instagram-all`,
options: {
access_token: "YOUR_ACCESS_TOKEN",
}
}
👓 Watch this video if you're having trouble generating your access token.
Query data like this:
query myQuery {
allInstagramContent {
edges {
node {
caption
media_url
localFile {
childImageSharp {
gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED)
}
}
album {
localFile {
childImageSharp {
gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED)
}
}
}
}
}
}
}
| Field Name | Description |
|---|---|
| caption | The Media's caption text |
| localFile | The local image. |
| id | The Media's ID. |
| media_type | The Media's type. Can be IMAGE, VIDEO, or CAROUSEL_ALBUM. |
| media_url | The Media's URL. |
| permalink | The Media's permanent URL. Will be omitted if the Media contains copyrighted material, or has been flagged for a copyright violation. |
| thumbnail_url | The Media's thumbnail image URL. Only available on VIDEO Media. |
| timestamp | The Media's publish date in ISO 8601 format. |
| username | The Media owner's username. |
| album | The CAROUSEL_ALBUM media. Has the same fields as the root media node |
| Option | Type | Description |
|---|---|---|
| access_token | string | Your access token |
| limit | number (optional) | Limit number of posts. Default is to fetch all posts |
| pageLimit | number (optional) | Limit number of posts fetched per request. Default is 30 |
- Fork it
- Create your feature branch
git checkout -b feature/fooBar - Commit your changes
git commit -am 'Add some fooBar' - Push to the branch
git push origin feature/fooBar - Create a new Pull Request
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent