How to Embed Facebook Posts in Joomla Articles

How to Embed Facebook Posts in Joomla

Joomla does not natively support embedding Facebook posts in articles. If you’ve attempted it before, you may have noticed Joomla either removes the embed code or fails to display the post.

The good news? There’s a simple workaround! Follow these steps to successfully embed a Facebook post in your Joomla article.


Step #1: Install the Sourcerer Plugin

  • Go to this page and download the Sourcerer plugin from Regular Labs. This plugin allows you to insert custom code into Joomla articles.
  • Install the plugin on your Joomla site and ensure it is enabled.

Step #2: Copy the Facebook Embed Code

  • Click on the required Facebook post timestamp:

timestamp of a Facebook post

  • The post will open in a mini-window. In the top-right corner, click the three-dot icon:

the icon with three dots

  • In the popup menu, click Embed:

the embed menu item

  • Your post mini-window will change to the "Embed Post" screen. Click the Advanced settings link:

the advanced setting link

  • This redirects you to the Embedded Posts area on developers.facebook.com. Click the Get Code blue button:

the get code button

  • You will see a new window with the JavaScript SDK tab open. The Step 2 and Step 3 boxes contain two snippets of the post embed code you will use in a minute:

06 the JavaScript SDK tab with the embed code


Step #3: Insert the Embed Code into Joomla

  • Open your Joomla admin dashboard and navigate to the article where you want to embed the post. Click CMS Content > Code:

the CMS content and code buttons

  • A mini-window titled "Code" will open, displaying an Insert button and a Code box:

the code mini window

  • Go back to developers.facebook.com and copy the two JavaScript SDK code snippets from the Step 2 and Step 3 boxes:

the embed code to copy

  • Paste both code snippets into the Code box inside your Joomla article. Your Code box should now look like this:

the Facebook post embed code in the code box of a Joomla article

  • Look for data-width="500" in your embed code and erase 500, replacing it with data-width="". This change allows the embedded Facebook post to scale properly, ensuring it looks great on both desktop and mobile screens:

the data width rule without the width value

  • Click the green Insert button. The code will now appear inside your Joomla article as you can see it in the next image:

012 the embed code in a Joomla article

  • Click Save or Save & Close.
  • Visit the article's front page to preview the embedded post in a desktop browser:

a Facebook post embedded in a Joomla article front end

  • Finally, test the article on your mobile phone to confirm it displays correctly:

Facebook post embedded in Joomla article viewed on mobile phone


🎉 That’s it! You’ve successfully embedded a Facebook post into your Joomla article.


What's Next?

Save $1,000's when you sign up for Joomlashack's Everything Club.

You will get your hands on our extensive range of over 20 extensions, plus legendary support!

Click here to join the Everything Club