How to Get Facebook Embed Code

Embedding a Facebook post directly onto your website is one of the best ways to bridge the gap between your social media presence and your primary online hub. This guide breaks down exactly how to get the Facebook embed code for any public post, video, or event, and highlights a few pro tips to make your content look great.

So, What Exactly Is a Facebook Embed Code?

Think of an embed code as a small window into Facebook that lives on your website. It's a snippet of HTML and JavaScript provided by Facebook that, when pasted into your site's backend, displays a fully interactive version of a specific Facebook post. This isn't just a screenshot, visitors can like, comment on, and share the post directly from your webpage, just as if they were on Facebook. Your original Facebook post gets more engagement, and your website content becomes instantly more dynamic and timely.

Using embed codes is a fantastic way to:

• Showcase Social Proof: Embed positive customer comments, reviews, or user-generated content to build trust with new visitors.
• Enhance Your Blog Posts: Add a relevant Facebook video, poll, or discussion to one of your articles to provide more context and value.
• Keep Your Content Fresh: Your website content automatically updates if you edit the original Facebook post, a simple way to keep information current.
• Promote Your Facebook Presence: Give website visitors an easy way to see what's happening on your Facebook page and encourage them to follow you.

How to Get the Embed Code for a Facebook Post (The Simple Way)

Facebook makes it incredibly easy to grab the code for any public post, whether it’s a photo, a video, a status update, or a link. The most important thing to remember is that the post must be public (shared with the little globe icon). If a post is private or shared only with friends, it cannot be embedded.

Follow these simple steps:

1. Find the Facebook Post You Want to Embed: Navigate to the post directly on Facebook. This can be a post on your own page, a brand's page, or even a public post from a personal profile.
2. Click the Three-Dot Menu: In the top-right corner of the post itself, you'll see a menu icon represented by three horizontal dots (...). Click on it.
3. Select "Embed": A dropdown menu will appear. Look for the "Embed" option and click it. For videos, this option might be inside another sub-menu under "More Options."
4. Customize and Copy the Code: A new window will pop up showing you a preview of the embedded post and the code snippet. You'll typically see a checkbox option labeled "Include full post." If you check this, the embed will include the entire caption text. If you uncheck it (especially for videos), it may only show the media itself. Once you're happy with the preview, click the "Copy Code" button.
5. Paste the Code Into Your Website: Now, go to the page or blog post on your website where you want the Facebook post to appear. Switch to your editor's HTML view, code view, or use a "Custom HTML" block (if you're using a block-based editor like WordPress's Gutenberg). Paste the code exactly where you want the post to show up. Save or publish your page, and you're done!

That's all it takes. When you view the live page, you should see the fully interactive Facebook post displayed seamlessly within your content.

Pro Tip: Remember that if the original post is deleted or its privacy settings are changed from public to private, your embedded post on your website will stop working and display an error message.

Displaying a Facebook Business Page on Your Site with the Page Plugin

What if you want to embed more than just a single post? Maybe you want to display your brand's entire Page feed, your upcoming events, or even allow visitors to message you directly from your website. For this, you’ll use Facebook's "Page Plugin." It's just as simple to set up, but it uses a dedicated configuration tool.

Using the Page Plugin Configurator

1. Go to the Page Plugin Developer Page: You can find this by searching for "Facebook Page Plugin" or by navigating directly to the tool at https://developers.facebook.com/docs/plugins/page-plugin/.
2. Enter Your Facebook Page URL: In the "Facebook Page URL" field, paste the full URL of the Facebook Page you want to display.
3. Customize Your Plugin: This is where the magic happens. You can adjust several settings and see a live preview update in real-time.
   • Tabs: By default, it shows your timeline. You can add tabs for `events` and `messages` by typing them into the field (separated by a comma). This adds clickable tabs to your embed, letting users toggle between your latest posts and upcoming events.
   • Width and Height: You can set specific dimensions for the embedded plugin to make sure it fits perfectly within your website's layout. It’s generally responsive, but manually setting the width can prevent layout issues.
   • Other Options: You can also choose to use a smaller header, hide the cover photo, or hide calls to action to customize the look and feel.
4. Click "Get Code": Once you’re satisfied with the preview, click the blue "Get Code" button. A popup with two different code snippets will appear.

Understanding and Placing the Page Plugin Code

The code the Page Plugin provides comes in two parts. This can look intimidating, but it's simpler than it seems.

Step 1: The JavaScript SDK

This is the first box of code. Facebook recommends placing this code snippet right after the opening <,body>, tag on your website. Many website themes or builders have a dedicated section in their settings to add "header" or "body" scripts. If you add it there once, you won't need to add it again for any other Facebook plugins you use on your site in the future.

<,!-- Load Facebook SDK for JavaScript -->,
<,div id="fb-root">,<,/div>,
<,script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&,version=v15.0" nonce="aBcDeFg">,<,/script>,

Step 2: Your Plugin Placement Code

This is the second box of code. This piece goes exactly where you want the Page Plugin to appear on your webpage. Just like with a standard post embed, paste this into the HTML viewer or a "Custom HTML" block on the specific page or post you're editing.

<,!-- Your embedded Page on your website -->,
<,div class="fb-page" data-href="https://www.facebook.com/your-page-url" data-tabs="timeline" ... >,<,/div>,

Once both pieces of code are in place, save and publish your page. Visitors will now see a dynamic embed of your Facebook Page, encouraging them to engage and follow.

Troubleshooting: Why Isn't My Embed Working?

Occasionally, things don't go as planned. If your embedded post isn't appearing, here are a few common issues to check:

• The Post Isn't Public: This is the number one reason embeds fail. Double-check that the post has a globe icon next to the timestamp, indicating it's visible to everyone. If it's not, you can't embed it.
• Your Editor Stripped the Code: Some visual website editors can interfere with <,script>, tags. When pasting the code, make sure you're in the "Text," "Code," or "HTML" view of your editor to ensure it's pasted as raw code, not as visible text.
• You Forgot the JavaScript SDK: The Page Plugin and other advanced embeds will not work without the SDK code snippet installed on your site (typically after the <,body>, tag).
• Ad Blockers are Interfering: Some aggressive ad blockers might mistakenly block Facebook's scripts. If you can't see the embed but others can, this is likely the cause. There isn’t much you can do about this on your end, but it's good to be aware of.

Final Thoughts

Grabbing embed code from Facebook is a simple copy-and-paste process that powerfully connects your social presence with your website. By displaying your best posts, videos, and even your entire Facebook Page, you create a more engaging, trustworthy, and dynamic experience for your site visitors, all while boosting visibility for your social channels.

Of course, creating content good enough to embed begins with a solid plan. Keeping track of what you're posting across multiple accounts can feel chaotic, which is why we built Postbase. To make a modern social strategy work, you need a visual calendar to see your entire publishing schedule at a glance, and a reliable scheduling tool to make sure your video content, Reels, and Stories go live when they're supposed to. We designed it to be the command center for your content, helping you stay organized so you can focus on creating posts worth sharing.

```