How to embed a Facebook feed on a Joomla website
Following my earlier article—how to embed a Twitter timeline on a Joomla website—there’s a similar technique to add Facebook feeds to your websites. It’s true that many extensions exist to achieve the desired effect but, before you spend your time (and, in some cases, a lot of money), you may not need to use them at all. This article shows how to embed a Facebook feed on a Joomla website without using any additional software.
The process is as easy as 1-2-3: obtain the URL of the Facebook feed; copy the URL into the Facebook “page plugin” site; copy the generated code into your website It’s really that simple.
Generate the HTML: Use the Facebook “page plugin” site
For the purposes of this guide, we will use the Facebook feed for Joomla!: https://facebook.com/joomla/.
The Facebook “page plugin” (not to be confused with the Joomla term plugin) that you will need is located at https://developers.facebook.com/docs/plugins/page-plugin/ (see the image on the right; click to enlarge it). Using the image as a guide, type (or paste) the URL of the selected Facebook page into the Facebook Page URL textbox (indicated by ① in the image).
You may select other options if you wish but they're unnecessary. Below the preview of the feed, click the Get code button (indicated by ② in the image). Clicking this link will display a modal popup, revealing the required two boxes of HTML code, shown at ③. The next step is a bit clumsy but it’s not difficult.
Select and copy the contents of each of the two boxes that are labelled Step 1 and Step 2. and save them somewhere (say, in a text editor like Notepad). Do not worry about the “instructions” shown on the dialog; the first line of the HTML code in Step 1 is unnecessary, anyway.
The copied text is:
Using the HTML
The HTML that you have saved can be pasted anywhere you would like. Perhaps the simplest way to implement an embedded Facebook feed in a J! website is to create a module. Go to Extensions » Modules » New and then choose Custom. Paste the copied text as raw HTML in the editor, give the module a title, assign the module to a template position and menu items, publish the module and save it.
Another way of using the HTML is to create a <div> within a J! article (like I have done here so that you can see a working example of a live Facebook feed) and “float”For an in-depth discussion about about CSS floats, see https://internetingishard.com/html-and-css/floats/ the <div> to the left side of the screen.
