Facebook-embedgenerator

Inleiding

De Toollect Facebook-embedgenerator zet elke openbare Facebook-post-, video- of pagina-URL met één klik om in de officiële JavaScript SDK-insluitcode die Facebook documenteert – de fb-post / fb-video / fb-page-div plus de sdk.js-loader – met een live voorbeeld gerenderd door Facebooks eigen SDK voordat je kopieert.

De frictie die hij wegneemt herkent iedereen die ooit Facebook-code met de hand heeft geplakt. Facebooks configurator verbergt de Page-plugin, verdeelt post- en video-opties over aparte pagina's en wisselt tussen iframe- en SDK-vormen zonder de afwegingen uit te leggen. De met de hand geschreven div faalt stil wanneer een data--attribuut verkeerd is gespeld en de post als kale link rendert. Deze tool toont Post, Video en Page-plugin naast elkaar, legt elk gedocumenteerd pluginattribuut bloot, schrijft je taalkeuze direct in de loader-URL en toont de echte render in dezelfde browser die je bezoekers bedient.

Elk codepad is bewust alleen SDK. De SDK is het formaat dat Facebook onderhoudt voor alle drie plugintypen, het enige dat weergavetalen ondersteunt en het enige dat Page-plugin-tabs en schaling consistent kan houden. De generator voegt fb-root en loader toe wanneer je ze nodig hebt en laat ze weg wanneer je site de SDK al laadt, houdt het voorbeeld eerlijk over adblockers en privécontent en stuurt je link nooit via een Toollect-server.

Toepassingen

Facebook-content insluiten kom je op meer plekken tegen dan een blogpost en de drie tabbladen verdelen het werk natuurlijk.

Blogs en redactionele content

Een commentaarpost die een openbare post citeert, een cultuurartikel dat een virale video hergebruikt, een review die de tijdlijn van een merk als sociaal bewijs insluit – de klassieke gevallen. Post-modus met de standaardbreedte van 500 pixels dekt de meeste kolommen; Video-modus houdt de speler vooraan; Page-plugin toont een live tijdlijn zonder screenshots.

Newsrooms en live verslaggeving

Verslaggevers trekken officiële verklaringen en ooggetuigenposts in doorlopende verslaggeving. Snelheid telt en verificatie ook – de generator normaliseert mobiele deellinks zoals m.facebook.com en trackingvolle URL's naar één canonieke referentie en het voorbeeld bevestigt dat de post nog rendert voordat het stuk live gaat.

Marketingsites en portfolio's

Klantreviews als ingesloten Page-tijdlijnen, launchvideo's als spelers op de pagina, aankondigingsposts als kaarten. Taalkeuze rendert het omringende chroom in de taal van de bezoeker en het weglaten van de SDK-loader houdt pagina's die Facebooks SDK al laden vrij van dubbele scripts.

Documentatie- en communitysites

Releasenotes die een launchpost citeren, docs die een Facebook-groepaankondiging refereren, eventpagina's die de Events-tab van een pagina tonen. Tekst tonen en lazy loading laten zware pagina's rustig tot ze bijna in beeld worden gescrolld.

Hoe het werkt

De tool draait in vijf stappen –

1. URL parsen en classificeren – de invoer wordt gematcht tegen de Facebook-linkgrammatica – numerieke ID's 5–20 cijfers of pfbid-ID's, gebruikersnamen 2–50 tekens, tabs die matchen met [a-z][a-z0-9_]* en de drie officiële hosts facebook.com met elk subdomein, fb.watch en fb.me. Tracking-querykeys worden gelezen en daarna genegeerd voor routering – de herbouwde canonieke URL draagt ze nooit. Routes zonder ID zoals facebook.com/watch zonder v of fb.watch zonder korte code worden geweigerd.
2. Plugintype kiezen – post / photo / group-post mappen naar Post, video / reel naar Video, page naar Page-plugin. De tabbalk volgt de link – een watch-URL plakken schakelt automatisch naar Video, een pagina-URL naar Page-plugin – en handmatig wisselen van tab wist verouderde output in plaats van terug te springen.
3. Je opties verzamelen – taal uit de dropdown van het tabblad, breedte en hoogte uit de numerieke velden, Page-checkboxes voor tabs en chroom, videoschakelaars voor fullscreen, autoplay en ondertiteling. Elke wijziging wordt binnen het geldige bereik afgekapt, terug in het veld geschreven en meteen opnieuw gegenereerd.
4. De officiële markup bouwen – je opties worden data-*-attributen op de fb-*-div en voor Page-plugin draagt de loader-URL je taal als https://connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0. Er wordt geen iframe-URL gebouwd – de SDK consumeert de div-attributen bij het parsen.
5. Het voorbeeld renderen – de generator injecteert de div plus een fb-root in de voorbeeldhost, laadt of herlaadt sdk.js voor de gekozen locale, roept FB.XFBML.parse aan en bewaakt het resulterende iframe. Drie uitkomsten worden eerlijk gemeld – succes, een adblocker of een render die niet kan voltooien.

Elke optiewijziging herbouwt de hele keten – nieuwe attributen, vers codevak, opnieuw geparst voorbeeld – zodat de code die je kopieert altijd overeenkomt met waar je naar kijkt.

Ondersteunde URL-formaten

De generator accepteert elke URL-vorm die een openbare post, video of pagina op Facebooks drie officiële hosts identificeert en wijst al het andere af met een specifieke melding. Schema en www. zijn optioneel; mobiele subdomeinen worden genormaliseerd.

Geaccepteerde formaten

De afsluitende slash, hashfragment en querystring na de ID worden getolereerd en verwijderd; view-suffixen zoals een numeriek tabsegment na een gebruikersnaam worden behandeld als paginatab-weergave, niet als aparte resource.

Geweigerde formaten

Het fb.watch-geval verdient nadruk omdat de deelknop van de app nog steeds die vorm produceert. De generator wijst hem bewust af met de eigen korte-linkmelding en vraagt je de link te openen en de volledige post- of video-URL te kopiëren. De geëxpandeerde URL plakken lukt meteen.

Anatomie van de insluitcode

De output is de code die Facebook documenteert, met je opties toegepast. Een post-embed met standaardinstellingen ziet er zo uit –

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

Langs de delen –

• De plugin-div-klasse – fb-post, fb-video of fb-page vertelt de SDK welke plugin te instantiëren. Eén klasse per embed.
• data-href – de canonieke URL uit de vorige paragraaf, ampersand-ge-escaped. Dit is het enige verplichte attribuut voor alle drie plugins.
• data-width (Post en Video) – de gewenste breedte in pixels. Post accepteert 350–750 standaard 500 in deze tool, Video 220–1920 standaard 500. Facebooks SDK schaalt de kaart waar mogelijk naar deze breedte.
• data-show-text – aanwezig wanneer Posttekst tonen is aangevinkt. Facebook documenteert hem voor posts en video's die een foto bevatten; zonder kan de tekst verborgen blijven.
• data-lazy – aanwezig wanneer Lazy-load is aangevinkt. Stelt renderen uit tot de embed bijna in beeld wordt gescrolld.
• data-allowfullscreen / data-autoplay / data-show-captions (alleen Video) – allowfullscreen schakelt de fullscreenknop in, autoplay start gedempt afspelen wanneer de pagina laadt op desktop, show-captions toont ondertiteling standaard wanneer beschikbaar op desktop. Alle drie afwezig wanneer uit.
• data-tabs / data-height / data-small-header / data-adapt-container-width / data-hide-cover / data-hide-cta / data-show-facepile (alleen Page-plugin) – tabs somt de zichtbare tabs op zoals timeline,events,messages standaard timeline, height standaard 500, de booleans mappen direct op de chroomtoggles van de plugin.
• De loader – fb-root plus sdk.js#xfbml=1&version=v26.0 vanaf connect.facebook.net/{locale}/. en_US is een voorbeeld – je taalkeuze schrijft het localesegment. De checkbox Include the fb-root div and sdk.js loader laat dit hele blok weg wanneer je site de SDK al laadt.

Een Page-plugin met niet-standaardinstellingen toont de vollere attribuutset –

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

Insluitopties

Elk bedieningselement mapt op één attribuut. Standaarden tussen haakjes.

Taal (standaard je Toollect-sitetaal – zh-hant wordt zh_TW, zh-hans zh_CN, en en_US en zo ook voor de, es, fr, it, ja, nl, pt, sv) – toont 60 locales van en_US tot af_ZA met gelokaliseerde namen per Toollect-paginataal. Elke expliciete keuze, Engels inbegrepen, wordt in de loader-URL geschreven. De SDK lokaliseert de rand van de embed – tijdstempels, Vind-ik-leuk-knoplabels – nooit de posttekst zelf.

Breedte (Post 500, Video 500, Pagina 340) – getypt als exact getal, bij het verlaten van het veld afgekapt naar het geldige bereik. Post 350–750, Video 220–1920, Pagina 180–500. Waarden buiten het bereik springen naar de dichtstbijzijnde grens – 5000 bij Video wordt 1920.

Hoogte (Pagina 500) – alleen Page-plugin, 70–2048. Posts en video's dragen geen hoogteattribuut – de SDK bepaalt hun kaarten op basis van breedte en content.

Posttekst tonen bij foto's en video's (uit) – schrijft data-show-text="true" voor Post en voor Video voegt (alleen desktop) toe in het label om Facebooks opmerking te volgen dat de teksttoggle alleen desktoprendering beïnvloedt.

Lazy-load tot bijna in beeld gescrolld (uit, alle tabbladen) – schrijft data-lazy="true".

Fullscreen-weergave toestaan (uit, Video) – schrijft data-allowfullscreen="true".

Automatisch afspelen wanneer pagina laadt (gedempt, alleen desktop) (uit, Video) – schrijft data-autoplay="true". Facebook documenteert dit als gedempt autoplay alleen op desktop.

Ondertiteling standaard tonen wanneer beschikbaar (alleen desktop) (uit, Video) – schrijft data-show-captions="true", alleen desktop.

Te tonen tabs (Tijdlijn, Page-plugin) – drie checkboxes timeline / events / messages samengevoegd als data-tabs="timeline,events,messages". Niet-aangevinkte tabs ontbreken gewoon in de lijst.

Kleine header gebruiken / Aan containerbreedte aanpassen / Coverfoto verbergen / Aangepaste call-to-action verbergen / Profielfoto's van vrienden tonen (Page-plugin) – elk schrijft zijn data-*-boolean. Aanpassen staat standaard aan; facepile staat standaard aan.

De fb-root-div en sdk.js-loader opnemen (aan) – bepaalt of het loaderblok wordt toegevoegd. Sites die sdk.js al globaal laden moeten hem uitvinken.

Taal & internationalisering

Facebooks FAQ over ingesloten posts en de internationaliseringsgids van de JavaScript SDK zeggen hetzelfde – de weergavetaal van social plugins komt uit het localesegment van de sdk.js-URL. Deze tool maakt dat zichtbaar.

Je taalkeuze stroomt naar twee plekken –

• De gegenereerde code – https://connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0 met locale zoals en_US, zh_TW, fr_FR of ja_JP.
• Het live voorbeeld – wisselen van dropdown herbouwt de voorbeeldhost, verwijdert elk eerder geladen SDK-script dat een andere locale draagt, wist window.FB en laadt de nieuwe locale vers voordat FB.XFBML.parse wordt aangeroepen.

De standaard volgt automatisch je Toollect-sitetaal – bezoek aan toollect.com/zh-hant/tools/facebook-embed-generator/ preselecteert zh_TW, zh-hans preselecteert zh_CN, ja preselecteert ja_JP en de Europese talen mappen naar hun territoriumvorm (de→de_DE, fr→fr_FR enzovoort), terugvallend op en_US anders. Er is geen Automatisch-optie – Facebook vereist een expliciete locale, dus de tool schrijft er altijd één.

Wat verandert en wat niet –

Ondersteunde weergavetalen

Facebook documenteert ongeveer honderd locales voor de SDK. De dropdown biedt de zestig meest gebruikte, met namen gelokaliseerd per Toollect-paginataal. De volledige gedocumenteerde set omvat –

