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

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


## Overview

Custom iFrame lets you embed Facebook post in Elementor by extracting the post's embed URL and pasting it into the widget. 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 Gutenberg WordPress instead? Follow the [Embed Facebook Post in Gutenberg WordPress](/gutenberg/social/embed-facebook) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A public Facebook post to embed

## Video Tutorial

<iframe
  src="https://www.youtube.com/embed/OqLikVS3xdQ"
  width="720"
  height="405"
  frameBorder="0"
  allowFullScreen
/>

## 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: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the Facebook post. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Embed Facebook Post in Elementor

<Steps>
  <Step title="Paste the Facebook embed URL" icon="clipboard" title-type="p">
    In the Content tab, paste the Facebook embed URL into the **Source URL** field. The post appears in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776953282/elementor/social/facebook/paste-facebook-post-url.webp"
      alt="Custom iFrame widget in Elementor editor showing Facebook post embed URL in Source URL field with live Facebook post preview"
      width="1024"
      height="469" priority={true} fetchPriority="high" />
  </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>

## Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the [Style Custom iFrame](/getting-started/styling) guide. Adjust dimensions, backgrounds, borders, and more.

## Step 5: Save and Publish

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

Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide for all widget options.

This guide showed you how to embed Facebook post in Elementor using the Custom iFrame plugin. From copying the embed code to extracting the URL and publishing, the whole setup runs through the Elementor 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 iFrame resize automatically.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

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

## Related Guides

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