Embed Instagram User Feed With Javascript



Create An Instagram Feed With JS & Bulma

Looking for an easy way to embed an Instagram users feed on your site? Look no further.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Bulma Instagram!</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
</head>

<body>

  <section class="section is-medium">
    <div class="container">
      <div id="gallery" class="columns is-multiline"></div>
    </div>
  </section>

  <script>

    get_instagram_pictures = async (user) => {
      const gallery = document.getElementById('gallery');
      const response = await fetch(`https://www.instagram.com/${user}/?__a=1`);
      const data = await response.json();
      const gallery_pictures = data.graphql.user.edge_owner_to_timeline_media.edges;
      let gallery_content = '';

      if (response.ok) {
        gallery_pictures.forEach(obj => {
          Object.entries(obj).forEach(([key, value]) => {
            if (value.is_video) {
              gallery_content += `
            <div class='column is-3'>
              <video width="100%" height="240" controls>
                <source src="${value.video_url}" type="video/mp4">
              </video>
            </div>
            `;
            } else {
              gallery_content += `
            <div class='column is-3'>
              <figure class="image is-square">
                <img class='gallery' src='${value.display_url}'>
              <figure>
            </div>
            `;
            }
          });
        });

      } else {
        gallery_content = `<strong class='has-text-centered'>NO IMAGES</strong>`;
        throw new Error(gallery_pictures);
      }
      gallery.innerHTML = gallery_content;
    }

    get_instagram_pictures('nasa');

  </script>
</body>

</html>

Thanks for reading. x

Resources