Threads APIで投稿一覧をWebサイトに表示する方法｜Next.js・WordPress対応

INDEX目次を開く＋

Threads（スレッズ）の投稿を1件だけWebサイトへ掲載するなら、公式の埋め込みコードが簡単です。一方、自分の最新投稿を複数件並べて自動更新したい場合は、Threads APIからデータを取得して一覧を作れます。

この記事では、実際にうさぎコードの公開Threadsアカウントをテスターとして接続し、読み取り専用の長期アクセストークンを発行しました。その実画面と、Next.js・WordPressでの実装例を紹介します。

個別投稿を載せたいだけなら、先にThreadsの投稿をWebサイト・WordPressへ埋め込む方法を確認してください。

反対に、ブログ記事などの外部URLをThreads側の投稿やプロフィールへ載せる手順は、Threadsに外部リンクを貼る方法で解説しています。

結論：自分の投稿一覧ならテスタートークンで始められる

Threadsの投稿をWebサイトへ表示する主な方法は次のとおりです。

方法	表示内容	難易度	トークン
公式の埋め込みコード	公開された個別投稿	低	不要
`/me/threads`	認証した自分の投稿一覧	中	必要
`/profile_posts`	指定した公開プロフィールの投稿一覧	高	必要

自分や自社のアカウントを自分のサイトへ表示するだけなら、Metaアプリに対象アカウントをThreadsテスターとして追加し、ユーザートークン生成ツールで長期トークンを発行する方法が現実的です。

この方法では、一般利用者にThreadsログインを提供しないため、今回の検証ではOAuthリダイレクトURLを登録していません。複数の利用者が各自のアカウントを連携するサービスでは、OAuthコールバック、App Review、プライバシーポリシーなど別の準備が必要です。

APIの「タイムライン」は自分で表示を組み立てる

Threads APIから返るのは、投稿本文、日時、投稿URL、メディア種別などを含むJSONデータです。Threadsアプリの画面がそのまま埋め込まれるわけではありません。

Webサイト側で次の要素を使ってカードや一覧を作ります。

投稿本文
投稿日時
画像または動画のサムネイル
Threadsで元投稿を開くリンク
必要に応じたページ送り

Next.jsで実装したThreads投稿一覧を実際に見る

必要なもの

Meta for Developersへログインできるアカウント
公開状態のThreadsアカウント
サーバー側でAPIを呼べるWebサイト
本番環境で秘密の環境変数を保存する場所

Next.jsではVercelなどの環境変数、WordPressではサーバーの環境変数や wp-config.php を使います。トークンをブラウザー側のJavaScriptへ入れてはいけません。

Metaアプリを作成する

Meta for Developersの「マイアプリ」で「アプリを作成」を選びます。

Meta for Developersのマイアプリ画面。アプリを作成ボタンが表示されている

アプリ名と連絡先メールアドレスを入力し、ユースケースで「Threads APIにアクセス」を選択します。

Metaアプリのユースケース選択画面。Threads APIにアクセスが表示されている

今回は自分のThreads投稿を読むだけなので、最初から含まれる threads_basic のみを使います。投稿作成、削除、返信管理、インサイトなどの権限は追加しません。

Threads APIのアクセス許可一覧。threads_basicがテスト準備完了になっている

Threadsテスターを追加する

Threads APIの「設定」下部にある「Threadsテスターを追加または削除」を開き、「メンバーを追加」を選びます。

Metaアプリに人を追加する画面。追加の役割としてThreadsテスターが表示されている

「Threadsテスター」を選択し、対象のThreadsユーザー名を追加します。追加直後はMeta側で「承認待ち」になります。

次に、Threadsアプリで招待を承認します。2026年9月時点のiPhone版では、プロフィール右上の歯車から「その他の設定」を開きます。

「ウェブサイトのアクセス許可」を開きます。

「Invites」タブにMetaアプリ名が表示されるので、「同意する」を選び、確認画面でも承認します。

ThreadsのApps and Websites画面。Metaアプリからの招待と同意するボタンが表示されている

承認後、招待の操作は「削除」に変わります。Meta側から「承認待ち」が消えれば接続完了です。

長期アクセストークンを最小権限で発行する

Threads APIの「設定」に戻ると、ユーザートークン生成ツールに承認したアカウントと「アクセストークンを生成」ボタンが表示されます。

Threads APIのユーザートークン生成ツール。usagicodeとアクセストークンを生成ボタンが表示されている

