STEP 3 / 3 — 統合ガイド

サイトに統合する

お使いの環境を選んでください。コードをコピペするだけで動作します。

プラグインまたは functions.php に以下を追加

php

// functions.php
function social_bridge_enqueue() {
  wp_enqueue_script(
    'social-bridge',
    'https://social.quon.io/v1/embed.js',
    array(),
    '1.0',
    true
  );
}
add_action('wp_enqueue_scripts', 'social_bridge_enqueue');

投稿・固定ページに以下のショートコードを貼り付け

html

[social_bridge api_key="__SB_API_KEY__" columns="4" limit="8"]

完了。最新動画が自動同期されます

管理画面の「公開」を押せば反映されます。CSSクラス .sb-embed でデザイン上書き可能です。

Layout.astro の <head> にスクリプトを読み込み

astro

---
import "social-bridge/style.css";
---
<head>
  <script src="https://social.quon.io/v1/embed.js" defer></script>
</head>

ページの好きな場所にコンポーネントを配置

astro

<social-bridge
  api-key="__SB_API_KEY__"
  columns="4"
  limit="8">
</social-bridge>

完了。bun run build で本番に反映

SSGビルドでも遅延読み込みで動画フィードのみクライアントレンダリングされます。

app/layout.tsx にスクリプトタグを追加

jsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script src="https://social.quon.io/v1/embed.js" strategy="afterInteractive" />
      </body>
    </html>
  );
}

表示したいコンポーネントで Web Component を配置

jsx

export default function Feed() {
  return (
    <social-bridge
      api-key="__SB_API_KEY__"
      columns={4}
      limit={8}
    />
  );
}

完了。Vercel/Netlify どちらにデプロイしても動作

App Router / Pages Router 両対応。RSC内でも問題なく利用可能です。

<head> にスクリプトを読み込み

html

<!-- Social Bridge -->
<script src="https://social.quon.io/v1/embed.js" defer></script>

動画を表示したい場所にタグを配置

html

<social-bridge
  api-key="__SB_API_KEY__"
  columns="4"
  limit="8">
</social-bridge>

完了。ブラウザを開いてご確認ください

ビルドツール不要。Web Componentとして実行され、CSS変数で外観を上書きできます。

トラブルシューティング

うまく動かないときは、以下もご確認ください。

動画が表示されません

以下を順にご確認ください:

1. API keyが正しいか (前後のスペースに注意)
2. スクリプトのURLが social.quon.io/v1/embed.js になっているか
3. 連携から1時間以内の場合は、最初のcron実行を待っています

デザインを変更したい

CSS変数 --sb-gap / --sb-radius / --sb-bg で外観の上書きが可能です。詳細はAPIリファレンスをご参照ください。

表示する動画数を変えたい

limit 属性で1〜20の範囲で指定できます。1ページあたりの読み込み量を考慮し、初期値は8です。