過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>Facebook API</strong> は現在 <strong>Meta Graph API</strong> として提供。<a href="https://developers.facebook.com" target="_blank">developers.facebook.com</a> で App を作成し、App ID と App Secret を取得するのが出発点</li><li>API のアクセスは <strong>Access Token</strong> 経由。User トークン / Page トークン / App トークン / システムユーザートークンの 4 種があり、用途で使い分け</li><li>エンドポイントは <code>/me</code> (自分) / <code>/me/posts</code> / <code>/me/feed</code> / <code>/<page-id>/feed</code> など。<strong>バージョン (例 <code>v18.0</code>)</strong> を URL に含める</li><li>本番公開には <strong>App Review</strong> 通過が必須。<code>email</code> 以外の高度な権限 (pages_read_engagement、instagram_basic) は審査対象</li><li>関連 API: <strong>Facebook Login</strong>、<strong>Instagram Graph API</strong>、<strong>WhatsApp Business API</strong>、<strong>Marketing API</strong> など、Meta 製品はすべて Graph API ファミリーで統合</li></ul></td></tr></table>
<h2>Meta Graph API とは</h2>

<p>Facebook (Meta) が提供する HTTP ベースの統合 API です。Facebook 投稿、Page 管理、Instagram 投稿、広告管理、WhatsApp メッセージなど Meta 全製品が <strong>graph.facebook.com</strong> 1 つのドメインで操作できます。</p>

<h2>登録手順</h2>

<h3>STEP 1: 開発者アカウント</h3>

<ol>
<li><a href="https://developers.facebook.com" target="_blank">developers.facebook.com</a> に Facebook アカウントでログイン</li>
<li>右上 <strong>Get Started</strong> → 開発者として登録 (電話番号認証)</li>
<li><strong>My Apps</strong> → <strong>Create App</strong></li>
</ol>

<h3>STEP 2: App 作成</h3>

<p>用途に応じて App タイプを選択:</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#fff3e0"><th>App タイプ</th><th>用途</th></tr></thead>
<tbody>
<tr><td>Consumer</td><td>一般ユーザー向け Facebook Login など</td></tr>
<tr><td>Business</td><td>Page / Instagram Business / WhatsApp Business / 広告管理</td></tr>
<tr><td>Gaming</td><td>ゲーム連携 / Friends API</td></tr>
<tr><td>None (Other)</td><td>選択肢を明示しない</td></tr>
</tbody>
</table>

<h3>STEP 3: App ID と App Secret を取得</h3>

<p>作成後の Dashboard で:</p>

<ul>
<li><strong>App ID</strong>: 公開可能な識別子</li>
<li><strong>App Secret</strong>: 秘密の鍵 (Server 側のみで保持、フロントに出さない)</li>
</ul>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-text">App ID:      1234567890123456
App Secret:  abcdef1234567890abcdef1234567890

# .env で管理
FB_APP_ID=1234567890123456
FB_APP_SECRET=abcdef1234567890abcdef1234567890</code></pre>
<h2>Access Token の 4 種</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>種類</th><th>取得方法</th><th>主な用途</th><th>有効期限</th></tr></thead>
<tbody>
<tr><td>User Token</td><td>Facebook Login で取得</td><td>個人プロフィール操作</td><td>1〜2 時間 → 長期 60 日に変換可</td></tr>
<tr><td>Page Token</td><td>User Token から <code>/me/accounts</code> で取得</td><td>Page 投稿・管理</td><td>長期 Page Token は無期限</td></tr>
<tr><td>App Token</td><td>App ID + App Secret</td><td>サーバ間処理 / Webhook 検証</td><td>無期限</td></tr>
<tr><td>System User Token</td><td>Business Manager で発行</td><td>大規模業務システム</td><td>無期限</td></tr>
</tbody>
</table>

<h3>App Token の取得</h3>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash">curl -G "https://graph.facebook.com/oauth/access_token" \
  --data-urlencode "client_id=YOUR_APP_ID" \
  --data-urlencode "client_secret=YOUR_APP_SECRET" \
  --data-urlencode "grant_type=client_credentials"

# レスポンス
# {"access_token":"1234567890123456|abc...","token_type":"bearer"}</code></pre>
<h2>主要エンドポイント (v18.0 ベース)</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>エンドポイント</th><th>用途</th></tr></thead>
<tbody>
<tr><td><code>GET /v18.0/me</code></td><td>自分の基本情報</td></tr>
<tr><td><code>GET /v18.0/me/accounts</code></td><td>管理 Page 一覧 + Page Token</td></tr>
<tr><td><code>GET /v18.0/me/posts</code></td><td>自分の投稿一覧</td></tr>
<tr><td><code>GET /v18.0/me/feed</code></td><td>自分のフィード (タイムライン)</td></tr>
<tr><td><code>POST /v18.0/<page-id>/feed</code></td><td>Page に投稿</td></tr>
<tr><td><code>GET /v18.0/<page-id>/insights</code></td><td>Page インサイト (リーチ・エンゲージメント)</td></tr>
<tr><td><code>GET /v18.0/<user-id>?fields=id,name,email</code></td><td>fields パラメータで取得項目絞り込み</td></tr>
</tbody>
</table>