af_ZA Afrikaans · ar_AR Arabisch · az_AZ Azerbeidzjaans · bg_BG Bulgaars · bn_IN Bengaals · bs_BA Bosnisch · ca_ES Catalaans · cs_CZ Tsjechisch · da_DK Deens · de_DE Duits · el_GR Grieks · en_GB Engels (UK) · en_US Engels (US) · es_ES Spaans (Spanje) · es_LA Spaans · et_EE Ests · eu_ES Baskisch · fa_IR Perzisch · fi_FI Fins · fr_FR Frans · gl_ES Galicisch · gu_IN Gujarati · he_IL Hebreeuws · hi_IN Hindi · hr_HR Kroatisch · hu_HU Hongaars · hy_AM Armeens · id_ID Indonesisch · is_IS IJslands · it_IT Italiaans · ja_JP Japans · jv_ID Javaans · ka_GE Georgisch · km_KH Khmer · kn_IN Kannada · ko_KR Koreaans · lo_LA Lao · lt_LT Litouws · lv_LV Lets · mk_MK Macedonisch · ml_IN Malayalam · mr_IN Marathi · ms_MY Maleis · my_MM Birmees · nb_NO Noors · ne_NP Nepalees · nl_NL Nederlands · pa_IN Punjabi · pl_PL Pools · pt_BR Portugees (Brazilië) · pt_PT Portugees (Portugal) · ro_RO Roemeens · ru_RU Russisch · si_LK Singalees · sk_SK Slowaaks · sl_SI Sloveens · sq_AL Albanees · sr_RS Servisch · su_ID Soendanees · sv_SE Zweeds · sw_KE Swahili · ta_IN Tamil · te_IN Telugu · th_TH Thai · tl_PH Filipijns · tr_TR Turks · uk_UA Oekraïens · ur_PK Urdu · vi_VN Vietnamees · zh_CN Chinees (vereenvoudigd) · zh_HK Chinees (Hongkong) · zh_TW Chinees (traditioneel)

Elke locale buiten deze dropdown is geldig in de loader-URL via hetzelfde patroon – https://connect.facebook.net/{locale}/sdk.js – maar de zestig hierboven dekken elke taal die Toollect zelf levert, dus de code plakken vraagt zelden om bewerking.

Gebruik

1. Plak een Facebook-URL in de invoer – elk geaccepteerd formaat uit de tabellen hierboven, inclusief m.facebook.com en fb.me-korte links die naar een pagina resolven. Schema en www. zijn optioneel.
2. Druk op Genereren of Enter. De code verschijnt in het outputvak en het voorbeeld opent automatisch en toont de echte SDK-render. De URL-balk stuurt ook het tabblad – een watch-link schakelt naar Video, een paginalink naar Page-plugin.
3. Kies het tabblad indien nodig – Post voor posts, foto's en groepsposts; Video voor video's en reels; Page-plugin voor pagina's. Wisselen regenereert met de optieset van dat tabblad, niet-passende tabs wissen verouderde output.
4. Stel de taal in – de standaard past al bij je sitetaal, maar je kunt elk van de zestig locales kiezen. De gegenereerde loader-URL en het voorbeeld schakelen meteen.
5. Pas de resterende opties aan – breedte, hoogte voor pagina, header- en covertoggles, lazy loading. Elke wijziging regenereert; codevak en voorbeeld lopen nooit uiteen.
6. Controleer de voorbeelddiagnose – als er geen kaart verschijnt zegt de waarschuwing boven de output of de SDK werd geblokkeerd, de content niet kan renderen of de URL naar een persoonlijke tijdlijn wijst in plaats van een pagina.
7. Kopieer de code en plak hem in je pagina waar de embed moet verschijnen. Als je site sdk.js al laadt, vink de loader-opname uit om duplicaten te vermijden.

Invoer die met geen enkel ondersteund formaat overeenkomt wist de output en verklaart zichzelf in het rode foutgebied – ofwel de ongeldige-linkmelding of de korte-linkmelding. Wissen reset invoer, code en voorbeeld in één stap.

Handleiding

Volg één echte link door alle drie tabbladen.

Stap 1 – Plak een postlink zoals de app hem deelt. Kopieer een post-URL met trackingparameters –

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

Druk op Genereren. De parser leest voorbij het m.-subdomein en de __tn__-tracking naar facebook, post pfbid0AbCdEfGhIjKlMnOpQrStUvWxYz1234567890, het tabblad blijft Post en de code toont data-width="500" met de en_US-loader omdat deze walkthrough op de Engelse site staat. Het voorbeeld opent en de kaart rendert op 500 pixels.

