Facebook埋め込みジェネレーター

はじめに

Toollect Facebook埋め込みジェネレーターは、公開されたFacebookの投稿・動画・ページURLを、Facebookが公式に文書化しているJavaScript SDK埋め込みコード – fb-post / fb-video / fb-pageのdivとsdk.jsローダー – にワンクリックで変換し、コピー前にFacebook純正SDKによるライブプレビューで確認できるツールです。

手作業でFacebookコードを貼り付けてきた方なら、この摩擦は身に覚えがあるはずです。Facebookの設定ツールはページプラグインを奥に隠し、投稿と動画のオプションを別々のページに分散させ、iframe形式とSDK形式をトレードオフの説明なく切り替えます。divを手書きするとdata-属性を一文字誤るだけで投稿が単なるリンクとして表示され、エラーも出ません。このツールは投稿・動画・ページプラグインを横並びで表示し、文書化されたすべてのプラグイン属性を公開し、言語選択をローダーURLに直接書き込み、訪問者に届くのと同じブラウザで実際の描画を確認できます。

すべてのコード経路は意図的にSDK専用です。SDKはFacebookが3種類すべてのプラグイン向けに維持している形式であり、表示言語に対応する唯一の方法であり、ページプラグインのタブやサイズを一貫させる唯一の方法です。ジェネレーターは必要なときにfb-rootとローダーを含め、すでにSDKを読み込んでいるサイトでは省略し、広告ブロッカーや非公開コンテンツについてもプレビューで正直に示し、リンクをToollectサーバー経由で送信することはありません。

ユースケース

Facebookコンテンツの埋め込みはブログ記事以外でも多くの場面で使われており、3つのタブが自然に役割を分担します。

ブログと編集コンテンツ

公開投稿を引用する解説記事、バズった動画を再利用するカルチャー記事、ブランドのページタイムラインを社会的証明として埋め込むレビュー – 定番の使い方です。デフォルト幅500ピクセルの投稿モードはほとんどのカラムに収まり、動画モードはプレーヤーを前面に、ページプラグインはスクリーンショットなしでライブのタイムラインを表示します。

ニュースルームとライブ報道

記者は公式声明や目撃者の投稿を速報に取り込みます。スピードと検証の両方が重要です – ジェネレーターはm.facebook.comのようなモバイル共有リンクやトラッキングだらけのURLを一つの正規形に正規化し、プレビューで記事公開前に投稿が確実に描画されることを確認できます。

マーケティングサイトとポートフォリオ

埋め込みページタイムラインとしての顧客レビュー、ページ内プレーヤーとしてのローンチ動画、カードとしての告知投稿などです。言語選択により訪問者の言語で周辺表示がレンダリングされ、すでにFacebook SDKを読み込んでいるページではローダーを省略してスクリプトの重複を避けられます。

ドキュメントとコミュニティサイト

ローンチ投稿を引用するリリースノート、Facebookグループの告知を参照するドキュメント、ページのイベントタブを表示するイベントページなどです。テキスト表示と遅延読み込みの制御により、重いページでもスクロールが近づくまで静かに保てます。

仕組み

ツールは5つのステップで動作します。

1. URLを解析して分類します – 入力をFacebookリンク文法に照合します。数値IDは5–20桁またはpfbid形式、ユーザー名は2–50文字、タブは[a-z][a-z0-9_]*、公式ホストは任意のサブドメインを含むfacebook.comとfb.watch、fb.meの3つです。トラッキング用のクエリキーは読み取った上でルーティングでは無視され、再構築された正規URLに引き継がれることはありません。facebook.com/watchでvがない場合やfb.watchで短縮コードがない場合など、IDを欠くルートは拒否されます。
2. プラグイン種別を選びます – post / photo / group-postは投稿、video / reelは動画、pageはページプラグインにマッピングされます。タブバーはリンクに追従します – watch URLを貼り付けると自動で動画に、ページURLならページプラグインに切り替わります。手動でタブを切り替えても古い出力が残らず、クリアされます。
3. オプションを収集します – タブごとのドロップダウンから言語を、数値フィールドから幅と高さを、ページ用チェックボックスからタブやChrome表示を、動画用トグルから全画面や自動再生、キャプションを選びます。変更はすべて有効範囲にクランプされ、フィールドに書き戻されて即座に再生成されます。
4. 公式マークアップを構築します – 選択内容はfb-*のdiv上のdata-*属性になり、ページプラグインではローダーURLに言語がhttps://connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0として含まれます。iframe URLは構築せず、SDKが解析時にdivの属性をそのまま利用します。
5. プレビューを描画します – ジェネレーターはプレビューホストにdivとfb-rootを注入し、選ばれたロケール用にsdk.jsを読み込みまたは再読み込みしてFB.XFBML.parseを呼び出し、生成されたiframeを監視します。成功、広告ブロッカー、描画不能の3つの結果が正直に報告されます。

