Reactでインスタ投稿を埋め込む方法（instagram graph api）

はじめに

PHPを使用してinstagram graph apiで投稿をWebサイトに埋め込む系の記事はたくさんあるのですが、他の言語での記事があまりないため、今回はReactを使用してWebサイトにインスタの投稿を埋め込む処理を記載しようと思います。

環境

OS	使用言語	ライブラリ	使用環境
windows10	javascript	react	visual studio code

・node.jsインストール済み
・create-react-appでベースとなるアプリ作成済み
・https://lpeg.info/webworks/instagram_api.html を参考にアクセストークンとビジネスアカウントIDを取得済み

※APIの通信はaxiosを使用します。
※フェイスブックとインスタグラムのアカウントが必要です。
※インスタグラムのアカウントはビジネスアカウントにする必要があります。
※フェイスブックでページを作成している必要があります。（自分はここで結構詰まりました）

Reactでインスタの投稿を取得する

App.js

import React, { useState, useEffect } from 'react'

const App = () => {
  const [posted, setPosted] = useState([])
  const [clickUpdate, setClickUpdate] = useState(false)

  const onClickUpdate = () => {
    setClickUpdate(!clickUpdate)
  }

  useEffect(() => {
    const user_name = "埋め込みたい人のユーザー名" //ビジネスorクリエイターアカウントの必要あり
    const access_token = "取得しておいたアクセストークン"
    const user_id = "取得しておいたビジネスアカウントID"
    const get_count = 5 //取得したい投稿数
    axios
      .get(
        `https://graph.facebook.com/v12.0/${user_id}?fields=business_discovery.username(${user_name}){id,followers_count,media_count,ig_id,media.limit(${get_count}){caption,media_url,like_count}}&access_token=${access_token}`
      )
      .then((res) => {
        setPosted(res.data)
      })
  }, [clickUpdate])

  return (
    <>
      {/*埋め込みたいインスタの情報*/}
      <button onClick={onClickUpdate}>更新</button>
    </>
  )
}

export default App

内容

リクエストパラメータの中にある以下の記載で取得したい投稿内容を指定できます。

axios.get('省略・・・media.limit(${get_count}){caption,media_url,like_count}・・・省略')

今回は投稿内容と投稿画像といいね数を取得する記載となっています。
※ちなみにmediaの後の「limit(取得投稿数)」記載を削るとすべての投稿が取得できます。

投稿内容を表示する例

画像を表示する例を以下に記載します。

return(
  <>
    <img src={posted.business_discovery.media.data[0].data['media_url']} alt='instagramImage' />
  </>
)

上記のような記載でdata配列で取得する要素を変更すると投稿内容であったりいいね数が取得できます。

※複数投稿を取得するように処理を記載している際は、ループ処理などでぐるぐる回して取得するのですが、今回は割愛させて頂きます。

まとめ

今回は、インスタグラムの投稿内容をReactを使用してWebアプリに埋め込むことを記載しました。
ググるとPHPの記事が多く出回っており、ほかの言語での解説が少なかったため、本記事を少しでも活用して頂けると嬉しいです。
また気分が乗った際は、Webサイトからインスタグラムへ記事を投稿する内容を記載します。
少しでも役立った際はLGMTして頂けるとやる気アップします。。。笑

参考にした記事

冒頭にも乗せさせていただいた以下の記事です。アクセストークンとビジネスアカウントIDを取得する方法がとても詳しく解説されており、トークン発行などがスムーズにできました。
・https://lpeg.info/webworks/instagram_api.html

あとは、instagram graph apiのリファレンスです。リクエストパラメータの記載例などが載っており活用しました。
・https://developers.facebook.com/docs/instagram-api/reference/ig-user/media#get-media

注意

ビジネスアカウントであればWebサイトに埋め込むことができるのですが、他人のアカウントを埋め込む際はあらかじめ了承を得てから埋め込むようにしないと問題になるかもなので気を付けてください。。。💦