ボタンを押すとThreadsへのログイン後、アプリが要求する権限が表示されます。「アクセス許可を編集」を開き、用途に不要な任意権限をオフにします。

自分の投稿一覧を読むだけなら、次の必須権限だけを残します。

Access and display Your Threads information and posts（必須）

次の任意権限はオフにしました。

Create and share posts on Threads profile
Manage replies and quotes on Threads posts
Manage insights of posts on Threads
Read replies on Threads posts

Threadsのアクセス許可編集画面。必須の読み取りだけがオンで、4つの任意権限がオフになっている

確認画面に必須の読み取り権限だけが表示された状態で続行します。

生成後の画面で警告を確認し、トークンをコピーします。画面を閉じると再表示できないため、安全な場所へ保存してください。

トークンを安全に保存する

Next.jsのローカル環境では、Git管理外の .env.local に保存します。

THREADS_ACCESS_TOKEN=取得した長期アクセストークン

本番環境では、Vercelのプロジェクト設定に同名の環境変数を追加します。変数名に NEXT_PUBLIC_ を付けるとブラウザーへ組み込まれるため、秘密トークンには使わないでください。

WordPressでは、可能ならサーバーの環境変数から読み込みます。環境変数を使えない場合は、公開HTMLやテーマのJavaScriptではなく wp-config.php へ定数として設定します。

define('THREADS_ACCESS_TOKEN', '取得した長期アクセストークン');

Next.jsでThreads投稿を取得する

認証したユーザーの投稿は GET /me/threads で取得します。以下は、実際の構成を簡略化した例です。

// lib/threads.ts
type ThreadsPost = {
  id: string
  media_type: string
  media_url?: string
  thumbnail_url?: string
  permalink: string
  text?: string
  timestamp: string
  username: string
}
 
export async function getThreadsPosts(): Promise<ThreadsPost[]> {
  const token = process.env.THREADS_ACCESS_TOKEN
  if (!token) throw new Error('THREADS_ACCESS_TOKEN is not configured')
 
  const url = new URL('https://graph.threads.net/v1.0/me/threads')
  url.searchParams.set(
    'fields',
    'id,media_type,media_url,thumbnail_url,permalink,text,timestamp,username'
  )
  url.searchParams.set('limit', '9')
 
  const response = await fetch(url, {
    headers: { Authorization: `Bearer ${token}` },
    next: { revalidate: 900 },
  })
 
  if (!response.ok) {
    throw new Error(`Threads API request failed: ${response.status}`)
  }
 
  const result = await response.json()
  return result.data ?? []
}

トークンはサーバー側の fetch だけで使います。15分キャッシュにすると、アクセスのたびにAPIを呼ばずに済みます。

Next.jsで一覧表示する

サーバーコンポーネントで取得関数を呼び、投稿をカード表示します。

// app/threads/page.tsx
import { getThreadsPosts } from '@/lib/threads'
 
export default async function ThreadsPage() {
  const posts = await getThreadsPosts()
 
  return (
    <main>
      <h1>Threads</h1>
      <div className="threads-list">
        {posts.map((post) => (
          <article className="threads-card" key={post.id}>
            <p>{post.text || '画像・動画の投稿'}</p>
            <time dateTime={post.timestamp}>
              {new Date(post.timestamp).toLocaleDateString('ja-JP')}
            </time>
            <a href={post.permalink} target="_blank" rel="noreferrer">
              Threadsで見る
            </a>
          </article>
        ))}
      </div>
    </main>
  )
}

本番ではAPIエラーをページ全体へ伝播させず、Threads公式プロフィールへのリンクを表示するフォールバックも用意すると安全です。

うさぎコードで稼働している結果は、Next.js版のThreads投稿一覧で確認できます。

WordPressで投稿一覧を表示する

WordPressでは wp_remote_get() とTransient APIを組み合わせ、ショートコードにできます。

