Facebook-Embed-Generator

Einleitung

Der Toollect Facebook Embed Generator verwandelt jede öffentliche Facebook-Post-, Video- oder Seiten-URL mit einem Klick in den offiziellen JavaScript-SDK-Einbettungscode, den Facebook dokumentiert – das fb-post / fb-video / fb-page-div plus den sdk.js-Loader – mit Live-Vorschau, die direkt von Facebooks eigenem SDK gerendert wird, bevor du kopierst.

Die Hürde, die er beseitigt, kennt jeder, der Facebook-Code von Hand eingefügt hat. Facebooks Konfigurator versteckt das Page Plugin, verteilt Post- und Video-Optionen auf getrennte Seiten und tauscht iframe- und SDK-Formen ohne Erklärung der Trade-offs. Das handgeschriebene div schlägt still fehl, wenn ein data--Attribut falsch geschrieben ist und der Post als einfacher Link rendert. Dieses Tool zeigt Post, Video und Page Plugin nebeneinander, legt jedes dokumentierte Plugin-Attribut offen, schreibt deine Sprachwahl direkt in die Loader-URL und zeigt das echte Rendering im selben Browser, der deine Besucher bedient.

Jeder Code-Pfad ist bewusst SDK-only. Das SDK ist das Format, das Facebook für alle drei Plugin-Typen pflegt, das einzige mit Sprachunterstützung und das einzige, das Page-Plugin-Tabs und Sizing konsistent halten kann. Der Generator fügt fb-root und Loader hinzu, wenn du sie brauchst, und lässt sie weg, wenn deine Seite das SDK bereits lädt, hält die Vorschau ehrlich bei Adblockern und privaten Inhalten und schickt deinen Link nie über einen Toollect-Server.

Anwendungsfälle

Facebook-Inhalte einzubetten taucht an mehr Orten auf als im Blog, und die drei Tabs teilen die Arbeit natürlich auf.

Blogs und redaktionelle Inhalte

Ein Kommentar-Post, der einen öffentlichen Post zitiert, ein Kulturartikel, der ein virales Video wiederverwendet, ein Review, das die Timeline einer Marke als Social Proof einbettet – die klassischen Fälle. Der Post-Modus mit 500 Pixeln Standardbreite deckt die meisten Spalten ab; der Video-Modus stellt den Player in den Vordergrund; das Page Plugin zeigt eine Live-Timeline ohne Screenshots.

Newsrooms und Live-Berichterstattung

Reporter ziehen offizielle Statements und Augenzeugen-Posts in die laufende Berichterstattung. Geschwindigkeit zählt, und Verifikation ebenso – der Generator normalisiert mobile Share-Links wie m.facebook.com und tracking-lastige URLs zu einer kanonischen Referenz, und die Vorschau bestätigt, dass der Post noch rendert, bevor die Story live geht.

Marketing-Seiten und Portfolios

Kundenbewertungen als eingebettete Page-Timelines, Launch-Videos als Player auf der Seite, Ankündigungsposts als Karten. Die Sprachauswahl rendert das umgebende Chrome in der Sprache der Besucher, und das Weglassen des SDK-Loaders hält Seiten, die Facebooks SDK bereits laden, frei von doppelten Skripten.

Dokumentation und Community-Seiten

Release Notes mit Launch-Post, Docs mit Facebook-Gruppen-Ankündigung, Event-Seiten mit Events-Tab einer Page. Show Text und Lazy-Loading lassen schwere Seiten ruhig, bis sie nahe gescrollt werden.

So funktioniert es

Das Tool läuft in fünf Schritten:

1. URL parsen und klassifizieren – die Eingabe wird gegen die Facebook-Link-Grammatik geprüft: numerische IDs 5–20 Ziffern oder pfbid-IDs, Usernames 2–50 Zeichen, Tabs [a-z][a-z0-9_]* und die drei offiziellen Hosts facebook.com mit jeder Subdomain, fb.watch und fb.me. Tracking-Query-Keys werden gelesen und für das Routing ignoriert – die neu aufgebaute kanonische URL trägt sie nie. Routen ohne ID wie facebook.com/watch ohne v oder fb.watch ohne Kurzcode werden abgelehnt.
2. Plugin-Typ wählen – post / photo / group-post → Post, video / reel → Video, page → Page Plugin. Die Tab-Leiste folgt dem Link – ein Watch-Link wechselt automatisch zu Video, ein Page-Link zu Page Plugin – und manuelles Tab-Wechseln löscht veraltete Ausgabe statt zurückzuspringen.
3. Optionen sammeln – Sprache aus dem Dropdown des Tabs, Breite und Höhe aus den Zahlenfeldern, Page-Checkboxen für Tabs und Chrome, Video-Schalter für Vollbild, Autoplay und Untertitel. Jede Änderung clampet in den gültigen Bereich, schreibt ins Feld zurück und regeneriert sofort.
4. Offizielles Markup bauen – deine Optionen werden zu data-*-Attributen am fb-*-div und für Page Plugin trägt die Loader-URL deine Sprache als https://connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0. Keine iframe-URL wird gebaut – das SDK konsumiert die div-Attribute beim Parsen.
5. Vorschau rendern – der Generator injiziert das div plus fb-root in den Vorschau-Host, lädt oder lädt sdk.js für die gewählte Locale neu, ruft FB.XFBML.parse auf und beobachtet das resultierende iframe. Drei Ergebnisse werden ehrlich gemeldet – Erfolg, Adblocker oder nicht abschließbares Rendering.

Jede Optionsänderung baut die ganze Kette neu – neue Attribute, frische Code-Box, neu geparste Vorschau – sodass der kopierte Code immer zu dem passt, was du siehst.

Unterstützte URL-Formate

Der Generator akzeptiert jede URL-Form, die einen öffentlichen Post, ein Video oder eine Page auf Facebooks drei offiziellen Hosts identifiziert, und lehnt alles andere mit spezifischer Meldung ab. Schema und www. sind optional; mobile Subdomains werden normalisiert.

Akzeptierte Formate

Der abschließende Slash, Hash-Fragment und Query-String nach der ID werden toleriert und verworfen; View-Suffixe wie ein numerisches Tab-Segment nach einem Username werden als Page-Tab-Ansicht behandelt, nicht als separate Ressource.

Abgelehnte Formate

Der fb.watch-Fall verdient Hervorhebung, weil der App-Share-Button noch diese Form erzeugt. Der Generator lehnt sie bewusst mit der dedizierten Kurzlink-Meldung ab und bittet, den Link zu öffnen und die volle Post- oder Video-URL zu kopieren. Das Einfügen der expandierten URL gelingt sofort.

Anatomie des Einbettungscodes

Die Ausgabe ist der Code, den Facebook dokumentiert, mit deinen Optionen angewandt. Ein Post-Embed mit Defaults sieht so aus:

<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>

Durch die Teile:

• Die Plugin-div-Klasse – fb-post, fb-video oder fb-page sagt dem SDK, welches Plugin zu instanziieren ist. Eine Klasse pro Embed.
• data-href – die kanonische URL aus dem vorherigen Abschnitt, Ampersand-escapet. Das einzige Pflichtattribut für alle drei Plugins.
• data-width (Post und Video) – die gewünschte Breite in Pixeln. Post akzeptiert 350–750 Standard 500 in diesem Tool, Video 220–1920 Standard 500. Facebooks SDK skaliert die Karte nach Möglichkeit auf diese Breite.
• data-show-text – vorhanden, wenn Show post text angehakt ist. Facebook dokumentiert es für Posts und Videos mit Foto; ohne kann der Text verborgen sein.
• data-lazy – vorhanden, wenn Lazy-load angehakt ist. Verschiebt das Rendering bis das Embed nahe gescrollt wird.
• data-allowfullscreen / data-autoplay / data-show-captions (nur Video) – allowfullscreen aktiviert den Vollbild-Button, autoplay startet stummgeschaltete Wiedergabe beim Seitenladen auf Desktop, show-captions zeigt Untertitel standardmäßig, wenn auf Desktop verfügbar. Alle drei fehlen, wenn aus.
• data-tabs / data-height / data-small-header / data-adapt-container-width / data-hide-cover / data-hide-cta / data-show-facepile (nur Page Plugin) – tabs listet sichtbare Tabs wie timeline,events,messages Standard timeline, height Standard 500, die Booleans bilden die Chrome-Toggles direkt ab.
• Der Loader – fb-root plus sdk.js#xfbml=1&version=v26.0 von connect.facebook.net/{locale}/. en_US ist ein Beispiel – deine Sprachwahl schreibt das Locale-Segment. Die Checkbox Include the fb-root div and sdk.js loader entfernt diesen ganzen Block, wenn deine Seite das SDK bereits lädt.