どのオプションを変更しても全体が再構築されます – 新しい属性、新しいコードボックス、再解析されたプレビューにより、コピーするコードは常に目の前の表示と一致します。

対応URL形式

ジェネレーターはFacebookの3つの公式ホスト上で公開された投稿・動画・ページを特定するあらゆるURL形状を受け付け、それ以外は具体的なメッセージとともに拒否します。スキームやwww.は省略可能で、モバイル用サブドメインは正規化されます。

対応している形式

末尾のスラッシュやハッシュフラグメント、ID以降のクエリ文字列は許容され破棄されます。ユーザー名の後に続く数値のタブ部分のような表示用サフィックスは、独立したリソースではなくページのタブ表示として扱われます。

拒否される形式

fb.watchのケースは、アプリの共有ボタンが今もこの形状を生成するため特に注意が必要です。ジェネレーターは専用の短縮リンクメッセージとともに意図的に拒否し、リンクを開いて完全な投稿または動画URLをコピーするよう促します。展開後のURLを貼り付ければすぐに成功します。

埋め込みコードの構造

出力はFacebookが文書化しているコードに、選択したオプションを適用したものです。デフォルト設定での投稿埋め込みは次のようになります。

<div class="fb-post" data-href="https://www.facebook.com/facebook/posts/10153231379946729" data-width="500"></div>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v26.0"></script>

各パーツの説明です。

• プラグインdivのクラス – fb-post、fb-video、fb-pageのいずれかがSDKにどのプラグインを生成するか伝えます。1つの埋め込みにつき1クラスです。
• data-href – 前章の正規URLで、アンパサンドはエスケープされます。3つのプラグインすべてで唯一必須の属性です。
• data-width（投稿と動画） – 希望する幅をピクセルで指定します。投稿は350–750でデフォルト500、動画は220–1920でデフォルト500です。FacebookのSDKは可能な限りこの幅にカードを合わせます。
• data-show-text – 投稿テキストを表示にチェックが入っている場合に存在します。Facebookは写真を含む投稿や動画でこれを文書化しており、ない場合はテキストが非表示になることがあります。
• data-lazy – 遅延読み込みにチェックが入っている場合に存在します。埋め込みがスクロールで近づくまで描画を遅延させます。
• data-allowfullscreen / data-autoplay / data-show-captions（動画のみ） – allowfullscreenは全画面ボタンを有効化し、autoplayはデスクトップでページ読み込み時にミュートで自動再生を開始し、show-captionsはデスクトップで利用可能な場合にキャプションをデフォルトで表示します。オフのときはすべて省略されます。
• data-tabs / data-height / data-small-header / data-adapt-container-width / data-hide-cover / data-hide-cta / data-show-facepile（ページプラグインのみ） – tabsはtimeline,events,messagesのように表示するタブを列挙しデフォルトはtimeline、heightはデフォルト500、各真偽値はプラグインのChrome切り替えに直接対応します。
• ローダー – fb-rootとconnect.facebook.net/{locale}/からのsdk.js#xfbml=1&version=v26.0です。en_USは一例で、言語選択がロケール部分を書き換えます。「fb-root divとsdk.jsローダーを含める」のチェックを外すと、このブロック全体が省略されます。

デフォルト以外の設定でのページプラグインは、より多くの属性を示します。

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline,events" data-width="340" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-hide-cta="false" data-show-facepile="true"></div>

埋め込みオプション

各コントロールは1つの属性に対応します。括弧内はデフォルト値です。

言語（デフォルトはToollectのサイト言語 – zh-hantはzh_TW、zh-hansはzh_CN、enはen_US、同様にdeやes、fr、it、ja、nl、pt、svも対応） – en_USからaf_ZAまで60ロケールを、Toollectのページ言語ごとにローカライズされた名前で表示します。英語を含むすべての明示的な選択がローダーURLに書き込まれます。SDKはタイムスタンプやいいねボタンのラベルなど埋め込み周辺をローカライズし、投稿本文自体は変わりません。

幅（投稿500、動画500、ページ340） – 正確な数値を入力し、フィールドからフォーカスが外れた時点で有効範囲にクランプされます。投稿350–750、動画220–1920、ページ180–500です。範囲外の値は最も近い境界に丸められます – 動画で5000と入力すると1920になります。

高さ（ページ500） – ページプラグインのみ、70–2048です。投稿と動画には高さ属性がなく、SDKが幅とコンテンツからカードの高さを決めます。

写真や動画と一緒に投稿テキストを表示（オフ） – 投稿ではdata-show-text="true"を書き込み、動画ではFacebookの注記に合わせてラベルに（デスクトップのみ）と追記されます。テキスト切り替えがデスクトップ描画にのみ影響することを示すためです。

近くまでスクロールするまで遅延読み込みする（オフ、すべてのタブ） – data-lazy="true"を書き込みます。

全画面再生を許可する（オフ、動画） – data-allowfullscreen="true"を書き込みます。

ページ読み込み時に自動再生する（ミュート、デスクトップのみ）（オフ、動画） – data-autoplay="true"を書き込みます。Facebookはこれをデスクトップのみのミュート自動再生として文書化しています。

利用可能な場合はデフォルトでキャプションを表示する（デスクトップのみ）（オフ、動画） – data-show-captions="true"を書き込みます。デスクトップのみで有効です。

表示するタブ（タイムライン、ページプラグイン） – 3つのチェックボックスtimeline / events / messagesをdata-tabs="timeline,events,messages"として結合します。チェックを外したタブはリストから単に除外されます。

小さいヘッダーを使用 / コンテナ幅に合わせる / カバー写真を非表示 / カスタムCTAを非表示 / 友達のプロフィール写真を表示（ページプラグイン） – それぞれ対応するdata-*真偽値を書き込みます。コンテナ幅への適応はデフォルトでオン、フェイスパイルもデフォルトでオンです。

fb-root divとsdk.jsローダーを含める（オン） – ローダーブロックを付加するかどうかを制御します。すでにsdk.jsをグローバルに読み込んでいるサイトではチェックを外してください。

言語と国際化

Facebookの埋め込み投稿FAQとJavaScript SDK国際化ガイドは同じルールを述べています – ソーシャルプラグインの表示言語はsdk.js URLのロケール部分から決まるということです。このツールはそれを可視化します。

言語選択は2か所に反映されます。

• 生成されたコード – https://connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0で、localeはen_USやzh_TW、fr_FR、ja_JPなどです。
• ライブプレビュー – ドロップダウンを変更するとプレビューホストが再構築され、異なるロケールで以前読み込まれたSDKスクリプトが削除され、window.FBがクリアされた上で新しいロケールがフレッシュに読み込まれてからFB.XFBML.parseが呼ばれます。

デフォルトはToollectのサイト言語に自動で追従します – toollect.com/zh-hant/tools/facebook-embed-generator/にアクセスするとzh_TWが、zh-hansではzh_CNが、jaではja_JPがプリ選択され、欧州言語は地域形式（de→de_DE、fr→fr_FRなど）になり、それ以外はen_USにフォールバックします。自動オプションはありません – Facebookは明示的なロケールを要求するため、ツールは常に一つを書き込みます。

何が変わり、何が変わらないかです。

対応表示言語

FacebookはSDK向けに約100のロケールを文書化しています。ドロップダウンでは最もよく使われる60言語を提供し、名前はToollectのページ言語ごとにローカライズされています。文書化された完全なセットは次のとおりです。

af_ZA Afrikaans · ar_AR Arabic · az_AZ Azerbaijani · bg_BG Bulgarian · bn_IN Bengali · bs_BA Bosnian · ca_ES Catalan · cs_CZ Czech · da_DK Danish · de_DE German · el_GR Greek · en_GB English (UK) · en_US English (US) · es_ES Spanish (Spain) · es_LA Spanish · et_EE Estonian · eu_ES Basque · fa_IR Persian · fi_FI Finnish · fr_FR French · gl_ES Galician · gu_IN Gujarati · he_IL Hebrew · hi_IN Hindi · hr_HR Croatian · hu_HU Hungarian · hy_AM Armenian · id_ID Indonesian · is_IS Icelandic · it_IT Italian · ja_JP Japanese · jv_ID Javanese · ka_GE Georgian · km_KH Khmer · kn_IN Kannada · ko_KR Korean · lo_LA Lao · lt_LT Lithuanian · lv_LV Latvian · mk_MK Macedonian · ml_IN Malayalam · mr_IN Marathi · ms_MY Malay · my_MM Burmese · nb_NO Norwegian · ne_NP Nepali · nl_NL Dutch · pa_IN Punjabi · pl_PL Polish · pt_BR Portuguese (Brazil) · pt_PT Portuguese (Portugal) · ro_RO Romanian · ru_RU Russian · si_LK Sinhala · sk_SK Slovak · sl_SI Slovenian · sq_AL Albanian · sr_RS Serbian · su_ID Sundanese · sv_SE Swedish · sw_KE Swahili · ta_IN Tamil · te_IN Telugu · th_TH Thai · tl_PH Filipino · tr_TR Turkish · uk_UA Ukrainian · ur_PK Urdu · vi_VN Vietnamese · zh_CN Chinese (Simplified) · zh_HK Chinese (Hong Kong) · zh_TW Chinese (Traditional)

ドロップダウン以外のロケールも同じパターン – https://connect.facebook.net/{locale}/sdk.js – で有効ですが、上記60言語でToollectが提供するすべての言語をカバーしているため、コードを貼り付けた後に編集が必要になることはほとんどありません。

使い方

1. Facebook URLを貼り付けます – 上の表にある対応形式ならどれでも、 m.facebook.comやページに解決されるfb.me短縮リンクも含めて貼り付けられます。スキームやwww.は省略可能です。
2. 生成を押すかEnterキーを押します。 コードが出力ボックスに表示され、プレビューが自動で開いて実際のSDK描画が表示されます。URLバーがタブも制御します – watchリンクは動画に、ページリンクはページプラグインに切り替わります。
3. 必要に応じてタブを選びます – 投稿や写真、グループ投稿は投稿、動画やリールは動画、ページはページプラグインです。切り替えるとそのタブのオプションで再生成され、一致しないタブでは古い出力がクリアされます。
4. 言語を設定します – デフォルトはすでにサイト言語に合っていますが、60のロケールから自由に選べます。生成されるローダーURLとプレビューの両方が即座に切り替わります。
5. 残りのオプションを調整します – 幅、ページ用の高さ、ヘッダーやカバーの切り替え、遅延読み込みなどです。変更のたびに再生成され、コードボックスとプレビューがずれることはありません。
6. プレビューの診断を確認します – カードが表示されない場合、出力上部の警告がSDKがブロックされたのか、コンテンツが描画できないのか、URLがページではなく個人タイムラインを指しているのかを示します。
7. コードをコピーします – 埋め込みを表示したい位置にページへ貼り付けます。すでにsdk.jsを読み込んでいるサイトでは、重複を避けるためローダー含める設定のチェックを外してください。

対応する形式に一致しない入力は出力をクリアし、赤いエラー領域で理由を説明します – 無効なリンクのメッセージか短縮リンクのメッセージのいずれかです。クリアボタンで入力とコード、プレビューを一括でリセットできます。

チュートリアル

実際のリンクを使って3つのタブすべてを順に試してみましょう。

ステップ1 – アプリが共有する形の投稿リンクを貼り付けます。 トラッキングパラメータ付きの投稿URLをコピーします。

https://m.facebook.com/facebook/posts/pfbid0AbCdEfGhIjKlMnOpQrStUvWxYz1234567890?__tn__=K-R

生成を押します。パーサーはm.サブドメインや__tn__トラッキングを越えてfacebookの投稿pfbid0AbCdEfGhIjKlMnOpQrStUvWxYz1234567890を読み取り、タブは投稿のまま、コードにはdata-width="500"と英語サイトのためen_USローダーが表示されます。プレビューが開き、カードが500ピクセルで描画されます。

