Facebook Embed Generator

Introduction

The Toollect Facebook Embed Generator turns any public Facebook post, video or Page URL into the official JavaScript SDK embed code Facebook documents – the fb-post / fb-video / fb-page div plus the sdk.js loader – in one click, with a live preview rendered by Facebook's own SDK before you copy.

The friction it removes is familiar to anyone who has pasted Facebook code by hand. Facebook's configurator hides the Page Plugin, spreads Post and Video options across separate pages, and swaps the iframe and SDK forms without explaining the trade-offs. Hand-writing the div fails silently when a data- attribute is misspelled and the post renders as a plain link. This tool presents Post, Video and Page Plugin side by side, exposes every documented plugin attribute, writes your Language choice directly into the loader URL, and shows the real render in the same browser that will serve your visitors.

Every code path is SDK-only by design. The SDK is the format Facebook maintains for all three plugin types, the only one that supports display languages, and the only one that can keep Page Plugin tabs and sizing consistent. The generator includes the fb-root and loader when you need them and omits them when your site already loads the SDK, keeps the preview honest about ad blockers and private content, and never sends your link through a Toollect server.

Use Cases

Embedding Facebook content shows up in more places than a blog post, and the three tabs split the work naturally.

Blogs and editorial content

A commentary post quoting a public post, a culture article reusing a viral video, a review embedding a brand's Page timeline as social proof – the classic cases. Post mode with the default 500-pixel width covers most columns; Video mode keeps the player first; Page Plugin shows a live timeline without screenshots.

Newsrooms and live coverage

Reporters pull official statements and eyewitness posts into rolling coverage. Speed matters, and so does verification – the generator normalizes mobile share links such as m.facebook.com and tracking-heavy URLs into one canonical reference, and the preview confirms the post still renders before the story ships.

Marketing sites and portfolios

Customer reviews as embedded Page timelines, launch videos as on-page players, announcement posts as cards. Language selection renders the surrounding chrome in the visitor's language, and omitting the SDK loader keeps pages that already load Facebook's SDK free of duplicate scripts.

Documentation and community sites

Release notes citing a launch post, docs referencing a Facebook group announcement, event pages showing a Page's Events tab. Show Text and Lazy loading controls let heavy pages stay quiet until scrolled near.

How It Works

The tool runs in five steps:

1. Parse and classify the URL – the input is matched against the Facebook link grammar: numeric IDs 5–20 digits or pfbid IDs, usernames 2–50 characters, tabs matching [a-z][a-z0-9_]*, and the three official hosts facebook.com with any subdomain, fb.watch and fb.me. Tracking query keys are read then ignored for routing – the rebuilt canonical URL never carries them. Routes lacking an ID such as facebook.com/watch without v or fb.watch without a short code are rejected.
2. Pick the plugin type – post / photo / group-post map to Post, video / reel to Video, page to Page Plugin. The tab bar follows the link – pasting a watch URL auto-switches to Video, pasting a Page URL to Page Plugin – and switching tabs manually clears stale output rather than bouncing back.
3. Collect your options – Language from the tab's dropdown, width and height from the number fields, Page checkboxes for tabs and chrome, video toggles for fullscreen, autoplay and captions. Every change clamps to the valid range, writes back into the field, and immediately regenerates.
4. Build the official markup – your options become data-* attributes on the fb-* div and, for Page Plugin, the loader URL carries your Language as https://connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0. No iframe URL is constructed – the SDK consumes the div attributes at parse time.
5. Render the preview – the generator injects the div plus an fb-root into the preview host, loads or reloads sdk.js for the chosen locale, calls FB.XFBML.parse, and watches for the resulting iframe. Three outcomes are reported honestly – success, an ad blocker, or a render that cannot complete.

Changing any option rebuilds the whole chain – new attributes, fresh code box, re-parsed preview – so the code you copy always matches what you are looking at.

Supported URL Formats

The generator accepts every URL shape that identifies a public post, video or Page on Facebook's three official hosts, and rejects everything else with a specific message. Scheme and www. are optional; mobile subdomains are normalized.

Accepted formats

