Joomla Tutorial: Add a Facebook Feed on Joomla Website

Joomla Tutorial: Add a Facebook Feed on Joomla Website
Page content

Integrating Facebook Feeds with Joomla

Whether you’re a blogger, a business, or just someone with a website to show off, you might want to add your Facebook feed to your site. This is a great way to let people know at a glance what you’re doing without making them sign into - or sign up for - Facebook. There are ways to do this in a standard HTML website, but what if you use a CMS like Joomla? Sometimes it doesn’t work so simple! This quick tutorial will walk you through the process of putting a Facebook feed on a Joomla website.

Using Badges

Facebook gives you the ability to create your own badges directly on their website using badges. Badges can display any number of Facebook related features, such as your Likes, your Activity Feed, your Friendpile, and even things like comment boards. While these lack in visual customization, they are incredibly easy to insert into any website and are very reliable. You do, however, need to know a handy trick to make this foolproof. In this example, we’ll show you how to insert a profile badge into your Joomla Website.

Steps of the Process

Go to the Facebook Badge website. When there, select the type of badge you would like. If you are looking to display contact information and status updates, you will select the “Profile Badge.” Alternatively there are also photos, likes, and pages badges as well. I’m going to select the Profile Badge. (Click any image for a larger view.)

The different badges available for use on Facebook

Here on this page, you can pick the different types of information you want to display. I’m using my profile picture, name, websites, status updates, and recent pictures. You can also change the different styles of layouts. Since I’m going to use this in the left column of my website, I’ll just leave it at vertical. When you are finished, click “Save.”

Selecting what information you would like to display on your Facebook Badge

In the next screen, select “Other.” This will bring up a small box that contains an HTML code that looks like this:

Identifying the HTML code for Facebook Badges

Open Notepad or any other basic text editor (nothing that will add in additional formatting, so avoid Microsoft Word!) and paste in your code. This will just make sure you don’t lose it in browser windows.

Pasting the code in notepad to keep track of it

Access the backend of your Joomla site. Now, occasionally when you paste code into modules in Joomla, you’ll find that they don’t work the way that they should. This is due to an error with the Joomla WYSIWYG editor formatting your code incorrectly, even if you select the included HTML editor. The workaround is to temporarily disable the WYSIWYG editor so you can paste it in to a module with no restrictions. To do this, simply go into your global configuration and where it says “Default WYSIWYG editor” select “Editor - No Editor.” Save your settings for now.

Fixing a Joomla! bug that formats HTML code

Create a “Custom HTML” module in the position you would like. Here, I’m using the left column. In the custom output box, paste in your badge code! Click “Save” when finished.

Pasting the code into Joomla’s module feature.

And you’re finished! Preview your site to see your new badge. Don’t forget to change your WYSIWYG editor back to your preferred editor before publishing new content.

Functional Facebook badge on Facebook

Image Credits

All screenshots in this article were taken by the author and are intended for educational purposes only.