Help us understand the problem. What is going on with this article?

instagram graph api 登録のちょっとした手順

案件でPHPの投稿を取得し、サイト内に表示させる機会がありました。
珍しくないことではあるが、実案件としては初めての機会であり、取得→表示に手こずったので(説明をきちんと読まない悪い癖のせいでもあるが)、忘れないようにメモしておきます。

API

この類のAPIは以下が挙げられるかと思います。
https://web.analogstd.com/tips/posts/api/instagram-grapgh-api-facebook.php

Instagram API

提供元:Instagram

言わずもがなですが、2020年に利用停止となりますので、今から使う方はいないでしょう。。。
現状、使用しているサイトは見直しが必要ですね

Instagram Graph API

提供元:Facebook
今回こちらを採用しました。

トークンの取得

利用には、トークンの取得が必要です。今回、この手順はディレクターにおまかせして、諸々登録ご完了後に必要そうな情報を一式いただきました。
なので、今回は説明を割愛します。また、機会があれば改めてまとめることにしよう。
すごいめんどくさいらしいです。。。

最終的に、必要となる情報は

  • 無期限のトークン(場合によって、第3のトークンと呼ばれる。)
  • Instagramのビジネスアカウント(Facebookビジネスより登録。)

すで無期限のトークンを頂いていましたが、そもそもそれが何なのかわからなかったので、見直しがてら自分で作業を行いました。

無期限のトークンの取得

取得したトークン2を使って下記のurlにアクセスします。
https://graph.facebook.com/v3.0/me?access_token=【トークン2】
すると、オブジェクトが表示されるはずです。

{
 "name":"hoge",
 "id":"fuga"
}

トークン2IDを使用して、下記にアクセスします。
https://graph.facebook.com/v4.0/【ID】/accounts?access_token=【トークン2】
(※vはバージョンです。適宜変更してください。自分はv4.0だったはず)
以下のように表示されたらおkです。

{
"data":[
{
 "access_token":"fugafuga",
 "category":"",

// 省略
}

このaccess_token第三のトークン(無期限のトークン)と呼ばれる最終必要情報です!(ここまでが長い〜)
表示されたアクセストークンを、facebook for developerのアクセストークンデバッカーに入力して、諸々設定を確認
とりあえず、有効期限は受け取らないにしておくといいかと思います。
(この辺の作業、ディレクターに行っていただいたので詳細は割愛させてください。。。。)

投稿の確認

ここまで間違っていないか確認します。
https://graph.facebook.com/【アクセストークンデバッガーで確認できるページID】/feed?fields=permalink_url,id,created_time,message,from,full_picture,attachments{unshimmed_url}&access_token=【無期限のトークン】

問題なければ、instagramの投稿情報がもろもろ表示されるはずです。

{
 "data": [
  {
   "permalink_url": "https://facebookurl",
   "id": "000",
   "created_time": "2019-",
   "message": "hogehoge", 
  // 略

perma_linkにアクセスして、問題なく該当の投稿が表示されればおkです。

instagram ビジネスアカウント

無限のトークンの他に必要な情報です。下記、アクセスします。
https://graph.facebook.com/【アクセストークンデバッガーで確認できるページID】?fields=instagram_business_account&access_token=【無期限のトークン】
以下のように表示されたらおkです。

"instagram_business_account": {
 "id": "1234567890"
},
"id": "1234567890"

出力

いよいよ出力します。
今回は、jsonとしてデータを受け取り、jsで表示処理を別途行います。(ajaxでとりあえずconsole出力してみましょう。)
こんな感じでしょうか。
(セキュリティの問題上、jsで処理するのではなく、PHPで処理しましょう。)

get.php
$accessToken = 'hogehoge'; // アクセストークン
$businessId = '111111'; // ビジネスアカウントID
$fields = 'media{caption,media_url,permalink,timestamp}'; // 取得するデータのパラメータ
$url = 'https://graph.facebook.com/v4.0/'.$businessId."?fields=name%2Cmedia.limit(4)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cthumbnail_url%2Cmedia_type%2Cusername%7D&access_token=".$accessToken;

$jsonData = file_get_contents($url);
$json = json_decode($jsonData, true);
echo json_encode($json["media"]["data"]);

最後に

記事の書き始めから、2週間ほど経過しており少しすでに曖昧になっている点も有りました。(冒頭、忘れないためのメモ書きという趣旨を書いていましたが。。。)間違いがありましたら、申し訳ありません。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした