FacebookのAPIを使って投稿内容（画像・テキスト）を取得する

記念すべき初投稿！
今回はタイトル通りFacebookのAPIを使って投稿内容（画像・テキスト）を取得する方法について
記事にしていきたいと思います。

#1.開発者アカウントを作る
※既にアカウントを作成済な方は、まるっとこの章をすっ飛ばしてください※

アカウントをもっていない場合は、
https://developers.facebook.com/
にアクセスして、facebook for developersの開発者アカウントを作成してください。

ページのヘッダにある「スタートガイド（画像のオレンジ枠）」から開発者アカウントを作成します。
<img width="1680" alt="FB開発者ページ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612137/61fc27c3-4f45-2582-e5ac-06c335b8f310.png">

#2.新しいアプリを作成
新しくアカウントを作ると認証やらなんやら登録する部分があり、終わると下のような画面になります。
アプリIDの作成に「表示名」と「連絡先メールアドレス」を入力してください
※今回、表示名は「APIGetTest」とします。連絡先メアドはデフォルトで登録時のアドレスが入力されています。
<img width="1680" alt="FB開発者ページ（新しいアプリを作成）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612137/50ec42c4-441b-bdde-656b-b33f5e22798c.png">

#3.グラフAPIを使ってデータを取得
アプリに入ると、下のようなダッシュボードに飛びます。
ヘッダーにある「ツール」から「グラフAPIエクスプローラ」をクリック
<img width="1680" alt="アプリページ（ダッシュボード）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612137/e3e859b8-48b5-b620-dfcc-4f7172a30f9b.png">

#4.グラフAPI
グラフAPIエクスプローラを開くとこのような画面に移動します。
初期設定状態なので特に権限も付与されていません。
このままではデータの取得はできないので、権限を追加して、アクセストークンを発行しましょう。
<img width="1680" alt="グラフAPIエクスプローラ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612137/b7fe833a-481c-2651-e172-75897b1c086f.png">

## アクセストークンを作る
今回の目的は、

**「投稿内容（画像・テキスト）を取得する」**

ということなので、投稿内容を取得する権限を付与しなければなりません。
取得なので左上のプルダウンから「GET」を選択してください。

ユーザーアクセストークンを作らずに取得を試みると下図のようにエラーが発生します。
画像右の「ユーザーアクセストークンを取得」をクリックしてから、権限を増やしていきましょう。
<img width="1680" alt="グラフAPIエクスプローラ（エラー）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612137/319314e0-e7c4-9391-db59-39a26a51a720.png">

権限を増やす際は、「ユーザーアクセストークンを取得」を選択した後にさらに下にプルダウンがでてくるので、
その中から欲しい権限を追加してください。
今回は投稿内容なので、「user_posts」を選択します。
そしたら右上の青いボタン「Generate Access Token」をクリックして、アクセストークンを生成します。
（**※権限を変更する度にアクセストークンを作ってください。でないと権限は更新されないので右下に追加しても取得できません。**）

詳しい権限に関しては公式ドキュメントへどうぞ↓
https://developers.facebook.com/docs/facebook-login/permissions


次に、左の「フィールドを検索」の箇所に「posts」、さらにその下層に「message,full_picture」の2種を設定します。
ちなみにpostsの配下にはもう一つ写真を取得する方法としてpictureがありますが、縮小版の画像を取得することができるみたいです。

では画面左にある送信ボタンをクリックしてみます
権限追加がしっかりとなされているので、データの取得ができました。では他の方法で取得してみましょう。
<img width="1680" alt="グラフAPIエクスプローラ（成功）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612137/d6ce8aea-326b-d5c6-bbd8-b37d592ee136.png">


#5.PHP SDKのインストール
今回はデータをPHPで取得していきたいと思います。
準備として、使用するサーバにFacebookのPHP SDKを入れます。
最新版がGithubにあるのでそれをダウンロードして、使いたいサーバのファイルにいれてください。
公式リファレンス：https://developers.facebook.com/docs/reference/php
PHP SDKのGithub：https://github.com/facebookarchive/php-graph-sdk

※自分はテストの為にMAMPというソフトを入れてPC内にローカルサーバを立てています。

#6. コードの用意
https://developers.facebook.com/docs/php/gettingstarted/
↑公式のスタートガイドに載ってるコードをそのままいただいてきちゃいます
それぞれ書き換えてテストしてみてください



####主な書き換えポイント4つ！
1. app-id
2. app-secret
3. vender
4. access-token

それぞれの値をどこでみるかわからない方は
app-id：アプリIDのことです。アクセストークンツールの中で確認できます。
（「3.グラフAPIを使ってデータを取得」の画像（アプリのダッシュボード）のページ左上にも表示されてます）
app-secret：https://qiita.com/unsoluble_sugar/items/70496f1dcc089e67f01a
vender: SDKをインストールした際、autoload.phpを設置したパスに書き換えてください
access-token：グラフAPIエクスプローラ、アクセストークンツール等



