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

＜備忘録：インスタ貼り付け＞

 サイトや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項目を追加する。
    
    


・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
11. 「Generate Access Token」をクリック
12. 表示された英数字のユーザーアクセストークンをメモ・コピペしておく。
    
    

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

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

埋め込む

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