> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed Facebook Post in Gutenberg

Step-by-step guide to embed Facebook post in Gutenberg using the Custom iFrame WordPress plugin. No API key needed. No coding required.


## Overview

Custom iFrame lets you embed Facebook post in Gutenberg by extracting the post's embed URL and pasting it into the block. Display announcements, updates, and social content from Facebook directly on your WordPress page.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Elementor instead? Follow the [Embed Facebook Post in Elementor](/elementor/social/embed-facebook) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A public Facebook post to embed

## Step 1: Get the Facebook Post Embed URL

<Steps>
  <Step title="Open the post on Facebook" icon="facebook" title-type="p">
    Go to [facebook.com](https://facebook.com) and open the post you want to embed.
  </Step>
  <Step title="Click Embed from the post menu" icon="code" title-type="p">
    Click the **three-dot menu** on the post. Click **Embed**. A popup appears with the embed code.
  </Step>
  <Step title="Extract the URL from the embed code" icon="clipboard" title-type="p">
    Click **Copy Code** in the popup. Paste the code into a text editor. Copy only the URL from inside the `src="..."` attribute of the `<iframe>` tag.
  </Step>
</Steps>

<Callout kind="alert">
  Only public Facebook posts can be embedded. Posts with audience set to Friends or Only Me cannot be embedded.
</Callout>

## Step 2: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the Facebook embed. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 3: Embed Facebook Post in Gutenberg

<Steps>
  <Step title="Paste the Facebook embed URL" icon="clipboard" title-type="p">
    Select the Custom iFrame block. In the right panel, paste the Facebook embed URL into the **Source URL** field. The post appears inside the block in the editor.
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to fit the post. Values between 300px and 600px work well for most Facebook posts.
  </Step>
</Steps>

<Callout kind="success">
  Click **Update** or **Publish**. Your Facebook post is now live on your WordPress site.
</Callout>

For all block settings, see the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) guide.

This guide showed you how to embed Facebook post in Gutenberg using the Custom iFrame plugin. From copying the embed code to extracting the URL and publishing, the whole setup runs through the block editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="Why do I need to extract the src URL instead of using the post link?" default-open="false">
    Facebook's standard post URL (e.g. `facebook.com/post/123`) does not load inside an iFrame. The embed src URL (from **Embed** in the post menu) is the correct format for iFrame embedding.
  </Expandable>
  <Expandable title="My Facebook post shows blank. What should I check?" default-open="false">
    Confirm the post is set to **Public** on Facebook. Also confirm you pasted the `src` URL from the embed code, not the regular post URL. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="Can I embed a Facebook video or reel instead of a post?" default-open="false">
    Yes. The same process works for Facebook videos. Open the video, click the three-dot menu, click **Embed**, and copy the `src` URL from the embed code.
  </Expandable>
  <Expandable title="What height should I set for a Facebook post?" default-open="false">
    Set height to 300px to 600px for a standard text or image post. Videos may need more height. Enable Auto Height to let the block resize automatically.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Facebook Post in Elementor" href="/elementor/social/embed-facebook" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Instagram Post in Gutenberg" href="/gutenberg/social/embed-instagram" icon="instagram" horizontal={false}>
    Embed Instagram posts in Gutenberg.
  </Card>
</Columns>

## Related Guides

- [Embed Social Media in Gutenberg WordPress - Overview](/gutenberg/embed-social-media)
- [Embed X Post in Gutenberg](/gutenberg/social/embed-twitter-x)
- [Embed Instagram Post in Gutenberg](/gutenberg/social/embed-instagram)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)