```index.php
<!DOCTYPE html>
<html>
<head>
  <title>
    My Name 
  </title>
</head>

<body>
  <h1>Get My Name from Facebook</h1>
  
  <?php
  
  require_once __DIR__ . '/vendor/autoload.php';
  //venderの部分をあなたがautoload.phpを設置した場所への階層に書き換えてください
  
  $fb = new \Facebook\Facebook([
    'app_id' => '{your-app-id}',           //{your-app-id}の箇所をあなたのアプリIDに書き換えてください
    'app_secret' => '{your-app-secret}',   //{your-app-secret}の箇所をあなたのapp secretに書き換えてください
    'graph_api_version' => 'v5.0',
  ]);
  
  
  try {
    
    // Get your UserNode object, {access-token}の箇所をあなたのアクセストークンに書き換えてください
    $response = $fb->get('/me', '{access-token}');
    
  } catch(\Facebook\Exceptions\FacebookResponseException $e) {
    // Returns Graph API errors when they occur
    echo 'Graph returned an error: ' . $e->getMessage();
    exit;
  } catch(\Facebook\Exceptions\FacebookSDKException $e) {
    // Returns SDK errors when validation fails or other local issues
    echo 'Facebook SDK returned an error: ' . $e->getMessage();
    exit;
  }
  
  $me = $response->getGraphUser();
  
  //All that is returned in the response
  echo 'All the data returned from the Facebook server: ' . $me;
  
  //Print out my name
  echo 'My name is ' . $me->getName();
  
  ?>
  
</body>
</html>
```

#7.実行
試しに、このコードの書き換えポイントをそれぞれ書き換え、実行してみましょう
<img width="812" alt="実行結果（テストコード）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612137/09accc64-ca6a-2e6e-277c-e6d6bf565ea3.png">


このように名前、IDがそれぞれ取得できました。
では、タイトルの**「投稿内容（画像・テキスト）を取得する」**に移ります。

アクセストークンを記載した行を下部のように書き換えてください。

```（一部抜粋）index.php
//変更前
$response = $fb->get('/me', '{access-token}');

//変更後
$response = $fb->get('/me/?fields=posts{full_picture,message}', '{access-token}');
```
この書き換えた部分は、
「グラフAPIエクスプローラ」の上部

[GET▼]　→/　[v6.0▼]　**/me/?fields=posts{full_picture,message}**

の太字部分を記載してください。
こうすることで、先ほどの開発者ツールと同様の結果を得ることができます。
名前を出力していた echo をコメントアウトして実行してみましょう。
<img width="834" alt="実行結果（データ取得成功）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612137/ad33606b-a04b-0ed6-c272-9470d745367d.png">

ぐちゃぐちゃで読みづらいとは思いますが、整形すると以下のような構造になっています。

jsonの整形ツール：https://lab.syncer.jp/Tool/JSON-Viewer/

```取得したデータ.json
{
    "posts": [
        {
            "full_picture": "（ホントは1件目のfull_picture）",
            "message": "test其の2",
            "id": "（ホントは1件目の投稿id）"
        },
        {
            "full_picture": "（ホントは2件目のfull_picture）",
            "message": "test其の1",
            "id": "（ホントは2件目の投稿id）"
        }
    ],
    "id": "（ホントはユーザid）"
}
```
このようなデータを取得することができました。
jsonをphpで扱うには、配列にするやり方が一般的ですよね。

##取得したデータをブラウザで表示
json形式で取得したデータを配列にして、HTMLとしてブラウザで表示してみましょう。

```（一部抜粋）index.php
//配列として使用するためのデコード処理
  $json = json_decode( $me , true );

//取得したデータの個数分ループさせるための処理
  for($i = 0; $i < count($json["posts"]) ; $i++){

//それぞれの配列を変数に格納
    $full_picture = $json["posts"][$i]["full_picture"];
    $message = $json["posts"][$i]["message"];

//HTMLで<img>タグ、<p>タグでそれぞれ表示する為のタグの準備
    $full_picture_tag = "<img src=".$full_picture.">";
    $message_tag = "<p>".$message."</p>";

//echoで出力
    echo "<div>".$full_picture_tag.$message_tag."</div>";
  }
```
try〜catchの外にあるechoを2つともコメントアウトしたうえで
これを\$me = \$response->getGraphUser(); の下部分に記載し、ブラウザで表示してみると、
<img width="1680" alt="最終実行結果" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612137/1cb19b41-92c8-7928-d800-81bd9a2697da.png">
このように、Webページとして表示することができるようになりました！

#まとめ
今回はFacebookのグラフAPIを使って投稿内容を取得する方法について勉強しました。
途中の権限を変更すれば、他の内容も持ってこれるので、なにか応用していけたらいいなと思います。

PHPについての内容は、コピーした部分以外は初歩的なことしか書いてないので
もしPHPがわからなければほんの少しだけ勉強してから読み直してみてください。
すっごく簡単に感じると思います。

最後までご覧いただきましてありがとうございました。

#番外：最終的なコード
自分のGithubに載せときます。
https://github.com/TERASAN/FacebookAPI