5분 안에 나만의 Instagram 갤러리 만들기

한 고객이 자신의 웹사이트에서 자신의 계정에 있는 Instagram 사진을 보여주는 것에 대해 저에게 물었습니다. 트위터의 .

그러나 Instagram에는 피드에 사진을 표시하는 위젯이 없습니다. 그래서 제가 직접 만들었습니다. 이것은 귀하의 웹 사이트에서도 그렇게 할 수 있는 방법에 대한 게시물입니다. 약간의 리버스 엔지니어링이 필요했지만 결국 모두 작동했고 그대로 유지되기를 바랍니다.🤞

이 게시물은 단일 Instagram 계정에 대해 설명하지만 다른 계정에서도 이미지를 가져오도록 여기에 표시된 내용을 수정할 수 있습니다. 나는 보장하지 않습니다!

사실

인스타그램은 .

이 게시물에서 다루는 방법은 공개적으로 액세스할 수 있는 계정에만 적용됩니다.

비공개 계정의 사진을 보여주려면 공식 Instagram API 플랫폼을 사용하여 앱을 등록하고, API 키를 받고, 리뷰를 받아야 합니다. Twitter의 공개 프로필용 타임라인 위젯과 달리 피드의 공개 이미지.

쿼리 해시

사진을 표시하려는 Instagram 계정으로 이동하여 개발자 도구를 열고 네트워크 탭을 클릭합니다. 네트워크 탭을 연 상태에서 보고 있는 Instagram 페이지를 새로 고칩니다. 그런 다음 XHR 필터를 클릭합니다. 최신 Firefox 브라우저에서는 다음과 같이 표시됩니다.


XHR만 표시되는 네트워크 탭

Instagram은 GraphQL을 사용하여 게시물을 가져옵니다. 각 게시물에는 다양한 크기의 그림, 통계(좋아요, 댓글 등), 작성자 등의 URL이 포함되어 있습니다. 동일한 API 호출을 직접 만들 수 있도록 요청의 쿼리 해시가 필요합니다.

엔드포인트에 대한 요청에서 쿼리 해시를 찾을 수 있습니다https://www.instagram.com/graphql/query/. 다시 한 번 텍스트 상자를 사용하여 요청을 필터링하여 특정 요청을 찾을 수 있습니다.


인스타그램 GraphQL API 요청

개발자 도구 창의 전체 URL은 다음과 같습니다.https://www.instagram.com/graphql/query/?query_hash=d4d88dc1500312af6f937f7b804c68c3&variables={"user_id":"249074882","include_chaining":false,"include_reel":false,"include_suggested_users":false,"include_logged_out_extras":true,"include_highlight_reels":true,"include_live_status":true}
나중을 위해 query_hash 쿼리 매개변수의 값을 저장합니다. 이를 동일한 API 엔드포인트에 대한 자체 요청에 연결합니다.

Vue 컴포넌트

다음은 Vue 구성 요소이지만 다른 프런트 엔드 프레임워크에서도 매우 쉽게 동일한 작업을 수행할 수 있습니다.

API 호출에 대한 몇 가지 상수를 선언합니다.

// These two URLs will be the same regardless of the account
// you want to show pictures from.
const IG_API_URL = "https://www.instagram.com/graphql/query/";
const IG_POST_URL = "https://www.instagram.com/p";

// The `query_hash` value from before.
const TIMELINE_QUERY_HASH = "d4d88dc1500312af6f937f7b804c68c3";
// The number of images to fetch per page.
const IMAGES_PER_PAGE = 5;

API 호출하기

async fetchData(after) {
  const variables = {"id":"249074882","first":IMAGES_PER_PAGE};
  const api = axios.default.create();
  const resp = await api.get(IG_API_URL, {
    params: {
      "query_hash": TIMELINE_QUERY_HASH,
      "variables": JSON.stringify(variables)
    }
  });
  return resp.data;
}

표시할 데이터를 변환합니다. 표시하려는 내용에 따라 자유롭게 수정하십시오.

transformData(timeline) {
  if (!timeline.hasOwnProperty("edges")) {
    return;
  }
  const edges = timeline.edges;
  edges.forEach(edge => {
    if (!edge.hasOwnProperty("node") || edge.node["__typename"] !== "GraphImage") {
      return;
    }
    const node = edge.node;
    const thumbnails = node["thumbnail_resources"];
    const urls = thumbnails.filter(t => t["config_width"] === this.imgProps.w);
    let url;
    if (!urls || !urls.length) {
      url = thumbnails[0].src;
    } else {
      url = urls[0].src;
    }
    this.posts.push({
      url,
      href: `${IG_POST_URL}/${node["shortcode"]}`
    });
  });
 }
}

그리고 그게 다야. 이 몇 줄만으로 인스타그램의 자체 공식 사이트처럼 API 호출을 하고 인스타그램 게시물 페이지를 검색했습니다.

함께 모아서

<template>
  <section class="instagram mb-10">
    <div class="d-flex flex-row flex-md-row flex-column flex-sm-column justify-center align-center">
      <v-card
        v-for="(post, index) in posts"
        :key="index"
        tile
        class="pa-2 ma-2"
      >
        <a
          :href="post.href"
          class="post"
          rel="noopener"
          target="_blank"
        >
          <img
            :src="post.url"
            width="100%"
            height="auto"
          >
        </a>
      </v-card>
    </div>
  </section>
</template>
<script>
import * as axios from "axios";

const IG_API_URL = "https://www.instagram.com/graphql/query/";
const IG_POST_URL = "https://www.instagram.com/p";
const TIMELINE_QUERY_HASH = "9dcf6e1a98bc7f6e92953d5a61027b98";
const IMAGES_PER_PAGE = 5;

export default {
    name: "Instagram",
    data() {
      return {
        posts: [],
        imgProps: {
          w: 320,
          h: 320
        }
      };
    },
    async created() {
      const resp = await this.fetchData();
      if (!resp.data.hasOwnProperty("user") || !resp.data.user.hasOwnProperty("edge_owner_to_timeline_media")) {
        return;
      }

      this.transformData(resp.data.user.edge_owner_to_timeline_media);
    },
    methods: {
      async fetchData() {
        const variables = {"id":"20214540375","first":IMAGES_PER_PAGE};
        const api = axios.default.create();
        const resp = await api.get(IG_API_URL, {
          params: {
            "query_hash": TIMELINE_QUERY_HASH,
            "variables": JSON.stringify(variables)
          }
        });
        return resp.data;
      },

      transformData(timeline) {
        if (!timeline.hasOwnProperty("edges")) {
          return;
        }
        const edges = timeline.edges;
        edges.forEach(edge => {
          if (!edge.hasOwnProperty("node") || edge.node["__typename"] !== "GraphImage") {
            return;
          }
          const node = edge.node;
          const thumbnails = node["thumbnail_resources"];
          const urls = thumbnails.filter(t => t["config_width"] === this.imgProps.w);
          let url;
          if (!urls || !urls.length) {
            url = thumbnails[0].src;
          } else {
            url = urls[0].src;
          }
          this.posts.push({
            url,
            href: `${IG_POST_URL}/${node["shortcode"]}`
          });
        });
      }
    }
}
</script>
<style lang="scss" scoped>

.instagram {
  overflow: hidden;
}

@media all and (max-width: 640px) {
  .instagram {
    .ig-container {
      .columns {
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>

지금은 그게 다입니다. 이 게시물이 마음에 들고 다른 것에 대해 쓰고 싶다면 알려주세요! 다음에 또 만나요! 👋