Adding a Facebook Feed to a Joomla Website

Written by:  • Edited by: Michele McDonough
Updated Mar 13, 2011
• Related Guides: Wysiwyg Editor | Facebook

So you run Joomla as your CMS, and you'd like to show some of your Facebook feeds directly on your website? No problem! This quick tutorial will show you exactly how you can easily add a Facebook feed on a Joomla website.

Integrating Facebook Feeds with Joomla

This is a Joomla! Tutorial
click to enlarge
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
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."

Selecting what information you would like to display on your Facebook Badge
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:

Identifying the HTML code for Facebook Badges
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.

Pasting the code in notepad to keep track of it
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.

Fixing a Joomla! bug that formats HTML code
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.

Pasting the code into Joomla's module feature.
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.

Functional Facebook badge on Facebook
click to enlarge

Image Credits

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


Comments

Showing all 4 comments
 
Narayani Laredo Jan 28, 2012 12:14 AM
RE: Adding a Facebook Feed to a Joomla Website
thank you, this was what i was looking for
Nicholas Alfonso Nov 4, 2010 7:45 PM
Good explaination darling
good tutorial.
well done!
rosemary fugeman Sep 29, 2010 12:12 PM
help!!!
I temporarily disabled the tinymce editor in global configurations to add the facebook button and now I can't get it back. ive gone into global configs since, and turned it back on but I cant get it back. When i go into an article, only the html code shows. Any suggestions?
Aditi K Aug 19, 2010 2:09 AM
A little more needed
I need to display the replies i get on a Facebook 'Event' on my Joomla site. Can you please tell if its possible? and how?
 
blog comments powered by Disqus
Email to a friend