Stap 2 – Verander de taal. Zet de posttaal op Traditioneel Chinees zh_TW. De loader wordt https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v26.0 en het voorbeeld herlaadt de SDK – de tijdstempel bij de post schakelt naar zijn Chinese vorm terwijl de posttekst exact blijft zoals geschreven.

Stap 3 – Versmal. Typ 600 bij Breedte en verlaat het veld. De div krijgt data-width="600" en de kaart krimpt. Probeer 9999 te typen en te verlaten – het veld springt naar 750, het Post-maximum.

Stap 4 – Schakel naar Video. Vervang in de invoer de post-URL door een video –

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

Druk op Genereren. De tool schakelt naar Video, de code wordt <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729" data-width="500"> en de taal-dropdown toont dezelfde en_US-standaard. Vink Autoplay en Ondertiteling tonen aan – elk schrijft zijn data-* met de alleen-desktop-notitie behouden in het label.

Stap 5 – Page-plugin. Plak https://www.facebook.com/facebook en druk op Genereren. Het Page-plugin-tabblad opent met data-tabs="timeline" en de volledige chroomset. Vink Events en Messages aan – het attribuut wordt data-tabs="timeline,events,messages". Verander Breedte naar 500 en Hoogte naar 700 – beide attributen updaten. Het voorbeeld toont de tijdlijn, cover en facepile van de pagina exact zoals de code op je site.

Stap 6 – Kopieer en publiceer. Druk op Kopiëren en plak in een kale HTML-pagina die al sdk.js laadt – vink de loader voor het kopiëren uit. Open de pagina – de post, de video en de pagina renderen elk op de breedtes die je instelde, in de talen die je koos.

Voorbeeld & diagnose

Het voorbeeld draait Facebooks echte sdk.js tegen je exacte div uit buildSdkCode, dus het faalt exact waar je pagina zal falen. De host toont een spinner terwijl sdk.js downloadt en FB.XFBML.parse draait, daarna verschijnt een van vier uitkomsten –

Beide getimede waarschuwingen vuren pas na royale wachttijden – twintig seconden voor de SDK-download, vijftien extra voor de render – zodat trage verbindingen geen valse alarmen geven. Een insluitbare post rendert ruim binnen die vensters en een persoonlijke-profiel-Page-plugin toont de gele waarschuwing binnen ongeveer drie seconden nadat het iframe op nulformaat blijft.

Eén detail dat het weten waard is – de generator houdt loadedLocale bij. Taal wijzigen na een succesvolle render verwijdert de vorige sdk.js-scripttag, wist window.FB en laadt de nieuwe locale vers voordat opnieuw wordt geparst. Eerder gerenderde kaarten van de vorige locale worden uit de voorbeeldhost gewist voordat opnieuw wordt geparst, zodat het voorbeeld altijd overeenkomt met de loader-URL die je kopieert.

Tips

• Koppel hem aan de Facebook URL-parser. De parser analyseert en ruimt een link op – soort, gebruikersnaam, ID, verwijderde trackingkeys – terwijl deze generator de schone link omzet in code. Archiveer met de parser, publiceer met de generator.
• Eén loader, veel embeds. Pagina's met meerdere Facebook-embeds moeten sdk.js één keer laden – genereer de eerste embed met de loader aangevinkt, de rest uitgevinkt, of laad de SDK zelf in het sitetemplate en laat hem overal weg. De fb-root-div is ook maar één keer per pagina nodig.
• Ontwerp voor de kolom, stel daarna de breedte in. Facebook-kaarten kappen visueel rond de breedtes in de optietabel; het voorbeeld toont het echte resultaat op je containerformaat voordat je commit. Typ een exacte pixelwaarde – 567 is geldig – en de clamp corrigeert alleen als hij het gedocumenteerde bereik verlaat.
• Gebruik Videomodus voor clipgerichte posts. Een video via de Post-plugin ingesloten rendert als statische kaart – via fb-video rendert hij als speler met de autoplay- en ondertitelingsbediening die de plugin documenteert.
• Pin de taal expliciet. Het chroom laten meedrijven met de <html lang> van de hostpagina maakt de output afhankelijk van waar hij wordt geplakt. Elke expliciete keuze, en_US inbegrepen, schrijft de locale in de code en reproduceert dezelfde labels ongeacht de host.
• Lazy-load zware pagina's. Een artikel met drie Page-plugin-tijdlijnen profiteert direct van data-lazy – de SDK stelt parsen uit tot de embed bijna in beeld wordt gescrolld.
• Houd Page-plugin-tabs minimaal. Elke extra tab voegt hoogte en netwerkkosten toe – alleen timeline is de snelste initiële render; voeg events en messages alleen toe wanneer de pagina ze echt gebruikt.