Ein Page Plugin mit nicht-default Einstellungen zeigt den volleren Attributsatz:

<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>

Optionen für die Einbettung

Jedes Control bildet auf ein Attribut ab. Defaults in Klammern.

Sprache (Standard deine Toollect-Seitensprache – zh-hant wird zh_TW, zh-hans zh_CN, en en_US und ebenso für de, es, fr, it, ja, nl, pt, sv) – zeigt 60 Locales von en_US bis af_ZA mit lokalisierten Namen pro Toollect-Seitensprache. Jede explizite Auswahl, Englisch eingeschlossen, wird in die Loader-URL geschrieben. Das SDK lokalisiert den Rand des Embeds – Zeitstempel, Like-Button-Labels – nie den Post-Text selbst.

Breite (Post 500, Video 500, Page 340) – als exakte Zahl getippt, beim Verlassen des Feldes in den gültigen Bereich geclampt. Post 350–750, Video 220–1920, Page 180–500. Werte außerhalb springen zur nächsten Grenze – 5000 bei Video wird 1920.

Höhe (Page 500) – nur Page Plugin, 70–2048. Posts und Videos tragen kein Höhenattribut – das SDK dimensioniert ihre Karten aus Breite und Inhalt.

Beitragstext mit Fotos und Videos anzeigen (aus) – schreibt data-show-text="true" für Post, bei Video mit Hinweis (nur Desktop) im Label, passend zu Facebooks Hinweis, dass der Text-Toggle nur das Desktop-Rendering betrifft.

Lazy laden bis nahe gescrollt (aus, alle Tabs) – schreibt data-lazy="true".

Vollbildwiedergabe erlauben (aus, Video) – schreibt data-allowfullscreen="true".

Beim Laden der Seite automatisch abspielen (stummgeschaltet, nur Desktop) (aus, Video) – schreibt data-autoplay="true". Facebook dokumentiert dies als stummgeschaltetes Autoplay nur auf Desktop.

Untertitel standardmäßig anzeigen, wenn verfügbar (nur Desktop) (aus, Video) – schreibt data-show-captions="true", nur Desktop.

Anzuzeigende Tabs (Chronik, Page Plugin) – drei Checkboxen timeline / events / messages vereint als data-tabs="timeline,events,messages". Nicht angehakte Tabs fehlen einfach in der Liste.

Kleinen Header verwenden / An Containerbreite anpassen / Titelbild ausblenden / Benutzerdefinierten Call-to-Action ausblenden / Profilbilder von Freunden anzeigen (Page Plugin) – jedes schreibt seinen data-*-Boolean. Adapt ist standardmäßig an; Facepile ist an.

fb-root-Div und sdk.js-Loader einbeziehen (an) – steuert, ob der Loader-Block angehängt wird. Seiten, die sdk.js global bereits laden, sollten ihn abhaken.

Sprache und Internationalisierung

Facebooks FAQ zu eingebetteten Posts und die Internationalisierungsanleitung des JavaScript SDK sagen dasselbe – die Anzeigesprache sozialer Plugins kommt aus dem Locale-Segment der sdk.js-URL. Dieses Tool macht das sichtbar.

Deine Sprachauswahl fließt an zwei Stellen ein:

• Der generierte Code – https://connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0 mit locale wie en_US, zh_TW, fr_FR oder ja_JP.
• Die Live-Vorschau – Wechsel im Dropdown baut den Vorschau-Host neu, entfernt jedes zuvor geladene SDK-Skript mit anderem Locale, löscht window.FB und lädt das neue Locale frisch, bevor FB.XFBML.parse aufgerufen wird.

Der Standard folgt automatisch deiner Toollect-Seitensprache – der Besuch von toollect.com/zh-hant/tools/facebook-embed-generator/ wählt zh_TW vor, zh-hans zh_CN, ja ja_JP und die europäischen Sprachen ihre Territory-Form (de→de_DE, fr→fr_FR usw.), sonst Fallback en_US. Es gibt keine Automatic-Option – Facebook verlangt ein explizites Locale, daher schreibt das Tool immer eines.

Was sich ändert und was nicht:

Unterstützte Anzeigesprachen

Facebook dokumentiert rund hundert Locales für das SDK. Das Dropdown bietet die sechzig meistgenutzten, mit pro Toollect-Seitensprache lokalisierten Namen. Der vollständige Satz umfasst:

af_ZA Afrikaans · ar_AR Arabisch · az_AZ Aserbaidschanisch · bg_BG Bulgarisch · bn_IN Bengalisch · bs_BA Bosnisch · ca_ES Katalanisch · cs_CZ Tschechisch · da_DK Dänisch · de_DE Deutsch · el_GR Griechisch · en_GB Englisch (UK) · en_US Englisch (US) · es_ES Spanisch (Spanien) · es_LA Spanisch · et_EE Estnisch · eu_ES Baskisch · fa_IR Persisch · fi_FI Finnisch · fr_FR Französisch · gl_ES Galicisch · gu_IN Gujarati · he_IL Hebräisch · hi_IN Hindi · hr_HR Kroatisch · hu_HU Ungarisch · hy_AM Armenisch · id_ID Indonesisch · is_IS Isländisch · it_IT Italienisch · ja_JP Japanisch · jv_ID Javanisch · ka_GE Georgisch · km_KH Khmer · kn_IN Kannada · ko_KR Koreanisch · lo_LA Laotisch · lt_LT Litauisch · lv_LV Lettisch · mk_MK Mazedonisch · ml_IN Malayalam · mr_IN Marathi · ms_MY Malaiisch · my_MM Birmanisch · nb_NO Norwegisch · ne_NP Nepalesisch · nl_NL Niederländisch · pa_IN Punjabi · pl_PL Polnisch · pt_BR Portugiesisch (Brasilien) · pt_PT Portugiesisch (Portugal) · ro_RO Rumänisch · ru_RU Russisch · si_LK Singhalesisch · sk_SK Slowakisch · sl_SI Slowenisch · sq_AL Albanisch · sr_RS Serbisch · su_ID Sundanesisch · sv_SE Schwedisch · sw_KE Suaheli · ta_IN Tamil · te_IN Telugu · th_TH Thai · tl_PH Filipino · tr_TR Türkisch · uk_UA Ukrainisch · ur_PK Urdu · vi_VN Vietnamesisch · zh_CN Chinesisch (vereinfacht) · zh_HK Chinesisch (Hongkong) · zh_TW Chinesisch (traditionell)

Jedes Locale jenseits des Dropdowns ist per gleichem Muster gültig – https://connect.facebook.net/{locale}/sdk.js – aber die sechzig oben decken jede Sprache ab, die Toollect selbst ausliefert, sodass der Code selten editiert werden muss.

Verwendung

1. Facebook-URL einfügen ins Eingabefeld – jedes akzeptierte Format aus den Tabellen oben, inklusive m.facebook.com und fb.me-Kurzlinks, die zu einer Page auflösen. Schema und www. sind optional.
2. Generieren drücken oder Enter. Der Code erscheint in der Ausgabebox und die Vorschau öffnet automatisch und zeigt das echte SDK-Rendering. Die URL-Leiste treibt auch den Tab – ein Watch-Link schaltet zu Video, ein Page-Link zu Page Plugin.
3. Tab bei Bedarf wählen – Post für Posts, Fotos und Gruppen-Posts; Video für Videos und Reels; Page Plugin für Seiten. Wechseln regeneriert mit dem Optionsset des Tabs, unpassende Tabs löschen veraltete Ausgabe.
4. Sprache setzen – der Standard passt bereits zu deiner Seitensprache, aber du kannst jede der sechzig Locales wählen. Generierte Loader-URL und Vorschau wechseln sofort.
5. Verbleibende Optionen anpassen – Breite, Höhe für Page, Header- und Cover-Toggles, Lazy Loading. Jede Änderung regeneriert; Code-Box und Vorschau driften nie auseinander.
6. Vorschau-Diagnose prüfen – erscheint keine Karte, sagt die Warnung über der Ausgabe, ob das SDK blockiert wurde, der Inhalt nicht rendern kann oder die URL auf eine persönliche Timeline statt einer Page zeigt.
7. Code kopieren und dort in deine Seite einfügen, wo das Embed erscheinen soll. Lädt deine Seite sdk.js bereits, deaktiviere die Loader-Inklusion, um ein Duplikat zu vermeiden.

Eingaben ohne unterstütztes Format löschen die Ausgabe und erklären sich im roten Fehlerbereich – entweder die ungültige-Link-Meldung oder die Kurzlink-Meldung. Löschen setzt Eingabe, Code und Vorschau in einem Schritt zurück.

Schritt-für-Schritt-Anleitung

Folge einem echten Link durch alle drei Tabs.

Schritt 1 – Post-Link wie von der App geteilt einfügen. Kopiere eine Post-URL mit Tracking-Parametern:

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

Drücke Generieren. Der Parser liest an der m.-Subdomain und __tn__-Tracking vorbei zu facebook, Post pfbid0AbCdEfGhIjKlMnOpQrStUvWxYz1234567890, der Tab bleibt Post und der Code zeigt data-width="500" mit en_US-Loader, weil dieser Walkthrough auf der englischen Seite ist. Die Vorschau öffnet und die Karte rendert mit 500 Pixeln.

Schritt 2 – Sprache wechseln. Wechsle die Post-Sprache zu Chinesisch Traditionell zh_TW. Der Loader wird zu https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v26.0 und die Vorschau lädt das SDK neu – der Zeitstempel am Post wechselt in seine chinesische Form, während der Post-Text exakt wie verfasst bleibt.

Schritt 3 – Verengen. Tippe 600 in Breite und verlasse das Feld. Das div erhält data-width="600" und die Karte schrumpft. Tippe 9999 und verlasse – das Feld springt auf 750, das Post-Maximum.

Schritt 4 – Zu Video wechseln. Ersetze im Input die Post-URL durch ein Video:

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

Drücke Generieren. Das Tool schaltet zu Video, der Code wird zu <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729" data-width="500"> und das Sprachen-Dropdown zeigt denselben en_US-Standard. Hake Autoplay und Show captions an – jedes schreibt sein data-* mit dem Desktop-only-Hinweis im Label.

Schritt 5 – Page Plugin. Füge https://www.facebook.com/facebook ein und generiere. Der Page-Plugin-Tab öffnet mit data-tabs="timeline" und vollem Chrome-Set. Hake Events und Messages an – das Attribut wird zu data-tabs="timeline,events,messages". Ändere Breite zu 500 und Höhe zu 700 – beide Attribute aktualisieren sich. Die Vorschau zeigt Timeline, Cover und Facepile exakt wie der Code auf deiner Seite.

Schritt 6 – Kopieren und ausliefern. Drücke Kopieren und füge in eine schlichte HTML-Seite ein, die bereits sdk.js lädt – deaktiviere vor dem Kopieren den Loader. Öffne die Seite – Post, Video und Page rendern jeweils in den gewählten Breiten und Sprachen.

Vorschau und Diagnose

Die Vorschau führt Facebooks echtes sdk.js gegen dein exaktes div aus buildSdkCode aus, daher schlägt sie exakt dort fehl, wo deine Seite fehlschlagen wird. Der Host zeigt einen Spinner, während sdk.js lädt und FB.XFBML.parse läuft, dann erscheint eines von vier Ergebnissen:

Beide zeitbasierten Warnungen feuern nur nach großzügigen Wartezeiten – zwanzig Sekunden für den SDK-Download, fünfzehn weitere für das Rendering – sodass langsame Verbindungen keine Fehlalarme auslösen. Ein einbettbarer Post rendert deutlich innerhalb dieser Fenster, und ein persönliches Page-Plugin zeigt die gelbe Warnung etwa drei Sekunden, nachdem das iframe bei Nullgröße bleibt.

Ein Detail, das sich zu wissen lohnt: Der Generator verfolgt loadedLocale. Sprachwechsel nach erfolgreichem Rendering entfernt das vorherige sdk.js-Script-Tag, löscht window.FB und lädt das neue Locale frisch vor dem Parsen. Zuvor gerenderte Karten des alten Locales werden aus dem Vorschau-Host gelöscht, bevor neu geparst wird, sodass die Vorschau immer zur Loader-URL passt, die du kopierst.

Profi-Tipps

• Mit dem Facebook URL Parser koppeln. Der Parser analysiert und bereinigt einen Link – Typ, Username, ID, entfernte Tracking-Keys – während dieser Generator den sauberen Link in Code verwandelt. Mit dem Parser archivieren, mit dem Generator veröffentlichen.
• Ein Loader, viele Embeds. Seiten mit mehreren Facebook-Embeds sollten sdk.js einmal laden – erstes Embed mit Loader angehakt generieren, die restlichen ohne, oder das SDK selbst im Site-Template laden und überall weglassen. Das fb-root-div wird ebenfalls nur einmal pro Seite benötigt.
• Für die Spalte designen, dann Breite setzen. Facebook-Karten kappen visuell um die Breiten in der Optionstabelle; die Vorschau zeigt das echte Ergebnis bei deiner Containergröße, bevor du committest. Tippe einen exakten Pixelwert – 567 ist gültig – und der Clamp korrigiert nur, falls er den dokumentierten Bereich verlässt.
• Video-Modus für clip-lastige Posts nutzen. Ein Video via Post-Plugin rendert als statische Karte – via fb-video als Player mit Autoplay- und Untertitel-Controls, die das Plugin dokumentiert.
• Sprache explizit pinnen. Das Chrome dem Host-<html lang> zu überlassen macht die Ausgabe vom Einfügeort abhängig. Jede explizite Auswahl, en_US eingeschlossen, schreibt das Locale in den Code und reproduziert dieselben Labels unabhängig vom Host.
• Schwere Seiten lazy laden. Ein Artikel mit drei Page-Plugin-Timelines profitiert direkt von data-lazy – das SDK verschiebt das Parsen, bis das Embed nahe gescrollt wird.
• Page-Plugin-Tabs minimal halten. Jeder zusätzliche Tab erhöht Höhe und Netzwerkkosten – timeline allein ist das schnellste initiale Rendering; events und messages nur hinzufügen, wenn die Page sie wirklich nutzt.

Alternativen

Wie sonst bekommt man Facebook-Inhalte auf die Seite?

Facebooks eigener Konfigurator ist die engste Alternative und Quelle desselben data-*-Vokabulars – aber er trennt Post, Video und Page auf verschiedene Seiten, bietet keine persönliche-vs-Page-Warnung und produziert nie eine Post/Video/Page-Vereinigung mit der vollen Sprachliste des Tools. Die Graph-API-Route kauft totale Kontrolle zum Preis einer App, eines Tokens und laufender Review und überlässt das Rendering dennoch dir. Drittanbieter-Services schieben eigene Skripte dazwischen. Der Generator besetzt die praktische Mitte – offizielles Markup, volle Optionen, sofortige visuelle Bestätigung.

Im Vergleich zu den offiziellen APIs