ステップ2 – 言語を変更します。 投稿の言語を繁体字中国語zh_TWに切り替えます。ローダーはhttps://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v26.0になり、プレビューはSDKを再読み込みします – 投稿横のタイムスタンプが中国語表記に切り替わりますが、投稿本文は執筆されたまま変わりません。

ステップ3 – 幅を狭めます。 幅に600と入力してフィールドからフォーカスを外します。divにdata-width="600"が付与され、カードが縮小します。9999と入力して外すと、フィールドは投稿の最大値750にスナップします。

ステップ4 – 動画に切り替えます。 入力欄の投稿URLを動画に置き換えます。

https://www.facebook.com/facebook/videos/10153231379946729/

生成を押します。ツールは動画に切り替わり、コードは<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729" data-width="500">となり、言語ドロップダウンは同じen_USのままです。自動再生とキャプション表示にチェックを入れると、それぞれdata-*が書き込まれ、ラベルにはデスクトップのみの注記が残ります。

ステップ5 – ページプラグイン。 https://www.facebook.com/facebookを貼り付けて生成します。ページプラグインのタブがdata-tabs="timeline"とChrome一式で開きます。イベントとメッセージにチェックを入れると属性はdata-tabs="timeline,events,messages"になります。幅を500、高さを700に変更すると両方の属性が更新されます。プレビューにはページのタイムラインやカバー、フェイスパイルが、サイトに貼り付けたときとまったく同じに表示されます。

ステップ6 – コピーして公開します。 コピーを押して、すでにsdk.jsを読み込んでいる素のHTMLページに貼り付けます – コピー前にローダーを含めるチェックを外してください。ページを開くと、投稿と動画、ページがそれぞれ設定した幅と言語で描画されます。

プレビューと診断

プレビューはbuildSdkCodeから得た正確なdivに対してFacebook純正のsdk.jsを実行するため、実際のページで失敗する箇所とまったく同じ場所で失敗します。ホストはsdk.jsのダウンロードとFB.XFBML.parseの実行中にスピナーを表示し、その後4つのいずれかの結果が表示されます。

両方の時間依存の警告は十分に余裕を持った待ち時間の後にのみ発火します – SDKダウンロードに20秒、描画にさらに15秒のため、回線が遅くても誤報は出ません。埋め込み可能な投稿はこの時間内に十分描画され、個人プロフィールのページプラグインはiframeがゼロサイズのまま約3秒後に黄色い警告を表示します。

知っておくと役立つ詳細がひとつあります。ジェネレーターはloadedLocaleを追跡します。描画成功後に言語を変更すると、以前のsdk.jsスクリプトタグを削除しwindow.FBをクリアしてから新しいロケールをフレッシュに読み込んで解析します。以前のロケールで描画されたカードは新しい解析の前にプレビューホストからクリアされるため、プレビューは常にコピーするローダーURLと一致します。

プロのヒント

• Facebook URLパーサーと組み合わせて使います。 パーサーはリンクを解析してクリーンアップします – 種別やユーザー名、ID、削除されたトラッキングキーなどです。このジェネレーターはクリーンなリンクをコードに変換します。パーサーでアーカイブし、ジェネレーターで公開するのが効率的です。
• ローダーは1回、埋め込みは複数。 Facebook埋め込みを複数含むページではsdk.jsは1回だけ読み込みます – 最初の埋め込みはローダーありで生成し、残りはなしで生成するか、サイトテンプレートでSDKを自前で読み込みすべてで省略します。fb-rootのdivもページごとに1回だけで十分です。
• カラムに合わせてデザインしてから幅を決めます。 Facebookカードはオプション表の幅あたりで視覚的に上限があります。確定する前にプレビューでコンテナサイズでの実際の結果を確認できます。567のような正確なピクセル値も有効で、文書化された範囲を外れた場合のみクランプで補正されます。
• クリップ主体の投稿には動画モードを使います。 動画を投稿プラグインで埋め込むと静的なカードになりますが、fb-videoで埋め込むと自動再生やキャプション制御を備えたプレーヤーとして描画されます。
• 言語は明示的に固定します。 Chrome表示をホストページの<html lang>に任せると、貼り付け先によって出力が変わります。en_USを含むすべての明示的な選択がロケールをコードに書き込み、ホストに関係なく同じラベルを再現します。
• 重いページは遅延読み込みにします。 3つのページプラグインタイムラインを含む記事ではdata-lazyが直接効果を発揮します – 埋め込みがスクロールで近づくまでSDKの解析を遅延させます。
• ページプラグインのタブは最小限にします。 追加するタブごとに高さと通信コストが増えます – timelineのみが最も速い初期描画で、eventsやmessagesはページで本当に使うときだけ追加してください。

