【SNS】インスタグラムの画像をHPに表示させる方法
- 公開日：
- 更新日：
- 文字数：4440文字
目次
はじめに
このページは約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の情報を後ほど使用するので、そちらの情報の確認作業に入ります。
画像の左サイドバーの設定＞ベーシックを選択
アプリIDとapp secret(memo-1)をメモしておきます。
ユーザーアクセストークンを取得
https://developers.facebook.com/tools/explorer/
上記urlにアクセスすると右画像のような表示がされます。
Get Access Tokenをクリックすると新規ウインドウが開きます。
ログインしますかと聞かれるのでアプリを作成したアカウントでログインしてください。
はじめてログインするとFacebookログインの確認が表示されますので、ログイン情報が間違ってなければログインをして次にすすんでください。
Instagramアカウントを選択
Instagramアカウントで、どのインスタの情報を取得するかをチェック
次へをクリックするとfacebookもアカウントも選択するページになりますので、該当のfacebookページにチェックをいれます。
完了するとアクセストークンが発行されます。
そのアクセストークン(memo-2)をコピーしておきます。
2段階目のアクセストークンを取得
先ほどのアプリIDとapp secret(memo-1)
アクセストークン(memo-2)
こちらを使用します。
テンプレート
/*こちらはテンプレートになります*/ https://graph.facebook.com/v5.0/oauth/access_token? grant_type=fb_exchange_token&client_id=【ここにアプリIDを入力】&client_secret=【ここにapp secretを入力】&fb_exchange_token=【ここに1段階目のアクセストークン(memo-2)を入力】
URLをブラウザに入力すると、アクセストークンが表示されますので、そちらのアクセストークン(memo-3)をコピーしておきます。
3段階目のアクセストークンを取得
アクセストークン(memo-3)こちらを使用します。
テンプレート
/*こちらはテンプレートになります*/ https://graph.facebook.com/v5.0/me?access_token=【2段階目のアクセストークン(memo-3)をここに入力】
こちらでブラウザに入力
name,idが返されるので、id(memo-4)をコピーしておく。
アクセストークン(memo-3)とid(memo-4)を下記テンプレートに差し替えてください。
テンプレート
/*こちらはテンプレートになります*/ https://graph.facebook.com/v5.0/【直前に取得したidをここに入力】/accounts?access_token=【2段階目のアクセストークンをここに入力】
ブラウザでアクセスすると、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/
テンプレート
/*こちらはテンプレートになります*/
me?fields=accounts{instagram_business_account}
こちらを上記画像のように入力します。すると下記テンプレートのようにinstagram_business_accountという項目にidが入っておりますので、こちらのID(memo-6)をメモしておきます。
表示イメージ
/*こちらは表示例になります*/
"instagram_business_account": {
"id": "??????????????"
},
この3段階目のアクセストークン(memo-5)とinstagram_business_account(memo-6)を取得できれば表示することができます。