Module Settings Overview

Sub-module functionality customizations

For now, we will skip the first three fields - Redirect URI, Facebook App ID and Facebook App Secret and will get to them later when we discuss the API acquiring.

Since visitors of your store making use of the Login with Facebook button for the first time do not go through the common registration process, the module lets you decide what additional information you want to obtain about them and which customer group you want them to be assigned to once they log in. These adjustments can be made by means of the next three fields.

settings1

Use OpenCart's Customer Group Settings: If you would like to use OpenCart's default settings concerning Customer Group assignment of new users, you should check the box in this field. Otherwise, leave it unchecked and read about the next two fields.

Assign to Customer Group: This field is a drop-down menu with all your store's customer groups listed as options. Select the customer group you want first-time users of the button to be assigned to.

New User Required Details: This is an option with multiple checkboxes about additional information you would like your customers to provide when they log in for the first time. Check the ones you want them to be questioned about.

NoteWith the introduction of OpenCart 2, the opportunity to create custom fields has been added. As of FacebookLogin 2.3.4 they are still not available to choose but we at iSenseLabs are working on implementing this as soon as possible.

Sub-module styling options

The styling options range from Button Preview to Button Name and Custom CSS - for users with some knowledge in the sphere of web design.

settings2

The Button Preview field is for you to be able to keep track of what the other options are changing in the button's looks. Initially, it will contain plain blue hyperlink-like Login with Facebook text.

The Button Design field is a drop-down menu with 4 options. Initially set to No Design, it allows you to select among three famous Facebook login button designs. Browse through them and choose the one that will suit your theme the best.

The Wrap Button into Widget field is again a drop-down menu one. It can be set to either Yes or No. The changes it makes in the design are easy to observe in the Button Preview field.

Setting the latter field to Yes results in the appearance of another one - the Wrapper Title. It lets you set a title for the widget the button is to be wrapped into.

The Button Name is a text field that allows you to label your Facebook login button. By default, it is set to Login with Facebook. Change the text and watch as the button in Button Preview changes.

The last field that may affect the styling of your login button is Custom CSS.

Note 1To make use of this option, you should have at least some CSS knowledge. Otherwise, leave it as it is.

Note 2The styles applied in this field cannot be observed in the Button Preview field. They will become visible only on the front end and after saving the module's options.

If you would like to style your Facebook login button completely by yourself with CSS, you should set the Button Design to No Design. Otherwise, you risk your Custom CSS being overridden by the pre-made designs. Alternatively, you may get familiar with the pre-made designs' CSS code and add some of your own by means of this field.

Assignment to Layouts

Assigning modules to layouts is a typical operation for most of the modules in OpenCart. It lets you decide which pages you want to make each module visible on. For login modules, the layouts are usually Checkout and Account, so we will use Account for the example.

From your admin panel, go to Design > Layouts. Locate the Account one. It is usually on top of the list. Click the blue Edit button as shown:

settings3

On a fresh OpenCart installation, the page you will be redirected to will look like this:

settings4

Click on the button in the rectangle to add a new slot for a module. In the newly appeared row in the table, choose your sub-module from the drop-down in the first table column. It should be initialized as FacebookLogin > [Sub-module name], where [Sub-module name] is the name of the sub-module you created in Chapter 3.

The middle column (Position) is to pick a position for your button in the layout. It can be either Content Top, Content Bottom, Column Left or Column Right. We will use Column Left for the example.

The third and last column is for Sort Order, which is meant to order the modules assigned to the given position. We will go with 0 for the example.

After the adjustments your table row should look something like this:

settings5

Click 'Save' in the top right corner you can go to the front-end of the account layout and see your button there.

Linking the button to Facebook

Alright, your button is already visible on the front-end. However, you may have noticed that nothing happens upon clicking it. This is because it is in no way linked to Facebook yet and you cannot verify anyone's Facebook username and password.

You may remember the first three fields in the module's settings that we left out two chapters earlier. Well, now is the time to explain what they are and why you need them.

The Facebook App ID and Facebook App Secret fields are two unique keys you need to get from Facebook in order for them to be aware of your application and to support it in terms of verifying log in attempts. As for the Redirect URI - you may think of it as your module's identification key for Facebook.

So, without further ado, let us get to obtaining these and making your module fully functional.

First off, you will need a Facebook account. If you do not have one, go to www.facebook.com, sign up and log in to your account.

Next, you need to go to the developers' part of Facebook. You can find it at https://developers.facebook.com.

fbdev

In the top right corner you should see a drop-down with your Facebook profile picture next to it.

Hover on it and click on 'Add a New App'.

new-app-id

Since we're adding a Facebook Login button, click the Get Started button next to it.

get-started

You'll be presented with a list of platform options where you should choose Web.

platform

Next, you will have to configure the details of your website.

Enter your store URL and click Save.

Now, you should see a screen that looks something like this:

site-url

Follow the instructions for setting up the button.

When you are done, head to the Settings tab in the PRODUCTS field.

oauth-settings

Paste the OAuth redirect URI from your FacebookLogin module settings in the OpenCart admin panel.

NotePlease remember to paste the correct URL (make a clear difference between http and https) so you do not encounter errors.

You need to make your FacebookLogin button public. To do that, go to the App Review field in the Dashboard and make the app public.

public

Next, from the Dashboard menu on the left, click on Settings. Initially, the Basic tab will be opened:

app-id

Paste the App ID and App Secret in the respective fields in the module settings in your OpenCart admin.

Type in your domain in App Domains and e-mail in Contact Email. Your site URL should appear in the Website field at the bottom.

Next, scroll all the way down and click on Save Changes.

Now, go back to the Basics tab in Facebook. Copy the App ID from its field and paste it in your module's settings Facebook App ID field.

Then, go back to Facebook and click Show for the App Secret. You may be required to re-type your password as a security measure. Once you do this, the App Secret will become visible. Copy it and paste it in your module's settings Facebook App Secret field.

redirect-uri-app

Click Save in the top right corner.

Congratulations! Now your module is fully functional. Test it by trying to log in from the frontend!