Instagram Graph Api を使ってインスタグラムの投稿を取得する

インスタグラムの投稿をウェブページに埋め込む方法を調べました。目的はあるハッシュタグの投稿を抽出してウェブページに表示させたいというものです。

 調べる前はオフィシャルの埋込コードがあると思っていたのですが、無いことが判明。APIを使ってプログラミングするしかないのですが、情報収集になかなか苦労しました。以前使われていた「Instagram API」は使えなくなり「Instagram Graph Api 」に移行するという情報はたくさんあるのですが、肝心のInstagram Graph Apiの使い方についての情報が少ないです。それでも何とかできそうなところまでこぎつけました。

******************************

①Instagramアカウントを作り、「ビジネスアカウント」に変更します。変更はアプリでしかできません。（Instagramは恥ずかしながら初めて使ったのですがPCではほとんど使えず、アプリで完結させる方針のようです）
ビジネスアカウント変更時にFacebookと連携（リンク）させる必要があるのですが、ここで新規に作ることもできます。私の場合、Facebookはインストール・設定済みだったのですが、「新規」にしたら既存アカウントに「新しいページ」が追加されました。この辺の挙動はよくわかりません。

②facebook for developpers（https://developers.facebook.com）にログインし、アプリを作成します。「表示名」は任意。

③アプリの「ダッシュボード」に入り、「アプリID」を控えておきます。（以下【アプリID】）

④「設定」→「ベーシック」に入り、「app secret」を控えておきます。（以下【app_secret】）

⑤「ツール」→「グラフAPIエクスプローラ」に入り、「トークンを取得」→「ユーザーアクセストークンを取得」
アクセス許可が表示されますので以下をチェックします。
　business_management　manage_pages　pages_show_list
　publish_pages　instagram_basic　instagram_manage_insights
※この部分、参考にしたサイトごとに選択が違っていてどれが正解かわかりません。「最初は動いたのにいつも何か動かなくなってチェックを追加したら復旧した」という記述も見られましたので何か不具合があったらここを疑うのが良いかと。
※この時にfacebookのアクセス許可を求められた気がします。
トークンが表示されるので、それを控えておきます。（以下【トークン1】）

⑥取得したトークンは1日？限定なので、これを1か月？に伸ばします。この後さらに無期限に伸ばしますのでこの作業は必要ないのかもしれませんが、参考にしたサイトに倣います。ブラウザで以下のURLを叩きます。
https://graph.facebook.com/v3.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリID】&client_secret=【app_secret】&fb_exchange_token=【トークン1】
表示されたトークンを控えておきます。（以下【トークン2】）
※「ツール」→「アクセストークンデバッガー」で期限が確認できます。

⑦以下のURLを叩きます。
https://graph.facebook.com/v3.0/me?access_token=【トークン2】
表示されたidを控えておきます。（以下【id】）

⑧以下のアドレスを叩きます。
https://graph.facebook.com/v3.0/【id】/accounts?access_token=【トークン2】
表示されたトークンを控えておきます。（以下【トークン3】）
※アクセストークンデバッガーで「有効期限」が「受け取らない」になっていれば成功。

⑨IGビジネスIDを取得します。グラフAPIエクスプローラでアクセストークン欄に【トークン3】を入力し、アドレスバーのような箇所に次の内容を入力して「送信」
me?fields=instagram_business_account,connected_instagram_account,instagram_accounts{id,username}
表示されたidを控えておきます。（以下【IGビジネスID】）
※この部分で引っ掛かりました。多くのサイトで以下の様に書かれていて、それだとエラーで取得できませんでした。
me?fields=accounts{instagram_business_account}

⑩ここまでくればいよいよ実践編です。まずは自分の投稿を取得してみましょう。Instagramで投稿した後に以下のURLを叩きます。
https://graph.facebook.com/v3.0/【IGビジネスID】?fields=name%2Cmedia.limit(【表示したい件数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=【トークン3】
成功するとちょっとした感動でした。

⑪次に他人の投稿をハッシュタグで抽出してみましょう。まずはハッシュタグに付いている「ハッシュタグID」を調べます。
グラフAPIエクスプローラでアクセストークン欄に【トークン3】を入力し、アドレスバーのような箇所に次の内容を入力して「送信」。
ig_hashtag_search?user_id=【IGビジネスID】&q=【任意のハッシュタグ】&access_token=【トークン3】
表示されたハッシュタグIDを控えておきます。（以下【ハッシュタグID】）

⑫指定したハッシュタグを含む投稿IDを取得します。グラフAPIエクスプローラでアクセストークン欄に【トークン3】を入力し、アドレスバーのような箇所に次の内容を入力して「送信」。
【ハッシュタグID】/top_media?user_id=【IGビジネスID】&access_token=【トークン3】
投稿IDが表示されたら成功です。

⑬投稿IDがわかってもあまり使い道がないですね。次は画像のURLなど詳しい投稿内容を取得します。グラフAPIエクスプローラでアクセストークン欄に【トークン3】を入力し、アドレスバーのような箇所に次の内容を入力して「送信」。
【ハッシュタグID】/top_media?user_id=【IGビジネスID】&fields=media_url,media_type,comments_count,id,like_count,children{media_url,permalink},permalink,caption&access_token=【トークン3】
投稿内容が表示されたら成功です。

**************************************

以上です。URLをプッシュすればjsonが返ってきますので、後はjavascriptなりruby、phpなど、好きなようにプログラミングすれば良いでしょう。

上記の手順ではブラウザのURLを叩いたりグラフAPIエクスプローラを使ったりしました。複数のサイトを参考にしたのでごちゃまぜになりましたが、たぶんブラウザ／グラフAPIエクスプローラ、どちらかだけで完結できると思います。例えば最後の⑬はブラウザでも実行できます。
https://graph.facebook.com/v3.0/【ハッシュタグID】/top_media?user_id=【IGビジネスID】&fields=media_url,media_type,comments_count,id,like_count,children{media_url,permalink},permalink,caption&access_token=【トークン3】
ただし、URLの「v3.0」の部分、参考サイトが皆このように書かれていたのでそれに倣ったのですが、グラフAPIエクスプローラの画面には「v4.0」と表示されているので、「v4.0」と書き換えた方が良いのかもしれません。ちなみに「v4.0」に変えても同じ結果が返ってきました。

GoogleなどもそうですがFacebookも頻繁に仕様が変わります。現段階ではうまく動いたとしても明日には動かなくなるかもしれません。実際、参考にしたサイトどおりに実践してもうまく動かないことが多く、Instagram Graph Api が公開されてからの短期間にも仕様が変わったことがうかがえます。オフィシャルのウィジェットなり用意してくれるとありがたいのですが、前述の通りInstagramはPCには表示させたくない方針（あくまで私感）のようなので期待薄です。