InstagramグラフAPI

もくじ > Web開発ノート > リッチサイト+JavaScript

最近はホームページとかを更新するよりも、SNSを更新するほうがユーザー受けが良い時代だったりします。それでも企業イメージやブランド全体の情報伝達にはWebサイトが必要です。

でもSNSとWebサイト両方を更新は面倒くさいし・・。

そんな時は、SNSのAPIを使ってSNSの更新がWebサイトにリアルタイムに反映されるような仕組みを作ってみましょう。

Youtubeチャンネルの更新が反映されるYoutube Data APIの設置方法は比較的わかりやすいですが、インスタグラムのAPIは結構面倒くさい手続きが必要になります。

ここでは、その面倒くさい部分の手助けになるようなヒントを混ぜながら、Instagram Graph APIの使い方をまとめます。

Instagram Graph API公式サイト

Instagram Graph APIの手続き

以下のページに、APIの導入方法や、細かい設定について、かなり親切丁寧なマニュアルが公開されています。

Instagram Graph APIを使うまでの設定
Instagram Graph APIの使い方の詳しいリファレンス

一度、APIが動く段階まで進められれば、感覚がつかめるので、これらの開発者向け情報が本当に親切丁寧な内容だとわかるのですが、初めての場合、ハッキリ言って心が折れそうなほど面倒で意味がわからないです。まずはやり方の一例として、以下に、自分のアカウントの投稿内容を取得する手順をまとめました。

Instagram Graph APIができることは色々あります。実装する機能によってまた別の手続きが必要になりますが、まずは、基本的な手順を実際にやってみて感覚をつかんでから、他の機能にも挑戦してみてください。

Instagramをプロアカウントにする

Instagramには、通常のアカウントと、プロアカウントと呼ばれるちょっと多機能なアカウントの2種類があります。(プロアカウントはビジネスアカウントという名前で表現されている場合もあります。)

プロアカウントはアクセス解析機能や投稿関係の補助機能など、アカウントの運用上便利な機能があります。InstagramのAPIを使う時はアカウントをプロアカウントにする必要があります。

スマートフォンでInstagramにログインし、設定画面から、アカウントをプロアカウントに切り替えてください。その際、クリエイターかビジネスかを選ぶ項目が出てきます。目的に合ったほうを選んでください。

FacebookページとInstagramのプロアカウントを連携させる

InstagramはFacebook社が運営しています。Instagram Graph APIを使う時は、必ずFacebookページを作成する必要があります。作成したFacebookページの設定からInstagramの項目を選択し、アカウントをリンクさせてください。

Facebookのアプリを作成

Facebook関係のAPIを使う時は、それをアプリとして管理します。Facebookの開発者管理ページから、マイアプリの項目を選択し、そこでアプリを作成して、APIを動作させるためのアプリを定義しておいてください。

このあたりの設定画面はよく変更されます。この先、表現や手順が多少変わっているかもしれません。

まず、アプリの作成ボタンを押して、表示された一覧の中からビジネス統合の管理を選択します。

アプリ表示名、アプリの連絡先メールアドレス、アプリの目的、などを入力し、Instagram Graph APIという製品(Productと表現されているかもしれません)を追加します。

アクセストークン1取得

とりあえず、Instagram Graph APIのアプリの作成ができると、グラフAPIエクスプローラというものを開く事ができるようになります。

この画面では、APIの設定と動作確認をする事ができます。

この画面では、対象のFacebookアプリを選択し、アクセス許可する機能を選択します。

例えば、Instagramの投稿を取得したければ、以下の機能を追加してください。

pages_show_list
business_management
instagram_basic

そして、この画面の上のほうにある文字の羅列、アクセストークンをコピーして記録しておいてください。このアクセストークンを【アクセストークン1】とします。

使いたいAPIの処理によって、どんな機能が必要なのかは、Instagram Graph APIのリファレンスに書いてあります。

アクセストークン2取得

アクセストークン1があるという事は、アクセストークン2もあります。これは3までありますので、頑張ってください。

Facebookの開発者管理ページマイアプリの一覧ページから、使うアプリを選択すると、左側にダッシュボードとか設定とか、の項目が表示されます。その設定の下層のベーシックを押してください。

この画面の中にある、アプリIDapp secretをメモして記録しておいてください。

そして、ブラウザから、以下のURLを打ち込んでアクセスします。

https://graph.facebook.com/v8.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリid】&client_secret=【app secret】&fb_exchange_token=【アクセストークン1】

ブラウザに、以下のようなものが表示されたら成功です。

{
 "access_token":"【ここにアクセストークン2が表示されます】",
 "token_type":"bearer","expires_in":000000
}

表示された【アクセストークン2】を記録しておいてください。

アプリのidを取得

次はブラウザから、以下のURLを打ち込んでアクセスします。

https://graph.facebook.com/v8.0/me?access_token=【アクセストークン2】

そして、以下のようなものが表示されたら成功です。

{
 "name": "\uで始まるなにかごちゃごちゃした文字列", 
 "id": "【ここにアプリのidが表示されます】"
}

【アプリのid】を記録しておいてください。

アクセストークン3取得

次はブラウザから、以下のURLを打ち込んでアクセスします。

https://graph.facebook.com/v8.0/【アプリのid】/accounts?access_token=【アクセストークン2】

そして、以下のようなものが表示されたら成功です。

"data": [
 {
  "access_token": "【アクセストークン3】 ",
  "category": "なにか文字列",
  "category_list": [
    {
     "id": "なにか文字列",
     "name": "なにか文字列"
    }
   ],
   "name": "アプリ名",
   "id": "なにかの数字",
   "tasks": [
    "ANALYZEなど",
    "ADVERTISEなど",
    "MODERATEなど"
   ]
  },

【アクセストークン3】を記録しておいてください。

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

グラフAPIエクスプローラにアクセスして、コマンド入力部分に以下の文字列を入力します。

me?fields=accounts{instagram_business_account,name}

すると作成してある全アプリの情報が表示されます。

{
"accounts": {
 "data": [
  {
   "instagram_business_account": {
   "id": "【InstagramビジネスアカウントID】"
  },
  "name": "アプリ名",
  "id": "なんかの数字"
 },
・・・

【InstagramビジネスアカウントID】を記録しておいてください。

Instagram Graph APIの使い方

ここまでの手順で取得した【InstagramビジネスアカウントID】【アクセストークン3】を使って作ります。

PHPの実装例

APIはGETを飛ばしてJSONで受け取ります。JavaScriptやPHPなど、あらゆる言語に対応していますが、アクセス数に制限があるので、サーバサイドプログラムを工夫して、アクセス制限に対応したほうが良いでしょう。

$count = '取得件数';
$id = '【InstagramビジネスアカウントID】';
$token = '【アクセストークン3】';

$json = file_get_contents(
 "https://graph.facebook.com/v8.0/{$id}
  ?fields=name%2Cmedia.limit({$count})%7Bcaption%2Cmedia_url%2Cthumbnail_url%2Cpermalink%7D
  &access_token={$token}
 "
);

$json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
$obj = json_decode($json, true);

Instagram Graph APIを使うまでの設定
Instagram Graph APIの使い方の詳しいリファレンス
Instagram Graph APIの利用制限対策はこちら