<h3>cURL での実行例</h3>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># 自分の情報を取得
curl -G "https://graph.facebook.com/v18.0/me" \
  --data-urlencode "fields=id,name,email" \
  --data-urlencode "access_token=USER_TOKEN"

# Page にテキスト投稿
curl -X POST "https://graph.facebook.com/v18.0/PAGE_ID/feed" \
  --data-urlencode "message=Hello from API" \
  --data-urlencode "access_token=PAGE_TOKEN"

# Page に画像付き投稿
curl -X POST "https://graph.facebook.com/v18.0/PAGE_ID/photos" \
  --data-urlencode "url=https://example.com/photo.jpg" \
  --data-urlencode "caption=キャプション" \
  --data-urlencode "access_token=PAGE_TOKEN"</code></pre>
<h2>Facebook Login (OAuth 2.0)</h2>

<p>「Facebook でログイン」ボタンを自社サイトに付けるための仕組み。ユーザーから User Access Token を取得します。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-text">1. ブラウザを認可 URL へ
   https://www.facebook.com/v18.0/dialog/oauth
     ?client_id=YOUR_APP_ID
     &redirect_uri=https://myapp/auth/fb/callback
     &state=RANDOM_STATE
     &scope=email,public_profile

2. ユーザーが同意 → リダイレクト
   https://myapp/auth/fb/callback?code=AQB...&state=...

3. サーバから code を Access Token に交換
   GET https://graph.facebook.com/v18.0/oauth/access_token
     ?client_id=YOUR_APP_ID
     &client_secret=YOUR_APP_SECRET
     &redirect_uri=https://myapp/auth/fb/callback
     &code=AQB...

4. レスポンス: { "access_token": "EAAB...", "expires_in": 5184000 }

5. ユーザー情報取得
   GET https://graph.facebook.com/v18.0/me?fields=id,name,email
     &access_token=EAAB...</code></pre>
<h3>JS SDK でのフロント実装</h3>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- Facebook SDK 読み込み -->
<script async defer crossorigin="anonymous"
        src="https://connect.facebook.net/ja_JP/sdk.js"></script>

<script>
window.fbAsyncInit = function() {
  FB.init({
    appId      : &apos;YOUR_APP_ID&apos;,
    cookie     : true,
    xfbml      : true,
    version    : &apos;v18.0&apos;
  });
};

function fbLogin() {
  FB.login(function(response) {
    if (response.authResponse) {
      FB.api(&apos;/me&apos;, {fields: &apos;id,name,email&apos;}, function(user) {
        console.log(user);
      });
    }
  }, {scope: &apos;email,public_profile&apos;});
}
</script>

<button onclick="fbLogin()">Facebook でログイン</button></code></pre>
<h2>権限とスコープ</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#fff3e0"><th>スコープ</th><th>説明</th><th>レビュー必要</th></tr></thead>
<tbody>
<tr><td><code>public_profile</code></td><td>名前・プロフィール画像</td><td>不要</td></tr>
<tr><td><code>email</code></td><td>メールアドレス</td><td>不要</td></tr>
<tr><td><code>pages_show_list</code></td><td>管理 Page リスト</td><td>必要 (Standard Access)</td></tr>
<tr><td><code>pages_read_engagement</code></td><td>Page インサイト</td><td>必要 + 認証ビジネス</td></tr>
<tr><td><code>pages_manage_posts</code></td><td>Page 投稿管理</td><td>必要</td></tr>
<tr><td><code>instagram_basic</code></td><td>Instagram プロフィール取得</td><td>必要</td></tr>
<tr><td><code>instagram_content_publish</code></td><td>Instagram 投稿</td><td>必要</td></tr>
<tr><td><code>ads_management</code></td><td>広告管理</td><td>必要</td></tr>
<tr><td><code>whatsapp_business_messaging</code></td><td>WhatsApp 送信</td><td>必要 + ビジネス認証</td></tr>
</tbody>
</table>

<h2>App Review (本番公開)</h2>

<p>開発モードでは<strong>App 管理者・テスター・開発者</strong>のみ利用可能。<strong>一般ユーザー</strong>に提供するには App Review が必要です。</p>

<ul>
<li>権限ごとに「なぜ必要か」のユースケース動画と説明を提出</li>
<li><strong>ビジネス認証</strong> (Business Verification) は法人ドキュメント提出</li>
<li>Privacy Policy URL、利用規約 URL は必須</li>
<li>審査期間: 数日〜数週間</li>
</ul>