Alternatieven

Hoe kun je Facebook-content anders op een pagina krijgen?

Facebooks eigen configurator is het dichtste alternatief en de bron van hetzelfde data-*-vocabulaire – maar hij scheidt Post, Video en Pagina over verschillende pagina's, biedt geen persoonlijk-vs-pagina-waarschuwing en produceert nooit een Post/Video/Pagina-unie met de volledige taallijst van de tool. De Graph API-route koopt totale controle voor de prijs van een app, een token en doorlopende review en laat het renderen toch bij jou. Diensten van derden schuiven eigen scripts ertussen. De generator bezet het praktische midden – officiële markup, volledige opties, onmiddellijke visuele bevestiging.

Versus officiële API's

Twee officiële oppervlakken raken Facebook-insluiten en de generator is direct gebouwd op het vriendelijkste, sleutelloze.

De generator roept geen Graph-eindpunt aan. Hij bouwt de Social Plugin-markup volgens regel, spiegelt wat de configurator zou uitsturen en leunt voor renderen op de eigen FB.XFBML.parse van de SDK. De Graph API is niet betrokken – postdata daar ophalen zou een token vereisen en het renderen toch bij jou laten, terwijl de SDK de officiële kaart al gratis rendert.

Generator vs. URL-parser

Toollect levert twee Facebook-tools die dezelfde links accepteren en de taakverdeling verdient één blik –

De parser is de analist; de generator is de bouwer. Een publicatieworkflow gebruikt beide legitiem op volgorde – analyseren om te identificeren en normaliseren waar een rommelige deellink naar wijst, dan genereren om hem op de pagina te zetten. Ze komen grammaticaal overeen door constructie, dus een link die de parser als insluitbare post of video accepteert is een link die deze generator insluit en een link die deze generator weigert wordt door de parser verklaard.

Wat het niet doet

De grenzen, benoemd zodat de tool nooit te veel wordt vertrouwd –

• Het sluit fb.watch-korte links niet direct in. Een korte link draagt geen bestemming tot Facebook doorverwijst. Plak in plaats daarvan de geëxpandeerde post- of video-URL.
• Het onderscheidt een pagina niet betrouwbaar van een persoonlijk profiel alleen op URL. Beide delen facebook.com/{username} en profile.php?id=.... Een statische allowlist zou echte pagina's blokkeren of persoonlijke profielen doorlaten – beide komen in het wild voor – dus de tool genereert de code voor elke paginavormige URL en toont een gele voorbeeldwaarschuwing alleen wanneer de SDK een nul- of piepklein iframe rendert of een renderfout meldt.
• Het omzeilt geen privacy of beperking. Privéposts, groepsposts die de kijker niet kan zien, leeftijds- of landbeperkte pagina's en auteurs die insluiten hebben uitgeschakeld produceren correcte code die niets of een beperkte view rendert waar zelfs Facebooks eigen configurator niets zou tonen.
• Het haalt of verifieert geen postcontent vóór het renderen. Validatie is grammaticaal – of de content bestaat en kan worden ingesloten beantwoordt pas de SDK bij het parsen van de div.
• Het stylet de kaart niet. Kleuren, lettertypen en chroom binnen de gerenderde plugin zijn van Facebook. Alleen aanwezigheid en formaat – tekst tonen, cover, facepile, lazy en de numerieke breedte/hoogte – zijn van jou.
• Het installeert de code niet. Wat je kopieert is wat je plakt; de tool kan niet in je CMS of page builder reiken.

Probleemoplossing

Privacy & gegevensverwerking

Deze tool is eerlijk over zijn verkeer.

