{kun´ēzē}
1 1 1 1 1
18Aug2019

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

Information
134 hits Updated: 19 August 2019

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 Joomla professional and former member of the Kunena project for more than 8 years—a substantial contributor to the original Kunena documentation project with over twenty thousand messages posted at the Kunena forum. The opinions expressed in this article are entirely those of the author. View his profile here.


Add comment
By submitting this form you agree to the site policy. All guest comments are subject to approval before they will be published.


Trending now