Zwei offizielle Oberflächen berühren Facebook-Einbettungen, und der Generator baut direkt auf der freundlicheren, schlüssellosen auf.

Der Generator ruft keinen Graph-Endpunkt auf. Er baut das Social-Plugin-Markup nach Regel, spiegelt was der Konfigurator ausgeben würde, und verlässt sich für das Rendering auf FB.XFBML.parse. Die Graph API ist nicht beteiligt – Post-Daten darüber zu holen würde ein Token erfordern und ließe das Rendering dennoch bei dir, während das SDK die offizielle Karte kostenlos rendert.

Der Generator im Vergleich zum URL-Parser

Toollect liefert zwei Facebook-Tools, die dieselben Links akzeptieren, und die Arbeitsteilung ist einen Blick wert:

Der Parser ist der Analyst; der Generator ist der Builder. Ein Publishing-Workflow nutzt beide der Reihe nach – parsen, um zu identifizieren und zu normalisieren, wohin ein unordentlicher Share-Link zeigt, dann generieren, um ihn auf die Seite zu bringen. Sie stimmen grammatisch überein, daher wird ein Link, den der Parser als einbettbaren Post oder Video akzeptiert, von diesem Generator eingebettet, und ein hier abgelehnter Link wird durch den Parser erklärt.

Was das Tool nicht kann

Die Grenzen, benannt damit das Tool nie übervertraut wird:

• Es bettet fb.watch-Kurzlinks nicht direkt ein. Ein Kurzlink trägt kein Ziel, bis Facebook weiterleitet. Füge stattdessen die expandierte Post- oder Video-URL ein.
• Es unterscheidet eine Page nicht zuverlässig von einem persönlichen Profil allein per URL. Beide teilen facebook.com/{username} und profile.php?id=.... Eine statische Allowlist würde echte Pages blockieren oder persönliche Profile durchlassen – beides kommt in freier Wildbahn vor – daher generiert das Tool den Code für jede Page-förmige URL und zeigt eine gelbe Vorschau-Warnung nur, wenn das SDK ein Null- oder winziges iframe rendert oder einen Render-Fehler meldet.
• Es hebelt keine Privatheit oder Beschränkung aus. Private Posts, Gruppen-Posts, die der Betrachter nicht sehen kann, alters- oder länderbeschränkte Seiten und Autoren, die das Einbetten deaktiviert haben, produzieren korrekten Code, der nichts oder eine eingeschränkte Ansicht rendert, wo selbst Facebooks eigener Konfigurator nichts zeigen würde.
• Es holt oder verifiziert Post-Inhalt nicht vor dem Rendern. Validierung ist grammatisch – ob der Inhalt existiert und einbettbar ist, beantwortet erst das Parsen des divs durch das SDK.
• Es styled die Karte nicht. Farben, Schriften und Chrome innerhalb des gerenderten Plugins stammen von Facebook. Nur Präsenz und Größe – Show text, Cover, Facepile, Lazy und numerische Breite/Höhe – gehören dir.
• Es installiert den Code nicht. Was du kopierst, fügst du ein; das Tool kann nicht in dein CMS oder deinen Page Builder greifen.

Fehlerbehebung

Datenschutz und Datenverarbeitung

Dieses Tool ist ehrlich über seinen Traffic.

• Generierung selbst ist lokal. URL parsen, auf einen Tab mappen und das fb-*-div zusammenbauen geschieht im Browser mit JavaScript-String-Operationen. Kein Toollect-Server sieht den eingefügten Link.
• Die Vorschau lädt Facebooks Maschinerie. Das Rendern der Karte holt sdk.js von connect.facebook.net im gewählten Locale, ruft FB.init und FB.XFBML.parse auf und das gerenderte iframe kommt von facebook.com und fbcdn.net – genau der Traffic, den der kopierte Code im Browser deiner Leser erzeugen wird.
• Sprachauswahl ist in den Code gebacken. ja_JP zu wählen schreibt dieses Locale in die Loader-URL, die du einfügst; Browser deiner Besucher holen das SDK dieses Locales. Keine Präferenz wird von Toollect gespeichert.
• Kein Konto, keine Speicherung, keine Analyse. Das Tool hält keinen Zustand zwischen Besuchen über den In-Memory-Vorschau-Host hinaus; das Schließen des Tabs beendet alles.
• Den Code zu veröffentlichen bedeutet, dass deine Besucher mit Facebook sprechen. Das ist die Natur des Einbettens von Social Content Dritter – wert, klar zu sagen. Wenn du einen strikt offline Facebook-Workflow brauchst, erledigt der Facebook URL Parser auf dieser Seite seine gesamte Aufgabe mit null Netzwerkanfragen.

