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 instead? Follow the Embed Facebook Post in Gutenberg guide.

Requirements

Custom iFrame plugin installed and active
Elementor installed
A public Facebook post to embed

Video Tutorial

Step 1: Get the Facebook Post Embed URL

Open the post on Facebook

Go to facebook.com and open the post you want to embed.

Click Embed from the post menu

Click the three-dot menu on the post. Click Embed. A popup appears with the embed code.

Extract the URL from the embed code

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.

Only public Facebook posts can be embedded. Posts with audience set to Friends or Only Me cannot be embedded.

Open your page in Elementor

Go to the page where you want the Facebook post. Click Edit with Elementor.

Drag the widget onto your page

Search for Custom iFrame in the Elementor widget panel. Drag the widget into your layout.

Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor

Step 3: Embed Facebook Post in Elementor

Paste the Facebook embed URL

In the Content tab, paste the Facebook embed URL into the Source URL field. The post appears in the editor.

Custom iFrame widget in Elementor editor showing Facebook post embed URL in Source URL field with live Facebook post preview

Set the height

Set Height to fit the post. Values between 300px and 600px work well for most Facebook posts.

Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the Style Custom iFrame guide. Adjust dimensions, backgrounds, borders, and more.

Step 5: Save and Publish

Click Update or Publish. Your Facebook post is now live on your WordPress site.

Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the Set Up Custom iFrame in Elementor 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

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.

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 for more help.

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.

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.

Also Available For

Embed Facebook Post in Gutenberg

Guide for the WordPress block editor.

Embed Instagram Post in Elementor

Embed Instagram posts in Elementor.

Was this page helpful?

Last updated today

Built with Documentation.AI