BLOG

CMAブログ

株式会社シーエムエーホーム CMAブログインスタグラムが突然表示されなくなった！最新のInstagram Graph API（v7.0）を使って再表示する方法とは

ホームページ制作インスタグラムが突然表示されなくなった！最新のInstagram Graph API（v7.0）を使って再表示する方法とは

浜松本社デザイン部部長坂本
2020.08.28

こんにちは。デザイン部の坂本です。

いつのまにかインスタグラムが表示されなくなったことに気づき、
弊社で調査したところ、「Instagram Graph API v7.0対応」が必要だとわかりました。（2020年8月28日現在）

API v9.0対応の最新の記事はこちら

Instagram Graph APIを利用するには、
有効期限無制限のアクセストークンとInstagramビジネスアカウントIDの取得が必要になります。
今回は、弊社のグループ会社で高級フルーツを取り扱っている
フルーツShomeidoでアカウントを作成した際の手順を紹介します。

※PHPやJSでインスタグラムの読み込みやデザインをしますので、
PHPが利用できるサーバーを前提に進めていきます。

インスタグラムが突然表示されなくなった！最新のInstagram Graph API（v7.0）を使って再表示する方法とは

目次

はじめに準備すること
 FACEBOOK for DevelopersでFacebookアプリを作成
 インスタグラムの投稿をPHPで取得
 まとめ

はじめに準備すること

はじめに【1】～【3】までを進めておいてください。
googleで検索すると手順方法がヒットします。

【1】Facebookページを作成する
【2】Instagramのアカウントをプロアカウントに切り替える
【3】FacebookページとInstagramアカウントを連携

上記まで完了したら今回ご説明する手順になります。

Facebook for DevelopersでFacebookアプリを作成

アクセストークンの取得は3回必要です。

【1】有効期限1時間のアクセストークンを取得
【2】有効期限2ヶ月のアクセストークンを取得
【3】有効期限無制限のアクセストークンを取得
【4】InstagramビジネスアカウントIDを取得

【1】有効期限1時間のアクセストークンを取得

1.マイアプリをクリック

Facebook for Developers

2.新しいアプリを追加

3.ビジネス統合の管理をクリック

4.アプリ表示名とアプリを利用できる人を自分、同じビジネスに所属する人に設定 → アプリIDを作成

5.グラフAPIエクスプローラを開く

6.Facebookアプリが先ほど登録したアプリ表示名になっていることを確認して「Ganerate Access Token」をクリック

7.〇〇としてログインと出てくるのでログインをする

8.許可を追加

この画面になるので、許可を追加していきます。
追加する項目は以下になります。

Events Groups Pagesから
business_management
pages_show_list
pages_manage_ads
pages_manage_metadata
pages_read_engagement
pages_read_user_content

Otherから
instagram_basic
instagram_manage_comments
instagram_manage_insights

9.Generate Access Tokenをクリック

10.Facebookにログインする画面が表示されたら、OKを押す。

11.表示されたアクセストークン横の（i）をクリックするとアクセストークン情報が表示されるので、「アクセストークンツールで開く」をクリック

12.有効期限1時間以内のアクセストークンが取得できました。

【2】有効期限2ヶ月のアクセストークンを取得

1.少しスクロールすると、「アクセストークンを延長」というボタンがあるのでクリック。
パスワードが求められたら入力して送信

2.有効期限2か月のアクセストークンが取得できます。

3.横にあるデバッグをクリックして、2か月以内に変わったか確認

【3】有効期限無制限のアクセストークンを取得

1.有効期限2か月のアクセストークンをコピーして、再度グラフAPIエクスプローラを開きます。

2.アクセストークンのところに先ほどコピーしたアクセストークンを貼り付け

3.上部のバーにme/accountsと入力して送信をクリック

4.この画面になり、赤枠で囲んだ部分にアクセストークンが生成されます。
これが有効期限無期限のアクセストークンになります。

5.アクセストークンデバッガーを開き、先ほど生成されたアクセストークンをデバッグしてみましょう！
有効期限が「受け取らない」になっていたら成功です。

【4】InstagramビジネスアカウントIDを取得

1.再度[グラフAPIエクスプローラ]を開き、赤枠で囲った上部のバーに
me?fields=accounts{instagram_business_account}と入力して送信をクリック

2.赤枠で囲った部分が「インスタグラムのビジネスアカウントID」になります。

インスタグラムの投稿をPHPで取得

最後にPHPやJSを使ってインスタグラムを表示したいサイトに出力して完成です。

▼実際のページが以下になります。
高級果物専門店のフルーツShomeido(正明堂)｜内祝・お供え・お見舞いに旬のフルーツを全国発送
フルーツShomeido(正明堂)

まとめ

いかがでしたか。
今回は弊社のデザイナーの倉光が監修をしてくれました。倉光さん、ありがとうございます！
複雑な手順で説明も長くなってしまいましたが、落ち着いて進めてください。
年々セキュリティが高くなり、APIの利用が厳しくなっています。
新しい仕様に対応できるよう常にアップデートしていきたいですね。

API v9.0対応の最新の記事はこちら

それでは次回もお楽しみに！

浜松本社デザイン部部長坂本

Tweet

人気の記事ランキング

posted on 2024/08/02Google広告がX(旧:Twitter)に表示されている!?～配信設定の方法もご紹介～
posted on 2023/02/082023年度版 Google PageSpeed Insights（ページスピードインサイト）を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた
posted on 2024/10/02構造化マークアップはSEO対策に効果があるのかやってみた（2024年度版）
posted on 2019/12/02FacebookのAudience Networkってどこに配信されるの？ターゲティング設定と動画広告の相性抜群でクリック率が静止画広告の2倍にUP！
posted on 2018/10/31無料でGoogleマイマップの配色とアイコンを自由にカスタマイズ！Webサイトのデザインテイストに合わせるやり方とは！？

おすすめの記事

メンバー

おすすめタグ