(Reading time: 3 - 6 minutes)

Embedding a Facebook feed on a Joomla website (without extensions)

2132 hits Updated: 19 August 2019 Blog
You have already read 0%

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/.

publishFacebookThe 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:

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v4.0"></script><div class="fb-page" data-href="https://www.facebook.com/joomla/" data-tabs="timeline, events" data-width data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/joomla/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/joomla/">Joomla</a></blockquote></div> <div id="fb-root"></div>

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.

About the author:

is a website hobbyist specialising in Joomla, a former member of the Kunena project for more than 8 years, and an active contributor on The Joomla Forum™. The opinions expressed in this article are entirely those of the author. View his profile here.

No thoughts on “Embedding a Facebook feed on a Joomla website (without extensions)”

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
Trending now