Instagram Widget

Simple solution to create an instagram widget for your website

19-09-2020 - 0 minutes, 37 seconds -

Requres: https://unpkg.com/axios@0.19.2/dist/axios.min.js

var instagramUsername = 'username';
var widgetElementID = 'instagram-widget';

/*here we go - do not edit ehhh just kidding*/
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, 9)
  const photos = edges.map(({ node }) => {
    return {
      url: `https://www.instagram.com/p/${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/'+instagramUsername)
    const container = document.getElementById(widgetElementID)
    photos.forEach(el => {
      const a = document.createElement('a')
      const img = document.createElement('img')

      a.setAttribute('href', el.url)
      a.setAttribute('target', '_blank')
      a.setAttribute('rel', 'noopener noreferrer')
      a.classList.add(widgetElementID)

      img.setAttribute('src', el.thumbnailUrl)
      img.setAttribute('alt', el.caption)

      a.appendChild(img)
      container.appendChild(a)
    })
  } catch (e) {
    console.error('Something goes wrong :c', e)
  }
})()