代替手段

Facebookコンテンツをページに載せるほかの方法には何がありますか？

Facebook純正の設定ツールは最も近い代替手段であり、同じdata-*語彙の出所でもあります – ただし投稿・動画・ページを別々のページに分け、個人とページを区別する警告もなく、完全な言語リストを備えた投稿・動画・ページ統合の出力を生成することはありません。Graph API経由ではアプリやトークン、継続的な審査のコストで完全な制御が得られますが、描画は依然として自前です。サードパーティのサービスは独自スクリプトを間に挟みます。ジェネレーターは実用的な中間に位置します – 公式マークアップ、フルオプション、そして即時の視覚的確認です。

公式APIとの比較

Facebook埋め込みに関わる公式の窓口は2つあり、ジェネレーターはより手軽でキー不要な方に直接基づいて構築されています。

ジェネレーターはGraphエンドポイントを一切呼び出しません。ソーシャルプラグインのマークアップをルールに基づいて構築し、設定ツールが出力するものを再現して、描画はSDKのFB.XFBML.parseに委ねます。Graph API経由で投稿データを取得するにはトークンが必要で、描画も依然として自前になるため、SDKが公式カードを無料で描画してくれる方が手軽です。

ジェネレーター vs URLパーサー

Toollectは同じリンクを受け付ける2つのFacebookツールを提供しており、役割分担を一目で見ておく価値があります。

パーサーはアナリスト、ジェネレーターはビルダーです。公開ワークフローでは両方を順に使うのが自然です – まずパーサーで雑多な共有リンクが何を指すかを特定・正規化し、次にジェネレーターでページに配置します。両者は文法を共有して構築されているため、パーサーが埋め込み可能な投稿や動画として受け付けるリンクはこのジェネレーターでも埋め込め、こちらで拒否されるリンクはパーサーの種別とメッセージで説明されます。

できないこと

過信されないよう、境界を明記します。

• fb.watch短縮リンクを直接埋め込むことはできません。 短縮リンクはFacebookがリダイレクトするまで遷移先を持ちません。展開後の投稿または動画URLを貼り付けてください。
• URLだけでページと個人プロフィールを確実に区別することはできません。 どちらもfacebook.com/{username}やprofile.php?id=...を共有します。静的な許可リストでは本物のページをブロックしたり個人プロフィールを通してしまったりと、どちらも現実に起こるため、ツールはページ形状のURLならコードを生成し、SDKがゼロまたは極小のiframeを描画するか描画エラーを報告したときのみ黄色いプレビュー警告を出します。
• プライバシーや制限を回避することはできません。 非公開の投稿や閲覧権限のないグループ投稿、年齢や国で制限されたページ、投稿者が埋め込みを無効化したものは、正しいコードでも何も描画されないか制限された表示になり、Facebook純正の設定ツールでも同じです。
• 描画前に投稿内容を取得・検証することはありません。 検証は文法的です – コンテンツが存在し埋め込み可能かどうかは、SDKがdivを解析したときに初めて分かります。
• カードのスタイルを変更することはできません。 描画されたプラグイン内部の色やフォント、ChromeはFacebookのものです。テキスト表示やカバー、フェイスパイル、遅延、数値の幅・高さの有無とサイズのみが調整可能です。
• コードを自動で設置することはできません。 コピーしたものは自分で貼り付ける必要があります。ツールがCMSやページビルダーに直接介入することはできません。

トラブルシューティング

プライバシーとデータ処理

このツールは通信について正直です。

