This configuration guide is for JFBConnect 3.0.  

• You may also be interested in the JFBConnect 2.x Configuration Guide.
• If upgrading from JFBConnect 2.x, please read our upgrade guide first.

This guide was updated for the 3.0.0 release.

Installation of JFBConnect is just like other Joomla components. Simply use the "Extensions->Install/Uninstall" menu item in the administration area. Use the "Upload Package File" section, select the zip file you downloaded, and click "Upload File & Install".

You should see an output window similar to the one below upon successful installation:

The installation process installs the component, 2 required plugins and the login module.  Later steps will explain configuring each of these extensions.

Before you can use JFBConnect, you must create an application within Facebook to allow your website to use the Facebook Connect Features. To do this, follow these steps:

1) Log into the Facebook Developer Center at: http://www.facebook.com/developers

2) Log into Facebook with the account that you want to 'own' your Facebook application

3) Click the "Set Up New Application" button as shown below:

4) On the "Create Application" screen (below), enter your application name. This is usually your site's name. Ensure that you agree to the terms of service and select "Save Changes".

5) The next window allows you to configure your application. We recommend when first starting that you fill out only the specified fields below. After successfully testing JFBConnect on your site, you can come back to customize your application further. This ensures that certain configuration options which conflict with JFBConnect are not set, and will aid in debugging your application later, if necessary.

The following fields must be filled out to create your application:

Basic Tab: Developer Contact Email, User Support Email