function usagicode_threads_feed_shortcode() {
    if (!defined('THREADS_ACCESS_TOKEN')) {
        return '<p>Threadsの投稿を取得できません。</p>';
    }
 
    $posts = get_transient('usagicode_threads_feed');
    if (false === $posts) {
        $url = add_query_arg(array(
            'fields' => 'id,media_type,permalink,text,timestamp,username',
            'limit'  => 9,
        ), 'https://graph.threads.net/v1.0/me/threads');
 
        $response = wp_remote_get($url, array(
            'headers' => array(
                'Authorization' => 'Bearer ' . THREADS_ACCESS_TOKEN,
            ),
            'timeout' => 10,
        ));
 
        if (is_wp_error($response) || 200 !== wp_remote_retrieve_response_code($response)) {
            return '<p>Threadsの投稿を取得できませんでした。</p>';
        }
 
        $body = json_decode(wp_remote_retrieve_body($response), true);
        $posts = isset($body['data']) ? $body['data'] : array();
        set_transient('usagicode_threads_feed', $posts, 15 * MINUTE_IN_SECONDS);
    }
 
    ob_start();
    echo '<div class="threads-list">';
    foreach ($posts as $post) {
        echo '<article class="threads-card">';
        echo '<p>' . esc_html($post['text'] ?? '画像・動画の投稿') . '</p>';
        echo '<a href="' . esc_url($post['permalink']) . '" target="_blank" rel="noopener noreferrer">Threadsで見る</a>';
        echo '</article>';
    }
    echo '</div>';
    return ob_get_clean();
}
add_shortcode('threads_feed', 'usagicode_threads_feed_shortcode');

固定ページなどへ [threads_feed] を置けば表示できます。テーマを直接更新すると変更が消えるため、子テーマまたは専用プラグインへ実装してください。

実際に専用プラグインへ実装し、うさぎコードのThreads投稿を取得すると次のように表示されました。画像付き投稿とテキスト投稿を同じ一覧で扱えます。

※この表示確認には、現在は公開されていない旧WordPress版「うさぎコード」のローカル環境を使用しています。現在のうさぎコード本番サイトとはデザインが異なります。

表示できない場合の確認項目

トークンエラーになる

環境変数の入力ミス、有効期限切れ、別アプリ用トークンの可能性があります。エラーログへトークン値そのものを出さないようにします。

テスターが生成ツールに表示されない

MetaアプリでThreadsテスターを追加しただけでは不十分です。Threadsアプリの「その他の設定」→「ウェブサイトのアクセス許可」→「Invites」で招待を承認します。

ローカルでは動くが本番で動かない

.env.local はVercelへ自動送信されません。本番プロジェクトのEnvironment Variablesに THREADS_ACCESS_TOKEN があるか、追加後に再デプロイしたかを確認します。

画像が後から表示されなくなった

APIが返すメディアURLは永続保存用とは限りません。取得結果を長期間固定せず、適度に再検証します。画像を複製保存する場合は、投稿者の権利とThreadsの利用条件も確認してください。

セキュリティ上の注意

App SecretとアクセストークンをGitへコミットしない
NEXT_PUBLIC_ の環境変数へ秘密を入れない
ブラウザーからThreads APIを直接呼び出さない
必要のない投稿・返信・インサイト権限を許可しない
スクリーンショットではApp ID、Secret、トークン、個人情報を隠す
トークンの期限と更新日を管理する
不要になったテスターやアプリは削除する

よくある質問

ThreadsのプロフィールURLだけで一覧を埋め込めますか？

プロフィールURLを貼るだけで複数投稿を一覧表示する公式ウィジェットとは異なります。APIからデータを取得し、Webサイト側で表示を作ります。

アプリを公開する必要はありますか？

自分の公開アカウントをThreadsテスターとして検証する段階では、未公開アプリのまま進められました。一般利用者へ連携機能を提供する場合は別です。

OAuthコールバックURLは必要ですか？

今回使ったユーザートークン生成ツールでは、OAuthコールバックURLを登録せずに自分のテスター用長期トークンを発行できました。一般利用者がログインして連携する仕組みでは必要です。

他人の公開プロフィールも一覧表示できますか？

公開プロフィール向けの取得方法と追加権限がありますが、自分の投稿を読む構成より要件が増えます。まず /me/threads で自分のアカウントを実装し、別機能として検討するのが安全です。

まとめ

Threads APIを使えば、自分の公開投稿をNext.js、WordPress、そのほかのWebサイトへ一覧表示できます。

今回のような自分のアカウント用なら、Metaアプリを作成し、Threadsテスターの招待を承認し、必須の読み取り権限だけで長期トークンを発行する流れです。トークンは必ずサーバー側へ置き、キャッシュとエラー時の代替導線も用意します。

APIまでは必要なく、投稿を1件だけ掲載したい場合はThreadsの公式埋め込み方法を、一般的な操作を確認したい場合はThreadsの使い方まとめをご覧ください。