The trailing slash, hash fragment and query string after the ID are tolerated and discarded; view suffixes such as a numeric tab segment after a username are treated as a Page tab view, not a separate resource.

Rejected formats

The fb.watch case deserves emphasis because the app share button still produces that shape. The generator refuses it deliberately with the dedicated short-link message and asks you to open the link and copy the full post or video URL instead. Pasting the expanded URL immediately succeeds.

Anatomy of the Embed Code

The output is the code Facebook documents, with your options applied. A Post embed at the defaults looks like this:

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

Walking through the parts:

• The plugin div class – fb-post, fb-video or fb-page tells the SDK which plugin to instantiate. One class per embed.
• data-href – the canonical URL from the previous section, ampersand-escaped. This is the only required attribute for all three plugins.
• data-width (Post and Video) – the desired width in pixels. Post accepts 350–750 defaulting to 500 in this tool, Video 220–1920 defaulting to 500. Facebook's SDK sizes the card to this width when possible.
• data-show-text – present when Show post text is ticked. Facebook documents it for posts and videos that contain a photo; without it the text may be hidden.
• data-lazy – present when Lazy-load is ticked. Defers rendering until the embed is scrolled near.
• data-allowfullscreen / data-autoplay / data-show-captions (Video only) – allowfullscreen enables the fullscreen button, autoplay starts muted playback when the page loads on desktop, show-captions shows captions by default when available on desktop. All three are absent when off.
• data-tabs / data-height / data-small-header / data-adapt-container-width / data-hide-cover / data-hide-cta / data-show-facepile (Page Plugin only) – tabs lists the visible tabs such as timeline,events,messages defaulting to timeline, height defaults to 500, the booleans map directly to the plugin's chrome toggles.
• The loader – fb-root plus sdk.js#xfbml=1&version=v26.0 from connect.facebook.net/{locale}/. en_US is an example – your Language choice writes the locale segment. The Include the fb-root div and sdk.js loader checkbox drops this entire block when your site already loads the SDK.

A Page Plugin at non-default settings shows the fuller attribute set:

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

Embed Options

Each control maps to one attribute. Defaults in parentheses.

Language (defaults to your Toollect site language – zh-hant becomes zh_TW, zh-hans zh_CN, en en_US and similarly for de, es, fr, it, ja, nl, pt, sv) – shows 60 locales from en_US to af_ZA with localized names per Toollect page language. Every explicit selection, English included, is written into the loader URL. The SDK localizes the surround of the embed – timestamps, Like button labels – never the post text itself.

Width (Post 500, Video 500, Page 340) – typed as an exact number, clamped to the valid range the moment you leave the field. Post 350–750, Video 220–1920, Page 180–500. Values outside the range snap to the nearest bound – 5000 on Video becomes 1920.

Height (Page 500) – Page Plugin only, 70–2048. Posts and videos carry no height attribute – the SDK sizes their cards from the width and the content.

Show post text with photos and videos (off) – writes data-show-text="true" for Post, and for Video appends (desktop only) in the label to match Facebook's note that the text toggle only affects desktop rendering.

Lazy-load until scrolled near (off, all tabs) – writes data-lazy="true".

Allow fullscreen playback (off, Video) – writes data-allowfullscreen="true".

Autoplay when page loads (muted, desktop only) (off, Video) – writes data-autoplay="true". Facebook documents this as muted autoplay on desktop only.

Show captions by default when available (desktop only) (off, Video) – writes data-show-captions="true", desktop only.

Tabs to show (Timeline, Page Plugin) – three checkboxes timeline / events / messages joined as data-tabs="timeline,events,messages". Unchecked tabs are simply absent from the list.

Use small header / Adapt to container width / Hide cover photo / Hide custom call-to-action / Show profile photos of friends (Page Plugin) – each writes its data-* boolean. Adapt is on by default; facepile is on by default.

Include the fb-root div and sdk.js loader (on) – controls whether the loader block is appended. Sites that already load sdk.js globally should uncheck it.

Language & Internationalisation

Facebook's embedded post FAQ and the JavaScript SDK internationalization guide both state the same rule – the display language of social plugins comes from the locale segment of the sdk.js URL. This tool makes that visible.

