News

お知らせ

Webサービス

非エンジニアのためのインスタ連携

カテゴリ:Webサービス
2020.02.29

こんにちは。2020年インスタ連携をちょっとまとめてみました。
InstagramのフィードをWebサイトに表示させる際に、今まで「Instagram API」を使用していましたが、仕様の変更により、これまでの「Instagram API」が廃止され、Facebook「グラフAPI」を使用します。

ちょっと手間だと思ったので備忘録と誰かの手助けにと思い記録しています。
ここでは、「グラフAPI」の取得方法を解説していきます。取得後の、実装については省略していますのでご了承ください。

「グラフAPI」はFacebookの開発者ツールです。
https://developers.facebook.com/

<準備>
◯ Instagramのビジネスアカウントの開設
◯ Facebookページ(ビジネス用)の開設と「管理者権限」があることが前提となります。

<目次>
1.Facebookとインスタグラムの連携方法
2.Facebook for developersの開発者登録
3.アプリの作成
4.アクセストークンの取得(1回目/期間制限あり/1時間
5.アクセストークンの取得(2回目/期間制限あり/2ヶ月
6.アクセストークンの取得(3回目/無期限
7.InstagramビジネスアカウントIDを取得
8.実装について(省略)


1. Facebookとインスタグラムの連携方法


開設したFacebookページの「設定」画面から
①「Instagram」をクリックし、
②アカウントの紐付け(リンク)を行います。

③Instagramにログインします。

④下の画面のように表示されたら連携完了です。


2.Facebook for developersの開発者登録


①ログイン画面

②自身のIDとパスワードでFacebookへログイン

ログイン後の画面推移(メニュー右上にマイアプリと表示されます。)

一度も、Facebookデベロッパーを使用した事が無い場合には、まずは、Facebook開発者登録を行う必要があります。
※本人確認書類が必要になります。例)免許証など
 初めての認証の際は、数時間かかると思います。

<認証方法>
Facebook for developersダッシュボード
→設定
→個人認証
→認証する
→必要書類の送付
その後、Facebookから承認メッセージが届くとステータスがグリーンに表示されます。

④個人認証が完了すると下記の画面に認証ステータスが表示されます。
<サンプル>


3.アプリの作成


①マイアプリメニューから「アプリを作成」ボタンをクリックします。

②新しいアプリIDを作成する画面が表示れますので、「表示名」と「連絡先メールアドレス」を入力し、アプリIDを作成してください。
※表示名に「instagram」「facebook」の文字アルファベットは使えません。

③セキュリティチェックが表示されますので完了します。


4.アクセストークンの取得(1回目/期間制限あり/1時間)


①ツールメニューから「グラフAPIエクスプローラ」クリックします。

②グラフAPIエクスプローラの画面でアクセストークンの取得をするため、設定を行います。

ユーザーアクセストークン種別が3種類表示されますが、管理しているFacebookページが一つの場合は「ユーザーアクセストークンを取得」を選択し進みます。
管理しているFacebookページが複数ある場合は、上から3つ目の「ページアクセストークンを取得」してから「ユーザーアクセストークンを取得」を行います。
※ここでは、管理しているFacebookページが一つの場合の画面キャプチャを掲載しています。

③ツールメニューから「ユーザーアクセストークンを取得」クリックすると、確認画面が表示されますのでログインします。

④ユーザートークンの「アクセス許可」の設定を行います。
下記のよう許可を追加欄に入力し、選択します。

business_management
manage_pages
pages_show_list
instagram_basic

※今回は、Instagramのフィードを取得できる最低限のアクセス許可にしています。

⑤有効期限1時間のアクセストークンを取得します。
「Get Access Token」を押してアクセストークンを取得します。


5.アクセストークンの取得(2回目/期間制限あり/2ヶ月)


①ツールメニューから「アクセストークンデバッカー」クリックします。

②アクセストークン情報が表示されます。

③有効期限2ヶ月のアクセストークンを取得します。
「アクセストークンの延長」

④パスワード認証します。

⑤有効期限2ヶ月延長のアクセストークンが発行されます。

⑥デバックボタンを押し、画面を更新します。

⑦有効期限が(約2ヶ月以内)と表示されます。
上部に表示されている「アクセストークン」をコピーします。


6.アクセストークンの取得(3回目/無期限)


①ツールメニューから「グラフAPIエクスプローラ」画面に移動します。

②既に表示されている「アクセストークン」を削除し、先程コピーした「有効期限2ヶ月のアクセストークン」をペーストします。
※アクセストークンは微妙に違うのでご注意ください。

③上部のバーに下記コード入力します。

me/accounts

④送信ボタンをクリックします。

その後、アカウント情報が出力されます。
⑤ “access_token”: “xxxxxxxxxxxxxxxxxxxxx”,

⑥アクセストークンをコピーし、

⑦もう一度ツールメニューから「アクセストークンデバッカー」画面に移動します。

⑧アクセストークンをペーストします。

⑨デバックボタンをクリックします。

⑩アクセストークン情報が表示されます。
先ほどの有効期限欄が「受け取らない」となれば成功です。


7.InstagramビジネスアカウントIDを取得


①もう一度「グラフAPIエクスプローラ」を開きます。

②上部のバーに下記のコードを入力します。

me?fields=accounts{instagram_business_account}

③送信をクリックします。

④インスタグラムのビジネスアカウント情報が取得が表示されます。
 赤下線の部分が「インスタグラムのビジネスアカウントID」です。

これで、埋め込みに必要な「無期限のアクセストークン」と「InstagramビジネスアカウントのID」の取得が完了しました。


8.実装について(省略)


最後に、アクセストークンをなぜ3回取得しなければならないのか? 簡単にいうと「条件付きで使用証明書」を発行するということだと思います。気になる方は、検索で「アクセストークン 実装」で調べてみてください。

この情報は、2020年2月29日時点のものです。

Share:
8 / 8