FacebookLogin for OpenCart - Step-by-Step Configuration + Video

FacebookLogin proved as an extremely useful social login and register OpenCart module and became very popular soon after its official release. The module does not require any programming skills to be used and to take advantage of its power and we just need a Facebook App for its configuration.

Facebook have recently made a major update in their Developers Page so we decided to create this post and lead you through the steps of creating Facebook App for FacebookLogin in the new Developers Page.

Install FacebookLogin

We will not dig in the installation trifles in this article, because the it is a straightforward and easy process. The installation of FacebookLogin does not make any difference than other typical third-party module installation.

Become a Facebook Developer

After the installation of FacebookLogin the module requires Facebook App ID and App Secret for its further configuration. In order to get these details you should create a Facebook App.

Facebook Apps are created in the Facebook Developers Page - https://developers.facebook.com/.

Facebook Apps can be created only by users who are registered as Facebook Developers, so if you are not a Facebook Developer yet, you will be asked to register before proceeding. Facebook may also ask you for additional details in order to successfully register you as a developer.

Create a new Facebook App

Once we become Facebook Developers we can proceed with our new Facebook App. Navigate to Apps → Create a New App.

A "Create a New App" pop-up box appears. Here we should enter a Display Name (this is our App name), select "Apps for Pages" from the category list and click "Create App". In few seconds our new App has been created.

Configure the Facebook App

Now we can proceed with the App configuration. Navigate to Apps → "My New App", and switch to Settings from the left menu.

Here, in the App Domains field, we should enter the domain for which we are going to use the App (e.g. mysuperstore.com), and provide a Contact Email.

After that click on "+ Add Platform" and choose "Website" as a Platform.

Here we should enter our full website URL, in the "Site URL" field (e.g. http://mysuperstore.com/ or http://test.mysuperstore.com/store/) and click Save.

Next step, we need go add a new Product. To do this we go to Add Product on the left.

A popup will appear and we need to select FacebookLogin from the list

 on the Settings menu switch to the Advanced tab and scroll down to "Valid OAuth redirect URIs".

Here we should enter the Redirect URI, which we will find in the admin panel of FacebookLogin, in the Facebook Settings Tab (in your website admin panel navigate to Extensions > Modules > FacebookLogin > Edit). 

Copy/paste the Redirect URI in the "Valid OAuth redirect URIs" and click "Save Changes". If all worked well the link needs to be in a blue like background with a x at the top right (just like the example below).

IMPORTANT: If the link does not work with http try switching the protocol to https://

Do not forget to make the Facebook App Public

The final step of our Facebook App configuration is to make the App public. Navigate to "App Review, from the left menu. 

toggle "Do you want to make this app and all its live features available to the general public?" to YES.

A popup will appear requiring confirmation. If it asks you to confirm which sector you would like to choose the app to be published you can go ahead and click on Business.

Click "Confirm" and we are ready to go.

Once all is set we can quickly check if the app is approved and green. To do this click Dashboard. We should see a message similar to the below.

Configure FacebookLogin

Once we are done with the configuration of our new Facebook App we should make the final configurations for the FacebookLogin and position the button on the desired pages. Please do not close the Facebook Developer Page yet, because we will need it a little more.

Open up a new browser tab or window, go to the admin panel of FacebookLogin in your website, and switch to the Facebook Settings tab.

Go back to the Facebook Developer Page and switch to the Dashboard from the left menu. Here you will find the Facebook App ID and App Secret.

Copy/paste them to the corresponding fields in the admin panel of FacebookLogin, in the Facebook Settings tab, and click ‘Save’.

This is how our Facebook Settings Tab should look after that configuration.

Position FacebookLogin on the desired pages

So far we are ready with the main configuration of FacebookLogin. Now let’s position the login button on the desired pages in our website.

The module has an easy to use position configuration which allows us to enable the module for certain layouts and position it using the default OpenCart module positions - Content Top, Content Bottom, Column Left, Column Right.

FacebookLogin also provides advanced layout positioning using CSS selectors. This feature allows us to hook the FacebookLogin button to a certain HTML element of the page for which we have enabled it. However this advanced positioning feature requires basic knowledge of HTML and CSS.

I would suggest you to use the FacebookLogin for the pages on which a customer is asked to login or register, because this is what this module is made for. These pages, by default in OpenCart, are the Account Login page, Create Account page and the Checkout page.

Navigate to the Control Panel tab in the administration of the module and click on the "Add module" button. A new positioning module has been created, assigned by default to the Account layout and positioned in Content Top.

This positioning module will display the FacebookLogin but in all the pages assigned to the account layout, which are by default the Account Login and Account Register pages.

Now we will add one more positioning module, and assign the FacebookLogin to the Checkout layout. Click on the "Add module" button and choose the Checkout layout from the layouts select menu.

The module is positioned in Content Top by default, which in our case is the desired position, so we will not change it. Click "Save" and we are good to go. Now we should go the storefront and check if everything is as configured.

Account Login

Register Account

Position FacebookLogin everywhere

The configuration of FacebookLogin for our OpenCart store is done. This is just one of many module positioning, but my observations show these are the most commonly used. However the module may be displayed on every certain Layout so that everyone can position it on all desired pages.

Please have in mind that each positioning module can be used for only one Layout and also we cannot have the positioning modules for one and the same Layout, because the second will take precedence over the first.

Final Words

We believe this article will be of great help during FacebookLogin integration and configuration and will help you pass all the steps flawlessly. We stressed on the crucial points and provided guidelines where something may go wrong. And in order to fulfill this post as a complete "How to" champion we added this "Step by step configuration" Video Tutorial. Enjoy!