<h2>Webhooks</h2>

<p>Page への新着投稿・コメント、ユーザーのプロフィール変更などをリアルタイムで受信できます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-php">// app/Http/Controllers/FbWebhookController.php (Laravel 例)
public function verify(Request $r)
{
    $mode = $r->query(&apos;hub_mode&apos;);
    $challenge = $r->query(&apos;hub_challenge&apos;);
    $token = $r->query(&apos;hub_verify_token&apos;);

    if ($mode === &apos;subscribe&apos; && $token === config(&apos;services.fb.verify_token&apos;)) {
        return response($challenge, 200);
    }
    abort(403);
}

public function receive(Request $r)
{
    // X-Hub-Signature-256 で App Secret を使って HMAC 検証
    $signature = $r->header(&apos;X-Hub-Signature-256&apos;);
    $expected = &apos;sha256=&apos; . hash_hmac(&apos;sha256&apos;, $r->getContent(), config(&apos;services.fb.app_secret&apos;));
    if (!hash_equals($expected, $signature)) abort(401);

    // payload 処理
    foreach ($r->input(&apos;entry&apos;, []) as $entry) {
        foreach ($entry[&apos;changes&apos;] ?? [] as $change) {
            // posts / comments / mentions など
        }
    }
    return response(&apos;OK&apos;, 200);
}</code></pre>
<h2>関連 API ファミリー</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e8f5e9"><th>API</th><th>用途</th></tr></thead>
<tbody>
<tr><td><strong>Instagram Graph API</strong></td><td>Instagram Business / Creator アカウント投稿、インサイト</td></tr>
<tr><td><strong>Marketing API</strong></td><td>広告キャンペーン作成・最適化</td></tr>
<tr><td><strong>WhatsApp Business API</strong></td><td>WhatsApp での顧客メッセージ送受信</td></tr>
<tr><td><strong>Threads API</strong></td><td>Threads 投稿 (2024 年新登場)</td></tr>
<tr><td><strong>Conversions API</strong></td><td>サーバサイド広告計測</td></tr>
<tr><td><strong>Messenger Platform</strong></td><td>Messenger ボット</td></tr>
</tbody>
</table>

<h2>レート制限とエラー</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-text"># App レベル
- 1 時間あたり 200 calls × (アクティブユーザー数)

# レスポンスヘッダで残量確認
X-App-Usage:     {"call_count":12,"total_cputime":1,"total_time":1}
X-Page-Usage:    Page API の使用率
X-Ad-Account-Usage: 広告 API の使用率

# よくあるエラー
{
  "error": {
    "message": "...",
    "type": "OAuthException",
    "code": 190,           -- 190 = トークン期限切れ
    "fbtrace_id": "AbCdEf"
  }
}</code></pre>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#fff3e0"><th>エラーコード</th><th>意味</th><th>対処</th></tr></thead>
<tbody>
<tr><td>190</td><td>トークン期限切れ / 無効</td><td>再ログイン / 長期トークン化</td></tr>
<tr><td>200</td><td>権限不足</td><td>必要スコープ追加 + App Review</td></tr>
<tr><td>4 / 17 / 32 / 613</td><td>レート制限</td><td>指数バックオフ</td></tr>
<tr><td>368</td><td>コンテンツが Meta ポリシーに抵触</td><td>投稿内容見直し</td></tr>
</tbody>
</table>

<h2>FAQ</h2>

<p><strong>Q: 旧 Facebook SDK で書いた古いコードがエラーになる</strong><br />
A: Graph API は<strong>2 年程度で旧バージョン廃止</strong>。URL の <code>v8.0</code> 等を最新 (<code>v18.0</code> など) に書き換え、レスポンス構造の差分を吸収してください。</p>

<p><strong>Q: 個人プロフィールに自動投稿したい</strong><br />
A: <strong>個人タイムラインへの API 投稿は廃止</strong>されています (publish_actions 権限終了)。Page か Instagram Business 経由のみ可能です。</p>

<p><strong>Q: Instagram の DM を API で送りたい</strong><br />
A: Instagram Messaging API (Messenger Platform 経由) で可能ですが、ビジネス認証 + ユーザーが先にメッセージを送ってきた 24 時間以内、などの制約があります。</p>

<p><strong>Q: 開発モードのままだとどこまでテストできる？</strong><br />
A: App ロール (Admin / Developer / Tester) に追加した Facebook アカウントは全機能をテスト可能。一般ユーザーへの公開には App Review 必須。</p>

<p><strong>Q: PHP の SDK は？</strong><br />
A: <code>facebook/graph-sdk</code> は古く長らくメンテ停止中。現在は cURL / Guzzle で直接 HTTP を叩くスタイルが推奨されます。</p>