Adding a Facebook Feed to your Website

Here's a step by step workflow for adding Facebook Badges to your 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, I'll walk you through the process of 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.

Here on this page, you can pick the different types of information you want to display. You can use a profile picture, name, websites, status updates, and recent pictures. You can also change the different styles of layouts. Decide where your going to place it on your website so you know what type of layout to pick, for example, if you were going to use this in the left column of your website, choose vertical. When you are finished, click "Save."

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

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.

Access the backend of your Joomla site. Click user manager and click on your user name. When open, find editor and click no editor. Click save - this turns off the editor so Joomla! doesn't strip out the code you're about to paste into the module. Now go to extensions>module manager and click new. From the list choose custom HTML Module and give it a title like Facebook Feed. Choose what position you want the module to be in - like left and make sure it's enabled. In the custom output box, paste in your badge code! Click "Save" when finished.

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.