Instagram SNS
2020.01.10

【SNS】インスタグラムの画像をHPに表示させる方法

SNSで代表とされるInstagram(インスタグラム)のAPIが2019年後半ぐらいから使用できなくなり、FacebookのAPIから取得しなければならなくなりました。ホームページに表示させるために、少し複雑になりました。そこでわかりやすく方法について説明していきます。

はじめに

このページは約10分で読むことができます。

このページの対象者

  • ホームページにプラグインを使わずにInstagramの写真を埋め込みたい方
  • すでにFacebookとInstagram(ビジネスアカウント)のページを作成しており、かつアカウントの紐付けをしている方

アカウントの紐付けの確認方法

Instagramのアプリで、設定>アカウント>リンク済みのアカウント>Facebookで確認できます。

Instagram APIの廃止について

Google翻訳すると

更新:2019年10月15日から、Instagram Basicプラットフォームの新規クライアント登録と許可レビューは廃止され、Instagram Basic Display APIが採用されました。 Instagramユーザーのプライバシーとセキュリティを継続的に改善するために、Instagram API Platformの廃止を加速し、次の変更をすぐに有効にします。これはお客様のビジネスやサービスに影響を与える可能性があることを理解しており、プラットフォームを安全に保つためのサポートに感謝しています。 これらの機能はすぐに無効になります(以前は2018年7月31日または2018年12月11日の廃止に設定されていました)。以下は、以前共有したタイムラインに従って廃止されます。 パブリックコンテンツ-2018年12月11日にユーザーに代わってパブリックメディアを読み取るための残りのすべての機能 基本-2020年初頭にユーザー自身のプロファイル情報とメディアを読む 参考のために、新しいInstagram Graph APIに関する情報。

INSTAGRAMのデベロッパーをみてみると、最後にnew Instagram Graph APIを参考にとのことでした。 ドキュメンタリーを参考に手順を説明していきます。

1段階目のアクセストークンの取得

アプリの作成

上記画像(facebook for developers公式サイト)の右上にあるマイアプリから新規作成しましょう。マイアプリを押す下にアプリの作成がありますのでそちらをクリックしてください。

クリックすると画像2-1の新しいアプリIDを作成とでますので情報を入力していきます。

アプリが完了すると画像2-2のページにいきます。

画像2-1
画像2-2

アプリIDとapp srcretを取得

アプリIDとapp secretの情報を後ほど使用するので、そちらの情報の確認作業に入ります。 画像の左サイドバーの設定>ベーシックを選択 アプリIDapp secret(memo-1)をメモしておきます。

ユーザーアクセストークンを取得

https://developers.facebook.com/tools/explorer/

上記urlにアクセスすると右画像のような表示がされます。
Get Access Tokenをクリックすると新規ウインドウが開きます。
ログインしますかと聞かれるのでアプリを作成したアカウントでログインしてください。

はじめてログインするとFacebookログインの確認が表示されますので、ログイン情報が間違ってなければログインをして次にすすんでください。

Instagramアカウントを選択

Instagramアカウントで、どのインスタの情報を取得するかをチェック
次へをクリックするとfacebookもアカウントも選択するページになりますので、該当のfacebookページにチェックをいれます。
完了するとアクセストークンが発行されます。
そのアクセストークン(memo-2)をコピーしておきます。

2段階目のアクセストークンを取得

先ほどのアプリIDapp secret(memo-1)
アクセストークン(memo-2)
こちらを使用します。

テンプレート

URLをブラウザに入力すると、アクセストークンが表示されますので、そちらのアクセストークン(memo-3)をコピーしておきます。

3段階目のアクセストークンを取得

アクセストークン(memo-3)こちらを使用します。

テンプレート

こちらでブラウザに入力 name,idが返されるので、id(memo-4)をコピーしておく。 アクセストークン(memo-3)とid(memo-4)を下記テンプレートに差し替えてください。

テンプレート

ブラウザでアクセスすると、3段階目のアクセストークン(memo-5)が取得できるので、コピーしておきます。

instagramビジネスアカウントIDを取得

アクセストークンデバッカー 下記URLにアクセス

https://developers.facebook.com/tools/debug/accesstoken/

3段階目のアクセストークン(memo-5)を入力。

有効期限が受け取らない、詳細なスコープで、manage_pages、pages_show_list、publish_pages、instagram_basicがはいっているかを確認します。

instagram_business_accountを取得

https://developers.facebook.com/tools/explorer/

テンプレート

こちらを上記画像のように入力します。すると下記テンプレートのようにinstagram_business_accountという項目にidが入っておりますので、こちらのID(memo-6)をメモしておきます。

表示イメージ

 

この3段階目のアクセストークン(memo-5)instagram_business_account(memo-6)を取得できれば表示することができます。