IGGetLatestPosts

iggetlatestposts.markdown

IGGetLatestPosts

Hacky example how to fetch public photos from Instagram without the API

A Pen by TomGalla11 on CodePen.

License.

script.js

const instagramRegExp = new RegExp(/<script type="text\/javascript">window\._sharedData = (.*);<\/script>/)

const fetchInstagramPhotos = async (accountUrl) => {
  const response = await axios.get(accountUrl)
  const json = JSON.parse(response.data.match(instagramRegExp)[1])
  const edges = json.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges.splice(0, 6)
  const photos = edges.map(({ node }) => {
    return {
      url: `https://www.instagram.com/p/${node.shortcode}/`,
      shortcode:
node.shortcode,
      thumbnailUrl: node.thumbnail_src,
      displayUrl: node.display_url,
      caption: node.edge_media_to_caption.edges[0].node.text
    }
  })
  return photos
}

(async () => {
  try {
    const photos = await fetchInstagramPhotos('https://www.instagram.com/dieweltentdecker/')
    const container = document.getElementById('instagram-photos')
    photos.forEach(el => {
      console.log(el.shortcode)

  //el.Url
    })
  } catch (e) {
    console.error('Fetching Instagram photos failed', e)
  }
})()

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap-reboot.min.css" rel="stylesheet" />