Canvas Tab: Canvas Callback URL - This should be your home page (http://www.yoursite.com/, http://yoursite.com, etc)

Connect Tab: Connect URL - This should be your home page as set above

Once these 3 tabs are configured as shown above, click the "Save Changes" button. You are then brought to an overview of your application settings. It should look similar to the picture below show. Take note of your API Key, Application Secret Key and Application ID, which are required for JFBConnect in the next steps.

After the Facebook application has been created, the next steps involve configuring JFBConnect itself.  To start, enable the JFBConnect related plugins.  To do this, access the administration area of your site and go to "Extensions->Plugin Manager".

• Enable the "Authentication - JFBConnect Facebook" plugin
• Enable the "User - JFBConnect Facebook" plugin
• Change the order of the User plugin to be after the "User - Joomla!" plugin.

Next, go to the JFBConnect Configuration area by going to "Components->JFBConnect".  Click on the "Configuration tab"; then click on the "Facebook API Configuration" tab.

• Add your App Id, API and secret keys in their respective input fields.
• You can also enable showing Facebook API errors on the front-end. Errors can occur for various reasons, including accessing 'private' user data, posting repeated messges to a user's wall, etc.  By displaying them on the front-end, you'll be better able to diagnose issues on your site.  The recommended setting for production sites is "No". API errors are always enabled for the admin area.

User Configuration Options:

JFBConnect can be used on a standard Joomla installation to allow for quick and painless registration, or in conjuction with the 3rd party community components JomSocial, Community Builder, and Kunena to automatically populate profile data.  The settings below relate to all configurations.

User Creation:

Full Joomla User- when new users register to your site, they will be presented with the 'Quick Registration' page which asks for their username, password, and email address. Once entered, they will have a fully-functional Joomla username that they can use to access the site OR they can return and log in by using the blue Facebook connect button.

This setting is enabled on our JFBConnect demo site, which you can test at:

http://facebook.sourcecoast.com

Facebook User Only- when new user's sign up on your site, a username will automatically be assigned to them and their email address will be imported from Facebook. On return visits, they will ONLY be able to login by using the Facebook connect button. All functionality within Joomla and 3rd party components will perform the same as normal (they will be treated as "Registered" users). This setting is a great way to let user's access your site with minimum hassle.

This setting is enabled on SourceCoast.com (this site).  To test out how it works, simply log in above.

In both cases, if you have JomSocial, Community Builder, or Kunena integration enabled, their profile will automatically be imported into their respective profile (as configured in later sections).

Automatically Link Facebook Users by Email:

Enabling this setting will automatically connect a new Facebook user to an existing user on your Joomla site if their email addresses match.  This is great for sites with lots of existing Joomla users to make adding Facebook Connect a smooth process.

Facebook Login Redirection Settings

New User Redirection:

Select the menu item that users logging in through Facebook Connect for the first time should be redirected too.  This is useful for sending them to a page with the JFBCInvite module to let them invite their friends!

Enable Returning User Redirection:

If disabled, when a user returns to your site and logs in through JFBConnect, they will remain on the same page.  When enabled, the menu item selected below will be used to redirect the user to on login.

Returning User Redirection:

When the setting above is enabled, this is the location the user will be redirected to on login.

Facebook Login Settings

Auto Login Facebook Users:

When enabled, if a user returns to your site who is currently logged into Facebook and has already connected that Facebook account to your Joomla site, they will be automatically logged in.

New User Redirection:

This is the page that new users should be sent to after the first time the register through JFBConnect. All subsequent log-ins redirections are set through the JFBCLogin module. This is useful for a "New User Welcome" page or to send the new users to the JFBCInvite module (if installed) to invite their friends.

Permissions Settings

Use the Permissions Settings tab to select which Facebook permissions are required, or optional, on login.

Permissions set as required will be prompted for the user when they first attempt to register for your site.  If declined, the user will be unable to register.  If granted, they will be able to register and will not have to grant those permissions in the future.

Permissions set as not required, will be requested as needed by JFBConnect in a separate permissions window.

Status/Wall Settings

Update Status Message:

Enabling this setting will attempt to post a message to the user's wall on initial registration or subsequent logins to your site.

The status messages will be sent to the user's wall when the specified actions occur.  If left blank, their wall will not be updated.

Misc Configuration

These options allow you to disable the "Powered By" link used in some areas of the component.  Leaving this enabled helps SourceCoast and you, by getting more visibility for our extensions, which helps fund more development.  Additionally, if you are a member of our free affiliate program, you can insert your affiliate ID to start earning 20% on any referrals you send to SourceCoast.com.

JFBConnect Admin Overview Page

Now return to the "Overview" tab of JFBConnect, you should see a page similar to below. In the top left section, you should see your Application Name, Connect URL, and application logo as set in the Facebook Developer area.  This information is pulled from Facebook and can only be configured there (not within JFBConnect).

In the top right section, you'll see some basic Facebook Insights (analytics) data about your application including how many are connected to your site, and how many are active on a daily, weekly, and monthly timeline.  For more detailed information, use the "Visit Facebook Insights" link.

In the middle section, you'll see information about the extensions related to JFBConnect.  All required extensions on the left should have a green checkmark next to them.  If not, please enable them in the Plugin or Module manager and/or fix any other errors that are specified. (Hover over the extension to see the error)

The Optional Extensions are just that - optional modules which you may wish to use on your site.  These extensions can be downloaded from SourceCoast.

JomSocial Integration

If you have JomSocial installed, and want to automatically import profile information from Facebook into your new users' accounts, read on. If not, proceed to the next step.

To setup JomSocial Integration, click on the "JomSocial Integration" tab within the JFBConnect administration area. You will see a page similar to that below, though your fields in the lower section will likely be different.

The top options are pretty self-explanatory, but a brief description is provided below:

• Enable JomSocial Integration: Set to "Yes" to enable JomSocial Integration. If set to "No", the remainder of the settings in this area will be ignored.
• Always Import Profile Data:Set to "Yes" to import users' avatars/field data each time they log in. If set to "No" the import will only occur on registration.
• Import Avatar Upon Registration: Set to "Yes" automatically import the user's Facebook avatar into the user's JomSocial profile.

JomSocial Field Mapping

JFBConnect allows you to map Facebook profile fields into any text field or text area that you've created within JomSocial. The left-hand column shows all available JomSocial fields to which you can automatically import Facebook profile data into. On the right, use the drop-down to select the Facebook profile data field that you want fetched into the JomSocial field.

When done, click "Apply Changes" and proceed to the next step.

Community Builder Integration

If you have Community Builder installed, and want to automatically import profile information from Facebook into your new users' accounts, read on. If not, proceed onto the next step.

To setup Community Builder Integration, click on the "Community Builder Integration" tab within the JFBConnect administration area. You will see a page similar to that below, though your fields in the lower section will likely be different.

The top options are pretty self-explanatory, but a brief description is provided below:

• Enable Community Builder Integration: Set to "Yes" to enable Community Builder Integration. If set to "No", the remainder of the settings in this area will be ignored.
• Always Import Profile Data:Set to "Yes" to import users' avatars/field data each time they log in. If set to "No" the import will only occur on registration.
• Import Avatar Upon Registration: Set to "Yes" automatically import the user's Facebook avatar into the user's Community Builder profile.

Community Builder Field Mapping

JFBConnect allows you to map Facebook profile fields into any text field or text area that you've created within Community Builder. The left-hand column shows all available Community Builder fields to which you can automatically import Facebook profile data into. On the right, use the drop-down to select the Facebook profile data field that you want fetched into the Community Builder field.

When done, click "Apply Changes" and proceed to the next step.

Kunena Integration

If you have Kunena installed, and want to automatically import profile information from Facebook into your new users' accounts, read on. If not, proceed onto the next step.

To setup Kunena Integration, click on the "Kunena Integration" tab within the JFBConnect administration area.  You will see a page similar to that below, though your fields in the lower section will likely be different.

The top options are pretty self-explanatory, but a brief description is provided below:

• Enable Kunena Integration: Set to "Yes" to enable Kunena Integration. If set to "No", the remainder of the settings in this area will be ignored.
• Always Import Profile Data:Set to "Yes" to import users' avatars/field data each time they log in. If set to "No" the import will only occur on registration.
• Import Avatar Upon Registration: Set to "Yes" automatically import the user's Facebook avatar into the user's Kunena profile.

Kunena Field Mapping

JFBConnect allows you to map Facebook profile fields into any text field or text area that you've created within Kunena. The left-hand column shows all available Kunena fields to which you can automatically import Facebook profile data into. On the right, use the drop-down to select the Facebook profile data field that you want fetched into the Kunena field.

When done, click "Apply Changes" and proceed to the next step.

Once all steps before this are complete, you should configure and publish the JFBCLogin module that was installed with the component.  After this, users can easily log into your site using their Facebook credentials!

The JFBConnect Social bundle comes with the following plugins and modules, which all require that the JFBConnect component, authentication plugin and user plugin be installed and configured correctly:

• JFBCLike module
• JFBCFan module
• JFBCShare module
• JFBCFeed module
• JFBCLiveStream module
• JFBCComments module
• JFBCFriends module
• JFBCInvite module
• JFBCSocial plugin

JFBCSocial plugin

Currently, the JFBCSocial plugin allows you to embed the JFBCLike, JFBCShare and JFBCComments functionality in your page content. To enable the plugin, access the administration area of your site and go to "Extensions->Plugin Manager". Then enable the "System - JFBCSocial" plugin.

To add the functionality with default styling, add the following tags into your content (e.g. an article):
 

To add the functionality with configurable styling, add the following tags:

• url - The URL to like. If this value is left blank, the current page URL will be used
• buttonStyle - Determines the size and amount of social context next to the button. The options are: standard, button_count
• showFaces - Show the profile pictures under the Like button. The options are: true, false
• width - width of the iframe, in pixels
• verbToDisplay - the verb to display in the button. The options are: like, recommend
• font - Supported font options are: arial, lucinda grande, segoe ui, tahoma, trebuchet ms, verdana
• colorScheme - The color scheme of the button and text. The options are: light, dark

• xid - A unique ID associated with the comments object. When someone posts a comment, the comment boxes with this ID on any page will show the same comments.
• numposts - The maximum number of comments to display in the comment box. Use 0 to hide all comments.
• width - width of the iframe, in pixels

• type - Style of the Facebook Share button. Options are: button, button_count, box_count, icon_link
• linkToShare - If icon_link is used for the type, then this link will be shared. If this option is blank, then the current page will be used.

Social Modules