株式会社シーエムエー

053-459-1510

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v7.0)を使って再表示する方法とは

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

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

はじめに準備すること

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

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

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

Facebook for DevelopersでFacebookアプリを作成

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

【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の利用が厳しくなっています。
新しい仕様に対応できるよう常にアップデートしていきたいですね。

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

人気の記事ランキング

  • posted on 2020/02/03SSL対応したのに【保護されていない通信】の表示が!?Chrome 79以降での警告メッセージ対応について

  • posted on 2018/04/11構造化マークアップはSEO対策に効果があるのかやってみた

  • posted on 2019/03/05デジタル一眼レフカメラで撮影した写真をタブレット(iPad)にリモート表示してみた!

  • posted on 2018/05/23Google Chromeで動画が再生されない

  • posted on 2019/05/22Google 翻訳のウェブサイト翻訳ツールが終了?!まだ使える裏技をご紹介

Top