2023/11/10

サイトの自分の好きな位置にインスタの画像を貼ってみる



<備忘録:インスタ貼り付け>

 サイトやWordpressでインスタの自動更新の写真を埋め込みたいと思ってコードを調べていましたが、なかなか簡単にできるのが見つからず、結局APIを使うハメになったので、その備忘録です。

やること 
・インスタをプロアカウントにする
・Facebookのページ作成(インスタと紐づけ)
・アプリID・app secret・ユーザーアクセストークンの取得
・InstagramプロアカウントID・アクセストークンの取得 ・貼り付ける

インスタの準備

  1. 自分のプロフ画面の「設定」からプロアカウントを設定する。(プロアカウントは無料)
  2. 設定後にプロフに出る「プロフィールを編集」を選ぶ。
  3. 公開情報の「ページ」を選ぶ。
  4. Facebookページを作成」を選ぶ。
  5. ページがない時は作成・あるときは紐づけをして設定する。(Facebookページは公開される)

アプリID・app secret・ユーザーアクセストークンの取得

  1. https://developers.facebook.com/にアクセスし、右上の「マイアプリ」を選ぶ。
  2. 右上の「アプリを作成」をタップ。
  3. ユースケース画面の「その他」を選んで次へ
  4. アプリタイプ画面「なし」を選んで次へ
  5. 自分のわかりやすいアプリ名と、メールアドレスを入力し「アプリを作成」をクリック。
  6. 画面が変わったら左側のメニューより「設定」の中にある「ベーシック」から[アプリID]と[appsecret]をメモやコピペしておく。
  7. 上のメニューから「ツール」を選択し、「グラフAPIエクスプローラー」を選ぶ。
  8. 「トークンを取得」より「ユーザーアクセストークンを取得」をクリック。
  9. ログイン画面が出るのでFacebookのアカウントにログインする。
  10. 画面が戻ったら右側のメニューのユーザートークンの下にあるアクセス許可に初期設定されている「public_profile」を含めた以下の9項目を追加する。


  11. ・public_profile
    Events Groups pages内の
    ・business_management
    ・pages_manage_metadata
    ・pages_read_engagement
    ・pages_read_user_content
    ・pages_show_list
    Other内の
    ・instagram_basic
    ・instagram_manage_comments
    ・instagram_manage_insights
  12. 「Generate Access Token」をクリック
  13. 表示された英数字のユーザーアクセストークンをメモ・コピペしておく。

InstagramのプロアカウントID・アクセストークンの取得

API Query Makerにアクセスし、順に入力していく。
「Instagramビジネスidとアクセストークンを取得」をクリックし下に表示される「InstagramプロアカウントID」と「アクセストークン」をメモ・コピペしておく。

埋め込む

上記の「InstagramプロアカウントID」と「アクセストークン」を使い、以下のコードを表示したい箇所に埋め込む