A dead simple way to get data from Instagram (inspired by Instafeed.js)
An Instagram friendly API URL and/or the data it returns. No {{templating}}.
🎁️ My suggestion is to use the buildUrl function with your options and fetch however you see fit.
😑️ If you do not want to do that, then you can use the default in this package (isomorphic-unfetch).
🤷️ And if you really don't want to do anything with the code, feel free to use react-instafeed which wraps this for react.
⚠️ This is a direct port frominstafeed-liteat the moment⚠️
If you want assistance in creating the API URL you can use instafeed-lite.
The templating that this had should be handled by you after you grab your data.
I do not use this repo, but I did not want to delete it as other people do.
Read more here. Instagram Graph API is their new solution, which right now only is enabled for Business Accounts.
Support for Non-Business Profiles [FUTURE]: Basic permissioning for non-business profiles will be supported in early 2019.
Currently we are still using the v1 endpoints. (No real plan to move to Graph until Non-Business Profiles are ready.)
yarn add react-instafeedOptions:
const options = {
accessToken: 'access...',
clientId: 'client...',
get: 'user', // popular, user
locationId: null,
resolution: 'standard_resolution', // thumbnail, low_resolution, standard_resolution
sortBy: 'none', // none, least-commented, least-liked, least-recent, most-commented, most-liked, most-recent, random
tagName: null,
userId: 123,
}REACT:
import React, { Fragment } from 'react'
import { buildUrl } from 'react-instafeed'
// 🔥️ These are in your code (not this repo)
import useAbortableFetch from '@hooks/useAbortableFetch'
import Image from '@components/Image'
const Instagram = () => {
const { json, loading, error, abort } = useAbortableFetch(buildUrl(options))
if (loading) return 'Loading...'
if (error) return `Error: ${error}`
if (!json) return null
const { data, meta, pagination } = json
return (
<Fragment>
{// eslint-disable-next-line no-unused-vars
data &&
data.map(({ caption, id, images, tags }, index) => {
const image = images[options.resolution]
return (
<Image
key={index}
url={image.url}
title={caption.text}
caption={caption.text}
width={image.width}
height={image.height}
/>
</div>
)
})}
</Fragment>
)
}URL:
import { buildUrl } from 'react-instafeed'
const instagramUrl = buildUrl(options)Data:
import instafeed from 'react-instafeed'
const data = instafeed(options)Again, just use buildUrl and handle your own loading.
limit- Maximum number of Images to add. (max: 60)resolution- Size of the images to get. Available options are:-
low_resolution- 320x320
-
standard_resolution- 640x640
-
thumbnail(default) - 150x150
sortBy- Sort the images in a set order. Available options are:-
least-commented- Lowest # of comments to highest.
-
least-liked- Lowest # likes to highest.
-
least-recent- Oldest to newest.
-
most-commented- Highest # of comments to lowest.
-
most-liked- Highest # of likes to lowest.
-
most-recent- Newest to oldest.
-
none(default) - As they come from Instagram.
-
random- Random order.
Super props to the Instafeed, Instagram, and React teams.
This software is provided as-is, and all that usually lovely stuff.
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent