Magento 2 Social Loginizer Extension – User Manual

Introduction Magento 2 Social Loginizer Extension

Social Loginizer Plugin allow customer to login/signup using their social accounts like Facebook, Google, Yahoo and 9 other options. This plugin will add a new link ‘Quick Log In’ next to default login link. This text can be customized. On the click of this link a login popup will be opened.

The plugin gives the freedom to the store admin to enable or disable login through several platforms, the admin can also change the behavior of the plugin at the front-end and also enables or disable login through any available social platform.

Installation Guide

Download the zip from our Magento Plugin Store & unzip it.

Open the extracted directory & you will see following folder structure.

word-image-93

Image-1

Create a folder {Magento root}/app/code/Knowband/Socialloginizer.

Copy the extracted content in the above folder.

Enable Social loginizer

Run the following commands in your terminal to enable Social Loginizer plugin

  1. php -f bin/magento module:enable –clear-static-content Knowband_Socialloginizer
  2. php -f bin/magento setup:upgrade

Configure Social loginizer

Log into your Magento Admin, then goto Stores -> Configuration -> Knowband -> Social Loginizer and configure the plugin as shown below:

Image-2

User Manual

Prerequisites

Php version 5.6 or greater

To access the API of constant contact, one must use the php version equal or higher than 5.6 . Unless your server is running the required php version, you will not be able to successfully install this plugin.

Admin Settings

To access Knowband plug-in, go to Stores -> Configuration -> Knowband -> Social Loginizer

Store admin will have various settings options categorized as follows:

Image-4

General Settings

Admin can customize the general settings by using the following settings option available.

Image-5

  • Enable: Admin will be able to choose Yes/No to enable this plugin.
  • Show At Login Popup: Enabling it will create a link saved in “Text for popup link”. On clicking this link, a popup will appear with login option and a socialloginizer section.
  • Text for Pop Up Link: This text will appear as link for login popup at header in front end.
  • Show At Login Page: Enabling it will show social loginizer block at login page of Front end.
  • Show At Registration page: Enabling it will show social loginizer block at account creation page of Front end.
  • Show At Checkout Page: Enabling it will show social loginizer block at checkout Sign in link popup.
  • Text For Heading: This text will appear before social loginizer block.
  • Default Visible Option: It will be the no of icons that will be shown by default at the social loginizers block.
  • Animate Icons: Enabling it will add animation effect at social loginizers block icons.
  • Sort Icons: Icons order will be changed here. The icons at front end will be shown in order as set by admin here.

Websites Settings

Admin can add websites setting here.For each website, there will be similar settings like as below:-

  • Active: To enable the website for login and signup , select Yes.
  • App ID (eg. for Facebook: Facebook App Id) : Enter your Application ID/Client. ID/Consumer ID is provided by corresponding website.
  • App Secret (eg. for Facebook: Facebook App Secret) : Enter your Application Secret/Client .Secret /Consumer Secret is provided by corresponding website.
  • Select Icons: For each website there are two kinds of icons small and large. Select any one of the icon to show at social login bar.

Reports Section

There is a “Knowband” tab in menu under which there is link of “Socialloginizer.

On Clicking “Socialloginizer”, a screen will appear with three tabs:-

  1. Website Graphical Report:- It shows social login and registration data in graphical form.

  1. Social Login report:-It shows a table containing data related to each social login website like login count, registration count etc.

  1. Social Login User Report:- It shows a table containing data related to customer and social login sites like customer email, login count etc.

  1. Reset Database:- There is a “Reset Database” Button. On clicking this button all the social login plugin related data will be deleted.

Front End Changes:-

  1. Login Popup: On enabling login Pop Up a link will appear with text as set in admin.

On clicking this link a popup appears with social login option.

  1. Login Page: If enabled Social Login Block will appear at Customer Login Page.

  1. Registration Page: If enabled Social Login Block will appear at Customer Account creation Page.

  1. Checkout Page:- If enabled Social Login Block will appear at checkout Sign In Popup.

Appendix

How to set Redirect Url?

Let your website url be ‘www.example.com’. and social login site is “Facebook”.

If Url Rewrite is enabled in your website then redirect url will be

Unsecured Url: http://www.example.com/socialloginizer/index/vssSoloApi Facebook /

  1. Secured Url: https://www.example.com/socialloginizer/index/vssSoloApi Facebook /

If Url Rewrite is disabled in your website then redirect url will be

  1. Unsecured Url: http://www.example.com/index.php/socialloginizer/index/vssSoloApi Facebook /
  2. Secured Url: https://www.example.com/index.php/socialloginizer/index/vssSoloApi Facebook /

Note: For Yahoo, URLS will be

Unsecured Url: http://www.example.com/socialloginizer/index/vssSoloApi /

  1. Secured Url: https://www.example.com/socialloginizer/index/vssSoloApi /

How to get Facebook App details?

Steps:

  1. Go to Facebook Developers Website (https://developers.facebook.com) or click on link given top right of respective tab in module configuration page.
  2. Click on Apps -> Create a new App.
  3. Follow the instructions on the screen.
  4. You will get the App ID and App Secret (Click “Show” button).

  1. Now, go to Settings from left menu.

  1. Click on “Add Platform” button.
  2. Select Website.
  3. Enter your App Domain and Site URL.

Application Type: Web Application.

Authorized JavaScriptorigins: Your store domain name. (http://www.example.com)

  1. Click “Save Changes” button.
  2. Now, go to “Status & Review” tab from left menu and make the Application Live.

How to get Google App details?

Steps:

  1. Go to Google Developers Console (https://console.developers.google.com/projectselector/apis/library)or click on create project link link given top left dropdown of the page or at the center of the page.

  1. Provide name of the project.

  1. Create credentials by clicking on “Create Credentials” Button and selection oAuth client id.

  1. Credentials can be created only after providing details in oAuth form. Click same and now credentials can be found.

  1. Redirection URL can be set at credentials screen

How to get LinkedIn App details?

Steps:

Go to LinkedIn Developers (https://www.linkedin.com/developer/apps) or click “Create Application” and follow the steps.

Authentication details can be added in authentication tab.

How to get Live App details?

Steps:

  1. Go to Microsoft Development Center (https://apps.dev.microsoft.com/#/appList) or click on Add an App.

  1. Fill details in form and click on save.

How to get Twitter App details?

Steps:

  1. Go to Twitter App Management (https://apps.twitter.com/) or click on link given top right of respective tab in module configuration page.

  1. Click “Create New App ”button.
  2. Enter Application Details as follows:

Application Name : Name of your Application.

Description : 10 to 200 characters description of your application.

Website : Your store URL.

Callback URL : Loginizer redirect page URL of your store.

  1. Now, Click “Yes, I agree”and then click “Create your Twitter application”.
  2. Now, select the “API Keys”from the menu below your Application Name and copy your API Key and API Secret.

 

 

How to get Yahoo App details?

Steps:

  1. Go to Yahoo Developer Network (https://developer.yahoo.com/apps/) and click on “My Apps” link given top right and header menu of configuration page.

  1. Click “Create An App”.

  1. Fill the required details as per instructions

  1. Copy your “Client Id” and “Client Secret”.

How to get Amazon App details?

Steps:

  1. Go to Amazon Developer Network (http://login.amazon.com/manageApps) or click on link given top right of respective tab in module configuration page.

  1. Click on Sign in to App Console button.
  2. After successful login to App Console click on Register new application button in top right of page and you will be redirected to following page.

  1. Enter Application Details as follows:

Name: Name of your Application.

Description: Description of your application.

Privacy Notice URL: Url of privacy policy page of your store.

Logo Image: Select optional logo image of your store.

  1. Click Save button.
  2. Now click on Web Settings to get your client id and secret.

  1. Allowed Return URL : Loginizer redirect page URL of your store.

Note: To enable Amazon login into yout website, your website “must be secure with HTTPS” otherwise Amazon login will not work.

 

How to get Instagram App details?

Steps:

  1. Go to Instagram Developer Network (http://instagram.com/developer/clients/manage/#) or click on link given top right of respective tab in module configuration page.
  2. Click on Register a New Client button on top right of page.

  1. Fill the following form

  1. Set OAuth redirect_uri as Loginizer redirect page URL of your store. (http://www.example.com/module/socialoginizer/index/vssSoloApiInstagram).
  2. Click Create button then copy and paste Client Id and Secret in admin panel of plug-in.

How to get Paypal App details?

Steps:

  1. Go to Paypal Developer Network (https://developer.paypal.com/developer/applications/) and login.
  2. Click My Apps and Credentials.

  1. Now enter name of your Application and click Create App Button.

  1. By default sandbox details is selected, switch it to live and input other app details.

  1. Now set redirection URL in live App Settings.

  1. Check Login with paypal and save details.

How to get Dropbox App details?

Go to Steps:

Note: To enable Dropbox login into yout website, your website “must be secure with HTTPS” otherwise Dropbox login will not work.

Go to Dropbox Developer Website (https://www.dropbox.com/developers/apps) or click on link given bottom of respective tab in module configuration page.

  1. Click On the Create App button and provide a name for Application.

  1. Fill up the details , set redirect url and save the settings.

  1. Copy and paste the key and secret in plugin admin panel.

How to get WordPress App details?

Steps:

1. Go to WordPress Developer Website (https://developer.wordpress.com/apps/) or click on link given bottom of respective tab in module configuration page.

2. Click On the “Create New Application” button and provide a name for Application.

  1. Fill up the details and save the application.

  1. Copy and Paste the credentials in plugin admin console.

How to get FourSquare App details?

Steps:

  1. Go to foursquare developer website(https://foursquare.com/developers/apps) or click on the bottom link in Plugin admin console.
  2. Click on the ‘Create a new app’ button.

  1. Fill the details , set the redirect URL and save the application.

  1. Copy the credentials.

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify. We also provide custom module development and customization services for the website and modules.

Leave a Reply

Your email address will not be published. Required fields are marked *