Your Language selection flows into two places:

• The generated code – https://connect.facebook.net/{locale}/sdk.js#xfbml=1&version=v26.0 with locale such as en_US, zh_TW, fr_FR or ja_JP.
• The live preview – changing the dropdown rebuilds the preview host, removes any previously loaded SDK script that carries a different locale, deletes window.FB, and loads the new locale fresh before calling FB.XFBML.parse.

The default follows your Toollect site language automatically – visiting toollect.com/zh-hant/tools/facebook-embed-generator/ preselects zh_TW, zh-hans preselects zh_CN, ja preselects ja_JP, and the European languages map to their territory form (de→de_DE, fr→fr_FR and so on), falling back to en_US otherwise. There is no Automatic option – Facebook requires an explicit locale, so the tool always writes one.

What changes and what does not:

Supported display languages

Facebook documents roughly one hundred locales for the SDK. The dropdown offers the sixty most used, with names localized per Toollect page language. The full documented set includes:

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)

Any locale beyond this dropdown is valid in the loader URL by the same pattern – https://connect.facebook.net/{locale}/sdk.js – but the sixty above cover every language Toollect itself ships, so pasting the code rarely needs editing.

Usage

1. Paste a Facebook URL into the input – any accepted format from the tables above, including m.facebook.com and fb.me short links that resolve to a Page. Scheme and www. are optional.
2. Press Generate or Enter. The code appears in the output box and the preview opens automatically, showing the real SDK render. The URL bar also drives the tab – a watch link switches to Video, a Page link to Page Plugin.
3. Pick the tab if needed – Post for posts, photos and group posts; Video for videos and reels; Page Plugin for Pages. Switching regenerates with that tab's option set, mismatched tabs clear stale output.
4. Set the Language – the default already matches your site language, but you can pick any of the sixty locales. The generated loader URL and the preview both switch immediately.
5. Adjust the remaining options – width, height for Page, header and cover toggles, lazy loading. Every change regenerates; the code box and preview never drift.
6. Check the preview diagnostics – if no card appears, the warning above the output says whether the SDK was blocked, the content cannot render, or the URL points to a personal timeline rather than a Page.
7. Copy the code and paste it into your page where the embed should appear. If your site already loads sdk.js, uncheck the loader inclusion to avoid a duplicate.

Input that matches no supported format clears the output and explains itself in the red error area – either the invalid-link message or the short-link message. Clear resets input, code and preview in one step.

Tutorial

Follow one real link through all three tabs.

Step 1 – Paste a post link as the app shares it. Copy a post URL with tracking parameters:

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

Press Generate. The parser reads past the m. subdomain and __tn__ tracking to facebook, post pfbid0AbCdEfGhIjKlMnOpQrStUvWxYz1234567890, the tab stays Post, and the code shows data-width="500" with the en_US loader because this walkthrough is on the English site. The preview opens and the card renders at 500 pixels.

Step 2 – Change the Language. Switch the Post Language to Chinese Traditional zh_TW. The loader becomes https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v26.0 and the preview reloads the SDK – the timestamp near the post switches to its Chinese form while the post text stays exactly as authored.

Step 3 – Narrow it. Type 600 into Width and leave the field. The div gains data-width="600" and the card shrinks. Try typing 9999 and leaving – the field snaps to 750, the Post maximum.

Step 4 – Switch to Video. In the input replace the post URL with a video:

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

Press Generate. The tool switches to Video, the code becomes <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729" data-width="500">, and the Language dropdown shows the same en_US default. Tick Autoplay and Show captions – each writes its data-* with the desktop-only note retained in the label.

Step 5 – Page Plugin. Paste https://www.facebook.com/facebook and Generate. The Page Plugin tab opens with data-tabs="timeline" and the full chrome set. Check Events and Messages – the attribute becomes data-tabs="timeline,events,messages". Change Width to 500 and Height to 700 – both attributes update. The preview shows the Page's timeline, cover and facepile exactly as the code will on your site.

Step 6 – Copy and ship. Hit Copy and paste into a plain HTML page that already loads sdk.js – uncheck the loader before copying. Open the page – the post, the video and the Page each render at the widths you set, in the languages you chose.

