Adding a Facebook Feed to a Joomla Website

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.

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

click to enlarge

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

click to enlarge

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

click to enlarge

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.

click to enlarge

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.

click to enlarge

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.

click to enlarge

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.

click to enlarge

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