Technische Daten

Details:

• Ausgabe: SDK-div fb-post / fb-video / fb-page mit dokumentierten data-*-Attributen plus fb-root und sdk.js#xfbml=1&version=v26.0 von https://connect.facebook.net/{locale}/sdk.js; Include the fb-root div and sdk.js loader entfernt den Loader-Block, wenn aus
• Eingabegrammatik: Hosts facebook.com mit jeder Subdomain, fb.watch, fb.me; Username 2–50 Zeichen [A-Za-z0-9.]; Tabs [a-z][a-z0-9_]* mit numerischen zweiten Segmenten abgelehnt; IDs 5–20 Ziffern oder pfbid[1,200]; Kurzcodes 5–40 alphanum; Reserveliste 43 Einträge; profile.php?id= und /username routen beide zu Page mit verifikationspflichtigem Rendering
• Kanonische Ausgabe-URLs: https://www.facebook.com/{username} oder profile.php?id= für Pages, .../posts/{id} / share/p/{id}/ / story.php?story_fbid=... für Posts, .../videos/{id} oder watch/?v= für Videos, .../reels/{id} / reel/{id} für Reels, .../photo/?fbid= für Fotos, .../groups/{gid}/posts/{id} für Gruppen-Posts
• Maße: Post 350–750 Standard 500, Video 220–1920 Standard 500, Page Breite 180–500 Standard 340 plus Höhe 70–2048 Standard 500; data-width/data-height direkt geschrieben, kein iframe-Sizing
• Sprachen: jede der 60 fbeLangCodes wählbar; fbeLangDefault folgt der Toollect-Seitensprache – 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; Locale in Loader-URL geschrieben und von Vorschau-SDK-Reload via loadedLocale-Tracking beachtet
• Vorschau-Lifecycle: renderPreview injiziert fb-root + fb-*-div, loadSdkJs(locale, cb) verwaltet gecachtes sdk.js mit locale-sensitivem Reload (entfernt altes Skript und window.FB beim Wechsel), FB.XFBML.parse auf dem Host aufgerufen, startWatcher pollt das iframe alle 500 ms bis zu 30 Versuchen (15 s) und bis zu 6 Versuchen mit persistentem 0×0 (~3 s) vor der Personal-Profil-Warnung, setPreviewLoading über vier Exit-Punkte vereinheitlicht, fbe-fallback-Link zeigt auf lastCanonical bei jeder Diagnose
• Browser-Support: alle modernen Browser mit Clipboard-API und async/defer-Skript-Support; SDK-Rendering erfordert Third-Party-Skript-Ausführung und Erreichbarkeit von connect.facebook.net

Funktionen

• Offiziellen Facebook-JavaScript-SDK-Code für Posts, Videos und Page Plugins mit einem Klick generieren
• Live-Vorschau direkt mit Facebooks eigenem sdk.js – mit Diagnose bei SDK-Fehler und Timeout
• Aus 60 Anzeigesprachen wählen – deine Auswahl wird in die sdk.js-Loader-URL für deine Besucher geschrieben
• Jede offizielle Plugin-Option feinjustieren – Breite, Page-Tabs, Cover, Header, Facepile und Lazy Loading
• Reine SDK-Ausgabe für jede Seite – optionaler fb-root und Loader je nach Bedarf enthalten oder weggelassen
• Kostenlos und browserbasiert – kein API-Key, kein Konto, kein Toollect-Server-Proxy

Häufig gestellte Fragen