• 生成自体はローカルです。 URLの解析やタブへのマッピング、fb-* divの組み立てはブラウザ内でJavaScriptの文字列操作により行われます。貼り付けたリンクをToollectのサーバーが見ることはありません。
• プレビューはFacebookの仕組みを読み込みます。 カードの描画では選択したロケールのsdk.jsをconnect.facebook.netから取得し、FB.initとFB.XFBML.parseを呼び出し、描画されたiframeはfacebook.comやfbcdn.netから配信されます – コピーしたコードが読者のブラウザで発生させる通信とまったく同じです。
• 言語選択はコードに埋め込まれます。 ja_JPを選ぶとそのロケールが貼り付けるローダーURLに書き込まれ、訪問者のブラウザはそのロケールのSDKを取得します。設定がToollectに保存されることはありません。
• アカウントも保存も解析もありません。 ツールはメモリ内のプレビューホストを超えて状態を保持しません。タブを閉じればすべて終了します。
• コードを公開すると訪問者のブラウザがFacebookと通信します。 これがサードパーティのソーシャルコンテンツを埋め込むということであり、率直にお伝えします。完全にオフラインでFacebookを扱う必要がある場合は、このサイトのFacebook URLパーサーがネットワークリクエストゼロで全作業を完結できます。

技術仕様

詳細:

• 出力 – SDKのdiv fb-post / fb-video / fb-pageと文書化されたdata-*属性、さらにfb-rootとhttps://connect.facebook.net/{locale}/sdk.jsからのsdk.js#xfbml=1&version=v26.0。fb-root divとsdk.jsローダーを含めるがオフのときはローダーブロックが省略されます
• 入力文法 – ホストは任意のサブドメインを含むfacebook.comとfb.watch、fb.me。ユーザー名は2–50文字の[A-Za-z0-9.]、タブは[a-z][a-z0-9_]*で数値の2セグメント目は拒否、IDは5–20桁の数字またはpfbid[1,200]、短縮コードは5–40文字の英数字、予約リスト43件、profile.php?id=と/usernameはどちらもページにルーティングされ描画時に検証されます
• 正規出力URL – ページはhttps://www.facebook.com/{username}またはprofile.php?id=、投稿は.../posts/{id} / share/p/{id}/ / story.php?story_fbid=...、動画は.../videos/{id}またはwatch/?v=、リールは.../reels/{id} / reel/{id}、写真は.../photo/?fbid=、グループ投稿は.../groups/{gid}/posts/{id}
• サイズ – 投稿350–750デフォルト500、動画220–1920デフォルト500、ページ幅180–500デフォルト340に加え高さ70–2048デフォルト500。data-width / data-heightは直接書き込まれ、iframeのサイズ調整は介在しません
• 言語 – 60のfbeLangCodesから選択可能。fbeLangDefaultはToollectのページ言語に追従します – zh-hant→zh_TW、zh-hans→zh_CN、en→en_US、de→de_DE、es→es_ES、fr→fr_FR、it→it_IT、ja→ja_JP、nl→nl_NL、pt→pt_BR、sv→sv_SE。ロケールはローダーURLに書き込まれ、プレビューのSDK再読み込みはloadedLocaleの追跡により反映されます
• プレビューライフサイクル – renderPreviewがfb-rootとfb-* divを注入し、loadSdkJs(locale, cb)がキャッシュされたsdk.jsをロケール対応で再読み込みを管理（切り替え時に古いスクリプトとwindow.FBを削除）、ホスト上でFB.XFBML.parseを呼び出し、startWatcherがiframeを500ミリ秒ごとに最大30回（15秒）ポーリングし、さらに0×0が続く場合は最大6回（約3秒）で個人プロフィール警告、setPreviewLoadingは4つの出口で統一、fbe-fallbackリンクはどの診断でもlastCanonicalを指します
• ブラウザ対応 – クリップボードAPIとasync / deferスクリプト対応のすべてのモダンブラウザ。SDK描画にはサードパーティスクリプトの実行とconnect.facebook.netへの到達が必要です

機能

• ワンクリックで投稿・動画・ページプラグイン用のFacebook公式JavaScript SDK埋め込みコードを生成します
• コピー前にFacebook純正のsdk.jsでライブプレビュー – SDKの読み込み失敗やタイムアウトも診断します
• 60種類の表示言語から選択 – 選んだ言語は訪問者向けのsdk.jsローダーURLに反映されます
• 幅やページタブ、カバー、ヘッダー、フェイスパイル、遅延読み込みまで公式プラグインの全オプションを微調整できます
• どのサイトでも動作するSDK専用出力 – fb-rootとローダーは必要に応じて含めたり省略したりできます
• 無料でブラウザ完結 – APIキーもアカウントもToollectサーバー経由も不要です

よくある質問