• Genereren zelf is lokaal. URL parsen, naar een tabblad mappen en de fb-*-div assembleren gebeuren in je browser met JavaScript-stringoperaties. Geen Toollect-server ziet de link die je plakt.
• Het voorbeeld laadt Facebooks machinerie. De kaart renderen haalt sdk.js op vanaf connect.facebook.net in de locale die je koos, roept FB.init en FB.XFBML.parse aan en het gerenderde iframe komt van facebook.com en fbcdn.net – precies het verkeer dat de code die je kopieert in de browsers van je lezers zal produceren.
• Taalkeuze wordt in de code gebakken. ja_JP kiezen schrijft die locale in de loader-URL die je plakt; de browsers van je bezoekers halen die locale SDK op. Geen voorkeur wordt door Toollect opgeslagen.
• Geen account, geen opslag, geen analytics. De tool houdt geen status bij tussen bezoeken voorbij de in-memory voorbeeldhost; het sluiten van het tabblad beëindigt alles.
• De code publiceren betekent dat je bezoekers met Facebook praten. Dat is de aard van het insluiten van social content van derden – het waard om plain te zeggen. Als je een strikt offline Facebook-workflow nodig hebt verricht de Facebook URL-parser op deze site zijn hele taak met nul netwerkverzoeken.

Technische specificaties

Details –

• Output – SDK-div fb-post / fb-video / fb-page met gedocumenteerde data-*-attributen plus fb-root en sdk.js#xfbml=1&version=v26.0 vanaf https://connect.facebook.net/{locale}/sdk.js; Include the fb-root div and sdk.js loader laat het loaderblok weg wanneer uit
• Invoergrammatica – hosts facebook.com met elk subdomein, fb.watch, fb.me; gebruikersnaam 2–50 tekens [A-Za-z0-9.]; tabs [a-z][a-z0-9_]* met numerieke tweede segmenten geweigerd; ID's 5–20 cijfers of pfbid[1,200]; korte codes 5–40 alfanum; gereserveerde lijst 43 entries; profile.php?id= en /username beide routen naar pagina in afwachting van rendertijdsverificatie
• Canonieke output-URL's – https://www.facebook.com/{username} of profile.php?id= voor pagina's, .../posts/{id} / share/p/{id}/ / story.php?story_fbid=... voor posts, .../videos/{id} of watch/?v= voor video's, .../reels/{id} / reel/{id} voor reels, .../photo/?fbid= voor foto's, .../groups/{gid}/posts/{id} voor groepsposts
• Dimensies – Post 350–750 standaard 500, Video 220–1920 standaard 500, Pagina breedte 180–500 standaard 340 plus hoogte 70–2048 standaard 500; data-width/data-height direct geschreven, geen iframe-schaling
• Talen – elk van de 60 fbeLangCodes selecteerbaar; fbeLangDefault volgt de Toollect-paginataal – 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 geschreven naar loader-URL en gerespecteerd door voorbeeld-SDK-herladen via loadedLocale-tracking
• Voorbeeldlifecycle – renderPreview injecteert fb-root + fb-*-div, loadSdkJs(locale, cb) beheert gecachte sdk.js met localegevoelige herlaad (verwijdert oud script en window.FB bij wissel), FB.XFBML.parse aangeroepen op de host, startWatcher pollt het iframe elke 500 ms tot 30 pogingen (15 s) en tot 6 pogingen van persistent 0×0 (~3 s) vóór de persoonlijk-profielwaarschuwing, setPreviewLoading verenigd over vier exitpunten, fbe-fallback-link wijst naar lastCanonical bij elke diagnose
• Browserondersteuning – alle moderne browsers met clipboard-API en async/defer-scriptondersteuning; SDK-rendering vereist third-party scriptexecutie en bereikbaarheid van connect.facebook.net

Functies

• Genereer met één klik de officiële Facebook JavaScript SDK-insluitcode voor posts, video's en Page-plugins
• Live voorbeeld gerenderd door Facebooks eigen sdk.js voordat je kopieert – met diagnose bij SDK-fout en time-out
• Kies uit 60 weergavetalen – je keuze wordt ingebakken in de sdk.js-loader-URL voor je bezoekers
• Stel elke officiële pluginoptie nauwkeurig in – breedte, Page-tabs, cover, header, facepile en lazy loading
• Alleen SDK-output die op elke site werkt – optionele fb-root en loader naar wens inbegrepen of weggelaten
• Gratis en in de browser – geen API-sleutel, geen account, geen Toollect-serverproxy

Veelgestelde vragen