(画像付)グラフAPIの無期限アクセストークン取得

(追記 編集:2021.07.19　最新版リンク追加)
2021.07/19時点[v.11.0の取得方法はこちら。](https://qiita.com/ari-chel/items/1bb8c0135dd7ec33d261)

(追記 編集:2020.07.15 ハッシュタグの取得を記載)
執筆時点のグラフAPIのバージョンはv.10.0です。

**グラフ APIの無期限アクセストークン取得**
**Instagram表示に必要なパラメータの取得**
**該当するハッシュタグを持つ投稿を取得**

の解説をします。
##準備
- Facebookビジネスアカウント(facebookページ）を作成
- Instagramアカウントをプロアカウントに切り替える
- 上記2つをを連携

<br>
[Instagramビジネスアカウントの作り方](https://ferret-plus.com/curriculums/10740)
[FacebookページとInstagramを連携する方法](https://marketer.jp/facebook-instagram-collaboration-merit.html)

##アプリを作成
[Facebook for developer](https://developers.facebook.com/)にアクセスして、アプリの作成をします。
こちらは特に特別な設定などは必要なく、アプリ名とメールアドレスだけで問題はないようです。


右上のタブからログイン
![スクリーンショット 2019-12-04 17.49.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/a9a01889-1730-6c22-fbe6-3f4f03cc1248.png)
<br>
facebookページの管理者権限を持っている個人用アカウントで
ログイン（先の入力項目は任意)

![スクリーンショット 2019-12-04 17.50.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/c8f28a82-3523-c32e-6a29-0eb8c05beb0e.png)
<br>
マイアプリ(ログインだったタブがマイアプリに変わる)選択

アプリの作成をクリック
<img width="660" alt="スクリーンショット 2020-07-15 14.58.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/b0c0d035-3d5a-4d85-c8ec-f56cf4200e03.png">
ビジネス統合をクリック

- 表示名：外部に出る名前ではないので、管理しやすい名前にします
- 連絡先メールアドレス：必要があれば変更
- アプリを利用できる人:指定がなければ「自分、同じビジネスに所属する人、またはアプリに関する権限がある開発者」でOK
以上２項目を入力

アプリIDを作成してくださいをクリック

セキュリティチェックをして送信するをクリック
<img width="649" alt="スクリーンショット 2020-07-15 15.02.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/c0ff2c67-59ef-dbe6-936e-825bc91d2a3c.png">

<br>
##期限付きアクセストークンの取得
先ほど作成したアプリを使用して、まずは期限付きのアクセストークンを取得しにいきます。このトークンを利用するとInstagram投稿などを取得できるのですが約1時間ほどで無効になってしまうので、そこから期限を延長する、という流れになります。

[Facebook for developer](https://developers.facebook.com/)内の上のツールを選択

[グラフAPIエクスプローラ](https://developers.facebook.com/tools/explorer/)をクリック
![スクリーンショット 2019-12-04 17.52.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/2f84ddc1-2a8d-c414-c463-7a90e3d07b49.png)
<br>

- Facebookアプリ：先ほど作成したアプリを選択
- トークンを取得：ページアクセストークンを取得を選択（Facebookのログイン確認後、紐づけるfacebookページを選択、許可するアクセスを設定後完了)
- 許可を追加：スコープの選択

(manage_pagesは必須。Instagramのビジネスアカウントと紐付けたい場合はbusiness_managementも必要。あとは必要なものを選択)

Get Access Tokenをクリック
![iOS の画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/ca6cecf8-bfab-5361-2a63-0022afa88ddd.jpeg)

![スクリーンショット 2019-12-05 8.34.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/95b3e6ff-72c8-6d66-9edc-2f87c3fd879d.png)
<br>
###business_managementを設定した場合
business_managementを設定していると、Get Access Tokenをクリックした段階で下記のような画面になるので

- 許可するアクションを選択。
- ビジネスの管理にチェック→右下のOK

と進みます。
![スクリーンショット 2019-12-04 22.29.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/73997cee-82b4-99e7-161b-29c5277f8350.png)


![スクリーンショット 2019-12-04 22.29.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/d0fbc546-5f97-637c-619e-162d2305de21.png)
アクセストークンの欄をコピー
**【制限期間付きのアクセストークン】(ここではトークン１とします)**の取得が完了です。
##トークンの延長
###トークン2の取得
**【アプリID】**と**【app_secret】**を取得しに行きます。

[facebook for developer](https://developers.facebook.com/)の画面からマイアプリ

先ほど選択したアプリを選択

左のダッシュボード下の設定からベーシックをクリック

ここで**【アプリID】**と**【app_secret】**が取得できるのでコピー。
**【app_secret】**は隠されてるので表示をクリック。facebook個人用アカウントのパスワードを入力すると開示されます。
![スクリーンショット 2019-12-04 17.59.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/f1dfc519-3a44-cb91-ce90-b2f19c0778a3.png)

1.**【アプリID】**
2.**【app_secret】**
3.**【トークン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=【トークン】```
上記のURLに3つ当てはめたものを、ブラウザで表示。


すると、

```
{"access_token":"hogehogehogehogehogehogehogeho","token_type":"bearer"}
```
のように返ってくるので、"access_token"のあとの"hogehoge"部分をコピー。
これを**【トークン２】**とします。

###トークン3（無期限）トークンの取得
**【トークン２】**を使って下記のurlを開きます。
```https://graph.facebook.com/v3.0/me?access_token=【トークン2】```
ブラウザで表示させます。
必要になるのは"ID"の方なのでそちらをコピー、すぐに使います。

```
{
"name":"hogehoge",
"id":"hogehoge"
}
```

**【トークン２】**と先ほどの"ID"を使い、下記のURLをブラウザで表示。
```https://graph.facebook.com/v3.0/【ID】/accounts?access_token=【トークン2】```

errorにならずにうまくいけば

```
{
"data":[
{
 "access_token":"hogehoge",
 "category":"",
 "category_list":[
  {
```

とページの情報が表示されます。
"acess_token"の中身を確認しましょう。

```
"access_token":"hogehogehoge”,
```
"hogehoge"部分をコピー
[Facebook for developer](https://developers.facebook.com/)内のツール、[アクセストークンデバッガー](https://developers.facebook.com/tools/debug/accesstoken/)
に入れ、デバッグをクリック
![スクリーンショット 2019-12-05 8.44.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/93dd136d-e81a-1e48-29b2-e1b5094029e5.png)



- ページID：希望のfacebookページ
- 有効期限：受け取らない
- スコープ：最初に選んだ項目が表示


以上の項目を確認。

問題なければ、【無期限のアクセストークン】取得成功です。


##パーマリンクを取得

記事のリンクをつなぐためには、記事ごとのパーマリンクの値を受け取る必要があります。
``` https://graph.facebook.com/【アクセストークンデバッガーで確認できるページID】/feed?fields=permalink_url,id,created_time,message,from,full_picture,attachments{unshimmed_url}&access_token=【トークン3】```

こちらのURLに、先ほど [アクセストークンデバッガー](https://developers.facebook.com/tools/debug/accesstoken/)で確認した【ページID】と、無期限のトークンである【トークン3】をコピペしてブラウザで確認してみてください。
。


```
{
   "data": [
      {
         "permalink_url": "https://www.facebook.com/---------/posts/---------/",
         "id": "1234567890_１12345677890",
         "created_time": "2019-88-88T08:88:88+8888",
         "message": "\hogehoge4eac\\u53e4\uu5927\u9hogehoge62bae\u5d0e\u3048\u30hogehoge66\ua\u79cb\uu4e88\u5bhogehoge9ab\u5ca1\u30aa\u30bhogehoge9\u306a5404\u62e0\uhogehoge706\u30a8\u30f3\u\u30hogehoge6e\u63a1\u7316\u4e2dhogehoge\u3067ttps://hogehoget.my31/",
         "from": {
            "name": "------",
            "id": "--------"
         },
```


"permalink_url"の値が返ってきていたらOKです。

##InstagramIDを取得
Instagramのビジネスアカウントを取得するには、
```https://graph.facebook.com/【アクセストークンデバッガーで確認できるページID】?fields=instagram_business_account&access_token=【トークン3】```
 こちらのURLで確認してください。

```
{
   "instagram_business_account": {
      "id": "1234567890"
   },
   "id": "1234567890"
}
```
 このように返ってきたらOKです。上のIDがInstagramIDになります。


##任意のハッシュタグが付いたinstagramの投稿を取得する

```
https://graph.facebook.com/v5.0/ig_hashtag_search?user_id=【instagramID】&q=【検索したいハッシュタグ】&access_token=【トークン3】
```


上記のURLを入力すると、【検索したいハッシュタグ】で入力したハッシュタグ自身のIDを取得できます。
【検索したいハッシュタグ】の先頭には#は不要。複数は不可です。
下記が返ってきます。

```
{
   "data": [
      {
         "id": "12345678912345678"
      }
   ]
}
```

取得できたハッシュタグIDを含め下記のURLに打ち込みます。

```
https://graph.facebook.com/v5.0/【ハッシュタグID】/top_media?user_id=【instagramID】&access_token=【トークン３】
```

```
{
   "data": [
      {
         "id": "89012345671234567"
      },
      {
         "id": "12345678901234567"
      },
      {
         "id": "23456789011234567"
      },
      {
         "id": "89012345671234567"
      },
      {
         "id": "58901234567671234"
      }
   ],
   "paging": {
      "cursors": {
         "after": "OWQ3ZADXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXD"
      },
      "next": "https://graph.facebook.comXXXXXXX"
   }
}
```

上記の様に、該当のハッシュタグを持つ記事IDの一覧が返ってきます。
ただIDだけでは使い道がないので、パラメータを足します。

```
https://graph.facebook.com/v5.0/【ハッシュタグID】/top_media?user_id=【instagramID】&fields=media_url,media_type,comments_count,id,like_count,children{media_url,permalink},permalink,caption&access_token=【トークン３】
```

パラメータは必要なものを足してください。

###2枚以上の投稿だとmedia_urlの場所が変わる

上記のURLから取得すると、下記のように返ってきます。

```
{
   "data": [
      {
         "media_type": "CAROUSEL_ALBUM",
         "comments_count": 10,
         "id": "12345678901234567",
         "like_count": 10,
         "children": {
            "data": [
               {
                  "media_url": "https://scontXXXXXXXXXXXXX",
                  "permalink": "https://www.instagram.comXXXXXXXXXX",
                  "id": "12345678912345678"
               },
               {
                  "media_url": "https://scontXXXXXXXXXXXXX",
                  "permalink": "https://www.instagram.comXXXXXXXXXX",
                  "id": "12345678912345678"
               },
               {
                  "media_url": "https://scontXXXXXXXXXXXXX",
                  "permalink": "https://www.instagram.comXXXXXXXXXX",
                  "id": "12345678912345678"
               }
            ]
         },
         "permalink": "https://www.instagram.comXXXXXXXXXXXXXX",
         "caption": "\u6628\u65e5\u3001\uXXXXXXX
      },
      {
         "media_url": "https://scontent-lax3-1.cdXXXXXXXXXXX",
         "media_type": "IMAGE",
         "comments_count": 10,
         "id": "12345678901234567",
         "like_count": 10,
         "permalink": "https://www.instagram.comXXXXXXXXXXXXXX",
         "caption": "2019\u5e7411\u670826\u65e5\u3001\u300e\u30df\XXXXXX
      }
   ],
   "paging": {
      "cursors": {
         "after": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxTkZD"
      },
      "next": "https://graph.facebook.comXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
   }
}
```

instagram側で複数の画像を一緒に投稿していた場合、media_typeは「CAROUSEL_ALBUM」となり区別されます。
サイトに表示するサムネイルを「media_url」から取得する場合、この「CAROUSEL_ALBUM」では「media_url」を「children」内のdataから持ってくる必要があるので注意が必要です。
##参考にしたサイト
https://himemo.net/archives/371
https://developers.facebook.com/docs/graph-api/changelog/version3.3/
https://qiita.com/yukihirai0505/items/047de69e3e51698d0ba7
https://qiita.com/1000VICKY/items/684a5702e160d0382d23