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 guide.
Requirements
- Custom iFrame plugin installed and active
- WordPress with the Gutenberg block editor
- A public Facebook post to embed
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.
Step 2: Install the Plugin and Add the Block
Install and activate the plugin
Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.
Open your page in the block editor
Go to the page or post where you want the Facebook embed. Click Edit to open the Gutenberg block editor.
Add the Custom iFrame block
Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.
Step 3: Embed Facebook Post in Gutenberg
Paste the Facebook embed URL
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.
Set the height
Set Height to fit the post. Values between 300px and 600px work well for most Facebook posts.
Click Update or Publish. Your Facebook post is now live on your WordPress site.
For all block settings, see the Set Up Custom iFrame in Gutenberg 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
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 block resize automatically.
Also Available For
Embed Facebook Post in Elementor
Guide for the Elementor widget.
Embed Instagram Post in Gutenberg
Embed Instagram posts in Gutenberg.
Related Guides
Last updated today
Built with Documentation.AI