Social Media is all over the place at this point.  Individuals and businesses from all over the web are realizing the potential of social conversation.  When it comes to bringing your Joomla website to Life and sharing your content you should probably consider adding a Facebook stream to your page.  There are many plugins and modules out there that can help you add a Facebook stream to your Joomla website although following these simple steps will help you add your FB page stream with an easy and give you some control over it as well.

Add Facebook Stream to Your Joomla Website

As I mentioned above there are numerous components, plugins, or modules that you can tack onto your Joomla website although if you’re seeking complete control over customization you should probably use a short snippet script.  It will give you the option to customize the look and feel of your stream in the way that it appears on the front page of your website.

Need help adding a Facebook Stream to Your Joomla website?

1. Log in to your Joomla website backend area by visiting http://www.yourdomain.com/administrator
2. Create a new Module using the ‘Module Manager’ section.  Depending on your version of Joomla this will vary.  If you’re using Joomla 1.5.x or 1.6.x choose ‘HTML’ as the type of module that you’d like to create.  Make sure that your module remains ‘Unpublished’ until you have things in place.
3. Go into the ‘User Manager’ and select ‘No Editor’ for the user that you’re currently logged in with.  THIS IS IMPORTANT!  If you do not turn off the editor then you may experience some issues with the code snippet below and getting it to parse properly.
4. Grab the following code snippet and past it into the body area of your blank HTML module.  It does contain in part FBML shortcode so if you’re familiar with it this will look familiar to you.

<script type=”text/javascript” src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US”></script><script type=”text/javascript”>FB.init(“1690883eb733618b294e98cb1dfba95a”);</script><fb:fan profile_id=”88358919632″ stream=”0″ connections=”12″ logobar=”0″ width=”250″ height=”330″ css=”http://www.webpartnersworldwide.com/templates/ja_rasite/css/template.css?9″></fb:fan>

Customizing Your Facebook Stream Code

The FBML code above was taken from my company website at Web Partners Worldwide, LLC. and if you attempt to use it then it will pull the facebook fan page profile.  There are several parameters in this code that you can tweak to your liking in addition to using custom CSS.  Below are the individual parameters that are available for customization.

• profile_id – this is the profile id associated with your fan page or profile.  You can grab this number by visiting the url of your facebook profile or page.
• stream – your options here are “0” and “1”.  If you choose “0” then your stream activity from the particular profile will not be shown.  Choosing “1” will do the opposite.
• connections – specify the number of connections that you’d like to have shown from your profile on the front end of your Joomla website.  The translation here is the number of photos/contacts.
• logobar – include “0” or “1” in this area which outputs whether or not you’d like to display the Facebook top logo in addition to your profile/fan page name.  Choosing “0” will not display the logobar and including “1” will show your logo bar.
• width / height – these particular fields specify the width and height of your Facebook stream as it would appear on the front end of your website.  Think in terms of pixels here.
• css=”” – in this particular field you can include a link to a custom CSS file on your server which gives you the ability to customize the look and feel of your stream.  The question mark and number after the url identifies how many times you’ve changed the css stylesheet.  Example:  Each time you add customization in your css stylesheet ensure that you’ve changed the number after the “?” mark in the url field.

Styling Your CSS for Your Facebook Stream

Now that you’ve configured all your parameters you can jump into the styling.  You can check out some sample CSS styling by visiting the following url http://www.webpartnersworldwide.com/templates/ja_rasite/css/template.css Search for <!– START FACEBOK FANBOX –> to locate all of the classes and id’s.  If you’re more comfortable with copying the code and custom tailoring it to your needs be my guest.  Whatever you do though ensure that the styling has been copied into the css file that you’re using to style your fan box.

That’s pretty much it!  If you become extremely overwhelmed with the above you can contact me for further assistance.  I can also be reached at 314.537.7974 for further help at any time.