facebooklogin product documentation - isenselabsfacebooklogin documentation ! ! 2" ! table of...

Product Documentation

February, 2016

FacebookLogin

FacebookLogin in OpenCart, created by iSenseLabs

© 2016, iSenseLabs isenselabs.com

FacebookLogin Documentation

2 http://isenselabs.com

http://isenselabs.com/users/support

Table of Contents Table of Contents ...................................................................................................................... 2

Chapter 1: Introduction ............................................................................................................. 3

How to use this document .................................................................................................... 3

Chapter 2: Installation instructions and Licensing .................................................................... 4

Chapter 3: FacebookLogin sub-‐modules ................................................................................... 5

Creating your first sub-‐module ............................................................................................. 5

Sub-‐module functionality customizations ............................................................................. 6

Sub-‐module styling options ................................................................................................... 8

Chapter 4: Assignment to layouts ............................................................................................. 9

Chapter 5: Linking the button to Facebook ............................................................................. 12

Chapter 6: Uninstalling FacebookLogin ................................................................................... 17

Uninstalling FacebookLogin ................................................................................................. 17

Chapter 7: Getting support ..................................................................................................... 18




Chapter 1: Introduction Welcome and thank you for your purchase of FacebookLogin by iSenseLabs. This document will teach you all you need to know about the FacebookLogin extension.

How to use this document The information you need is divided into chapters. In some sections you will notice the following types of paragraphs which give you extra information:

We highly encourage all users to read and understand this documentation. If you have any questions, the iSenseLabs support team is here to help. Feel free to contact us in our support system: http://isenselabs.com/users/support




Chapter 2: Installation instructions and Licensing These installation instructions assume that you have either a fresh or a customized installation of whichever version of OpenCart 2.

1) Unzip the downloaded ZIP file into a new folder. 2) Login to your OpenCart admin panel and go to Extensions > Extension Installer. Upload the file facebooklogin.ocmod.zip, which is in the folder you created in Step 1.

3) Go to Extensions > Modules > FacebookLogin and click the "Install" button. 4) Go to Extensions > Modifications and click the blue "Refresh" button on the top right. 5) FacebookLogin is now installed. You can access it from Extensions > Modules > FacebookLogin. 6) If you are using the FacebookLogin module on a live server, make sure to insert your license key in the Extensions > Modules > FacebookLogin > Support




Chapter 3: FacebookLogin sub-modules The FacebookLogin module principle of work is to create sub-‐modules, which you will later make visible on the front-‐end of your store. Since you may want to style and label your facebook login buttons differently for each of the layouts they will be assigned to, each sub-‐module can have different options.

Creating your first sub-module First, access FacebookLogin’s settings. Under the Facebook Settings tab you will find three options.

Module name: This is just for your use. It will not be shown anywhere on the front-‐end. You might use it as an indicator for the layout it will be assigned to. Selector: This option contains a checkbox and a text field.




-‐The checkbox determines whether the option will be taken into consideration.

-‐The text field is meant for CSS selectors to further specify the position of each sub-‐module on its layout.

Status: This is a drop-‐down menu and it will act as the on/off switch for each of your sub-‐modules. Set it to Enabled to activate the sub-‐module and reveal all its functionality and styling options.

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.




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.




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.

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 the Custom CSS one.




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.

Chapter 4: 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 log in 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:




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

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:




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




Chapter 5: 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 https://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 under the following URL -‐ https://developers.facebook.com/. In the top right corner you should see a “My Apps” drop-‐down with your Facebook profile picture next to it. Hover on it and click on ‘Add a New App’.




From the newly opened pop-‐up, choose Website. You should now be redirected to a page containing only one text field.

Type in the name of your Facebook App.

Once you type in the desired App name, click on the ‘Create New Facebook App ID’ button below. Now, you should see a popup that looks something like this:




As it is not a test app, leave the upper option set to ‘No’ and choose ‘Apps for Pages’ from the drop-‐down below. Then, proceed by clicking on ‘Create App ID’. Wait for a few seconds while your app is being created. In the page you have just been redirected to, click on ‘Skip Quick Start’:

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

Type in your domain in ‘App Domains’ and e-‐mail in ‘Contact Email’. Next, click on ‘Add Platform’ and choose Website. In the newly appeared field, Type in the URL of your site and click on ‘Save Changes’. Next, click on +Add Product button, choose Facebook Login and click on Get Started button.




In the next page, scroll down to locate the ‘Valid OAuth redirect URIs’. Does the field label ring a bell? If it does not, go to your module’s settings and find the ‘Redirect URI’ field.

Copy the text in bold (the one in the red rectangle) and paste it in the ‘Valid OAuth redirect URIs’ field in Facebook. The field should look something like that:

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. Click ‘Save’ in the top right corner. Congratulations! Now your module is fully functional. Test it by trying to log in from the front-‐end!




Chapter 6: Uninstalling FacebookLogin

Uninstalling FacebookLogin This process describes how to delete your FacebookLogin and its corresponding modules from your system.

1. Navigate to Extensions > Modules and click the “Uninstall” icon next to the main FacebookLogin module.

2. Navigate to Extensions > Modifications and remove the modification “FacebookLogin by iSenseLabs”. Click the “Refresh” button on the top right.




Chapter 7: Getting support If you have a valid iSenseLabs license for the FacebookLogin module, this means you have access to the iSenseLabs support system on the following address: http://isenselabs.com/users/support If you have any questions, comments or recommendations, feel free to open up a support ticket in our system. A support specialist will assist you as soon as possible. Thank you for using our product!

facebooklogin product documentation - isenselabsfacebooklogin documentation ! ! 2" ! table of...

Documents