Preview & Diagnostics

The preview runs Facebook's genuine sdk.js against your exact div from buildSdkCode, so it fails exactly where your page will fail. The host shows a spinner while sdk.js downloads and FB.XFBML.parse runs, then one of four outcomes appears:

Both timed warnings fire only after generous waits – twenty seconds for the SDK download, fifteen more for the render – so slow connections do not trigger false alarms. An embeddable post renders well inside those windows, and a personal-profile Page Plugin shows the yellow warning within about three seconds after the iframe stays at zero size.

One detail worth knowing: the generator tracks loadedLocale. Changing Language after a successful render removes the previous sdk.js script tag, clears window.FB, and loads the new locale fresh before parsing. Previous locale's rendered cards are cleared from the preview host before the new parse, so the preview always matches the loader URL you will copy.

Pro Tips

• Pair it with the Facebook URL Parser. The parser analyzes and cleans a link – kind, username, ID, removed tracking keys – while this generator turns the clean link into code. Archive with the parser, publish with the generator.
• One loader, many embeds. Pages with several Facebook embeds should load sdk.js once – generate the first embed with the loader checked, the rest unchecked, or load the SDK yourself in the site template and omit it everywhere. The fb-root div is also needed only once per page.
• Design for the column, then set the width. Facebook cards visually cap around the widths in the option table; the preview shows the true result at your container size before you commit. Type an exact pixel value – 567 is valid – and the clamp will correct it only if it leaves the documented range.
• Use Video mode for clip-first posts. A video embedded via the Post plugin renders as a static card – via fb-video it renders as a player with the autoplay and caption controls the plugin documents.
• Pin the language explicitly. Leaving the chrome to float with the host page's <html lang> makes the output depend on where it is pasted. Every explicit selection, en_US included, writes the locale into the code and reproduces the same labels regardless of host.
• Lazy-load heavy pages. An article with three Page Plugin timelines benefits directly from data-lazy – the SDK defers parsing until the embed is scrolled near.
• Keep Page Plugin tabs minimal. Each extra tab adds height and network cost – timeline alone is the fastest initial render; add events and messages only when the page genuinely uses them.

Alternatives

How else can you get Facebook content onto a page?

Facebook's own configurator is the closest alternative and the source of the same data-* vocabulary – but it separates Post, Video and Page into different pages, offers no personal vs Page warning, and never produces a Post/Video/Page union with the full tool's Language list. The Graph API route buys total control at the price of an app, a token and ongoing review, and still leaves the rendering to you. Third-party services interpose their own scripts. The generator occupies the practical middle – official markup, full options, immediate visual confirmation.

Against the Official APIs

Two official surfaces touch Facebook embedding, and the generator is built directly on the friendlier, keyless one.

The generator calls no Graph endpoint. It builds the Social Plugin markup by rule, mirroring what the configurator would emit, and leans on the SDK's own FB.XFBML.parse for rendering. The Graph API is not involved – fetching post data through it would require a token and still leave the rendering to you, while the SDK already renders the official card for free.

Generator vs. URL Parser

Toollect ships two Facebook tools that accept the same links, and the division of labor is worth one glance:

The parser is the analyst; the generator is the builder. A publishing workflow legitimately uses both in order – parse to identify and normalize what a messy share link points at, then generate to put it on the page. They agree on grammar by construction, so a link the parser accepts as an embeddable post or video is a link this generator embeds, and a link this generator refuses is explained by the parser's kind and message.

What It Doesn't Do

The boundaries, named so the tool is never over-trusted:

• It does not embed fb.watch short links directly. A short link carries no destination until Facebook redirects it. Paste the expanded post or video URL instead.
• It does not reliably distinguish a Page from a personal profile by URL alone. Both share facebook.com/{username} and profile.php?id=.... A static allowlist would block real Pages or let personal profiles through – both happening in the wild – so the tool generates the code for any Page-shaped URL and surfaces a yellow preview warning only when the SDK renders a zero or tiny iframe or reports a render error.
• It does not override privacy or restriction. Private posts, group posts the viewer cannot see, age or country restricted Pages and authors who disabled embedding produce correct code that renders nothing or a limited view where even Facebook's own configurator would show nothing.
• It does not fetch or verify post content ahead of rendering. Validation is grammatical – whether the content exists and is embeddable is answered only when the SDK parses the div.
• It does not style the card. Colors, fonts and chrome inside the rendered plugin are Facebook's. Only presence and size – show text, cover, facepile, lazy and the numeric width/height – are yours.
• It does not install the code. What you copy is what you paste; the tool cannot reach into your CMS or page builder.

Troubleshooting

Privacy & Data Handling

This tool is honest about its traffic.

• Generation itself is local. Parsing the URL, mapping it to a tab, and assembling the fb-* div happen in your browser with JavaScript string operations. No Toollect server sees the link you paste.
• The preview loads Facebook's machinery. Rendering the card fetches sdk.js from connect.facebook.net in the locale you chose, calls FB.init and FB.XFBML.parse, and the rendered iframe comes from facebook.com and fbcdn.net – precisely the traffic the code you copy will produce on your readers' browsers.
• Language selection is baked into the code. Choosing ja_JP writes that locale into the loader URL you paste; your visitors' browsers will fetch that locale's SDK. No preference is stored by Toollect.
• No account, no storage, no analytics. The tool keeps no state between visits beyond the in-memory preview host; closing the tab ends everything.
• Publishing the code means your visitors talk to Facebook. That is the nature of embedding third-party social content – worth stating plainly. If you need a strictly offline Facebook workflow, the Facebook URL Parser on this site performs its entire job with zero network requests.

Technical Specs

Details:

• Output: SDK div fb-post / fb-video / fb-page with documented data-* attributes plus fb-root and sdk.js#xfbml=1&version=v26.0 from https://connect.facebook.net/{locale}/sdk.js; Include the fb-root div and sdk.js loader drops the loader block when off
• Input grammar: hosts facebook.com with any subdomain, fb.watch, fb.me; username 2–50 chars [A-Za-z0-9.]; tabs [a-z][a-z0-9_]* with numeric second segments rejected; IDs 5–20 digits or pfbid[1,200]; short codes 5–40 alphanum; reserved list 43 entries; profile.php?id= and /username both route to Page pending render-time verification
• Canonical output URLs: https://www.facebook.com/{username} or profile.php?id= for Pages, .../posts/{id} / share/p/{id}/ / story.php?story_fbid=... for posts, .../videos/{id} or watch/?v= for videos, .../reels/{id} / reel/{id} for reels, .../photo/?fbid= for photos, .../groups/{gid}/posts/{id} for group posts
• Dimensions: Post 350–750 default 500, Video 220–1920 default 500, Page width 180–500 default 340 plus height 70–2048 default 500; data-width/data-height written directly, no iframe sizing involved
• Languages: any of the 60 fbeLangCodes selectable; fbeLangDefault follows the Toollect page language – 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 written to loader URL and honored by preview SDK reload via loadedLocale tracking
• Preview lifecycle: renderPreview injects fb-root + fb-* div, loadSdkJs(locale, cb) manages cached sdk.js with locale-sensitive reload (removes old script and window.FB on switch), FB.XFBML.parse invoked on the host, startWatcher polls the iframe every 500 ms up to 30 tries (15 s) and up to 6 tries of persistent 0×0 (~3 s) before the personal-profile warning, setPreviewLoading unified across four exit points, fbe-fallback link points to lastCanonical on any diagnostic
• Browser support: all modern browsers with clipboard API and async/defer script support; SDK rendering requires third-party script execution and connect.facebook.net reachability

Features

• Generate official Facebook JavaScript SDK embed code for posts, videos and Page Plugins in one click
• Live preview rendered by Facebook's own sdk.js before you copy – with SDK failure and timeout diagnostics
• Choose from 60 display languages – your selection is baked into the sdk.js loader URL for your visitors
• Fine-tune every official plugin option – width, Page tabs, cover, header, facepile and lazy loading
• SDK-only output that works on any site – optional fb-root and loader included or omitted on demand
• Free and browser-based – no API key, no account, no Toollect server proxy

Frequently Asked Questions