Opencart Social Loginizer – User Manual

How to install OpenCart Social Login plugin on your server

1. Folder structure of the Landing Page Creator plugin folder.

16

2. Open the upload folder and you will find the following folder structure:

17
You must have VQMOD installed for this plug-in to work. If VQMOD is not installed please download and install from theURL below:
http://code.google.com/p/vqmod/

3. Select all the folder and drag and drop them to the root directory of your OpenCart store through FTP.

4. You will be able find the plug-in ready to be installed in the Modules in your OpenCart store as shown below.

18

5. Click on the Install link to install the plug-in. This will also add a drop down option in your menu bar which will list all plug-ins by Velocity installed on your store for fast navigation. This drop down also has a message box, using which we can inform you about new launched plug-in or
new update.

19

6. Delete the Vqcache files from the vqmod/vqcache folder.

7. To access Social Loginizer plug-in click on edit button in module section as shown below:

20
8. On clicking edit button the module for plug-in will open. It contains navigational bar at top, menu at left and main content at center as shown below.

21

1. General Settings tab

1. To enable/disable plug-in, Switch the enable button OFF to ON / ON to OFF this is just to the right of Enable/Disable label.

2. Drag and drop login buttons to change their sort order.

3. Click on add module button add and call this plug-in to a particular layout page.

2. Facebook Settings tab

The Facebook Settings Tab has Facebook login preferences like :
1. Enable/Disable: You can show or hide Facebook login by enabling or disabling from here.

2.Facebook App ID: The Facebook App-ID provided from https://www.developers.facebook.com (SeeAppendix How to get Facebook App details).

3. Facebook App Secret: The Facebook App-Secret (See appendix How to get Facebook App details).

4. Facebook Button Size: The Facebook login button available in two sizes one small and one large. You can choose any one of them.

22

3. Google Plus Settings tab

The Google Plus Settings Tab has Google+ login preferences like :
1. Enable/Disable: To Enable or Disable the Google plus Login.

2. Google Client ID: The Google plus Client-ID. (See appendix How to get Google App details).

3. Google Client Secret: The Google plus Client-Secret. (See appendix How to get Google App details).

4. Google Button Size: The Google login button available in two sizes one small and one large. You can choose any one of them.

23

4. LinkedIn Settings tab

The LinkedIn Settings Tab has LinkedIn login preferences :
1. Enable/Disable: To Enable or Disable the LinkedIn Login.

2. LinkedIn Client ID: The LinkedIn Client-ID. (See appendix How to get LinkedIn App details).

3. LinkedIn Client Secret: The LinkedIn Client-Secret. (See appendix How to get LinkedIn App details).

4. LinkedIn Button Size: The LinkedIn login button available in two sizes one small and one large. You can choose any one of them.

24

5. Live Settings tab

The Live Settings Tab has Windows Live login preferences :

1. Enable/Disable: To Enable or Disable the Live Login.

2. Live Client ID: The Live Client-ID. (See appendix How to get Live App details).

3. Live Client Secret: The Live Client-Secret. (See appendix How to get Live App details).

4. Live Button Size: The Yahoo login button available in two sizes one small and one large. You can choose any one of them.

25live

6. Twitter Settings tab

The Twitter Settings Tab has twitter login preferences :
1. Enable/Disable: To Enable or Disable the Twitter Login.

2. Twitter Client ID: The Twitter Client-ID. (See appendix How to get Twitter App details).

3. Twitter Client Secret: The Twitter Client-Secret. (See appendix How to get Twitter App details).

4. Twitter Button Size: The Twitter login button available in two sizes one small and one large. You can choose any one of them.

26twi

7. Yahoo Settings tab

The Yahoo Settings Tab has yahoo login preferences :
1. Enable/Disable: To Enable or Disable the Yahoo Login.

2. Yahoo Client ID: The Yahoo Client-ID. (See appendix How to get Yahoo App details).

3. Yahoo Client Secret: The Yahoo Client-Secret. (See appendix How to get Yahoo App details).

4. Yahoo Button Size: The Yahoo login button available in two sizes one small and one large. You can choose any one of them.

27yahoo

8. Amazon Settings tab

The Amazon Settings Tab has amazon login preferences :
1. Enable/Disable: To Enable or Disable the Amazon Login.

2. Amazon Client ID: The Amazon Client-ID. (See appendix How to get Amazon App details).

3. Amazon Client Secret: The Amazon Client-Secret. (See appendix How to get Amazon App details).

4. Amazon Button Size: The Amazon login button available in two sizes one small and one large. You canchoose any one of them.

Screenshot from 2014-10-29 19:28:19

9. Instagram Settings tab

The Instagram Settings Tab has instagram login preferences
1.Enable/Disable: To Enable or Disable the Instagram Login.

2. Instagram Client ID: The Instagram Client-ID. (See appendix How to get Instagram App details).

3. Instagram Client Secret: The Instagram Client-Secret. (See appendix How to get Instagram App details).

4. Instagram Button Size: The Instagram login button available in two sizes one small and one large. You canchoose any one of them.

Screenshot from 2014-10-29 19:27:55

10. Paypal Settings tab

The Paypal Settings Tab has paypal login preferences :
1. Enable/Disable: To Enable or Disable the paypal Login.

2. Paypal Client ID: The Paypal Client-ID. (See appendix How to get Paypal App details).

3. Paypal Client Secret: The Paypal Client-Secret. (See appendix How to get Paypal App details).

4. Paypal Button Size: The Paypal login button available in two sizes one small and one large. You can choose
any one of them.

Screenshot from 2014-10-29 19:28:36

11. Get Support tab

1. By clicking on Get Support tab, you will be redirected to our support website, where you can contact our support for help. Use this tab in case you some query/issue or found some bug.

12. Themer tab

1. By clicking on themer tab, you will have an option to change the theme of Social Loginizer admin panel.

31

Social Loginizer buttons

In Store Front the SNS Login buttons available on any page either by adding it from the Admin Module
General Settings Tab or by putting a short code inside any of the catalog *.tpl file in templates folder.
Short Code for SNS Login Button:

This will generate buttons as follows:

32

1. How to get Facebook App details?

Steps:

1. Go to Facebook Developers Website (https://developers.facebook.com)

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).

33

5. Now, go to Settings from left menu.

34

6. Click on Add Platform button.

7. Select Website.

8. Enter your App Domain and Site URL.

35

9. Click Save Changes button.

10. Now, go to Status & Review tab from left menu and make the Application Live.

2. How to get Google App details?

Steps:
1. Go to Google Developers Console (https://code.google.com/apis/console).

2. Now click Apps &Auth-> Credentialsfrom left menu.

36

3.Click Create New Client ID button from the right panel of the screen.

4. Fill the pop-up form with below details:
o Application Type: Web Application.
o Authorized JavaScriptorigins: Your store domain name. (http://www.example.com)
oAuthorized redirect URI: URI of SNSLogin redirect page.
(http://www.example.com/index.php?route=snslogin/redirect).

37

5.Now click Create Client ID button to get your Client ID and Client Secret Key.

38

3. How to get LinkedIn App details?

Steps:
1.Go to LinkedIn Developers (https://www.linkedin.com/secure/developer).
2.Click Add New Application.

39

3.Fill the form to register a new application. Website URLmust be your Store URL like :
http://www.example.com.
4.Click Add Application to submit the form and keep your API Key and Secret Key safe.

40

4. How to get Live App details?

Steps:
1.Go to Microsoft Development Center (https://account.live.com/developers/applications).

41

2.Click Create Application.

3.Enter Application name and click I Accept button.

42

4. From left menu select API Settings.

5.On the right panel enable Enhanced redirection security, enter SNSLogin redirection page URL (http://yoursite.com/catalog/controller/snslogin/snslogin_redirect.php) in Redirect URLs and click Save.

43

6.Now from left menu click App Setting sand copy your Client ID and Client Secret.

44

5. How to get Twitter App details?

Steps:
1.Go to Twitter App Management (https://apps.twitter.com/).

45

2.Click Create New Appbutton.

3.Enter Application Details as follows:
o Application Name : Name of your Application.
o Description : 10 to 200 characters description of your application.
o Website : Your store URL.
o Callback URL :SNSLoginresirect page URL of your store.
(http://www.example.com/index.php?route=snslogin/redirect).

4. Now, Click Yes, I agree and then click Create your Twitter application.

5. Now, select the API Keys from the menu below your Application Name and copy your API Key and API Secret.

46

6. How to get Yahoo App details?

Steps:
1. Go to Yahoo Developer Network (https://developer.apps.yahoo.com/projects).

47

2.Click Create a Project.

3.Fill the required details as per instructions. Home URL will be your Store URL.

4.Click Create Project button.

5.Copy your Consumer Key and Consumer Secret.
48

7. How to get Amazon App details?

Steps:
1. Go to Amazon Developer Network (http://login.amazon.com/manageApps).

49

2. Click on Sign in to App Console button.

3. 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.

50

4.Enter Application Details as follows:
o Name: Name of your Application.
o Description: Description of your application.
o Privacy Notice URL: Url of privacy policy page of your store.
o Logo Image: Select optional logo image of your store.

5. Click Save button.

6. Now click on Web Settings to get your client id and secret.

51. Allowed Return URL : SNSLogin redirect page URL of your store.
(http://www.example.com/index.php?route=snslogin/redirect).

8. How to get Instagram App details?

Steps:
1. Go to Instagram Developer Network (http://instagram.com/developer/clients/manage/#).

2. Click on Register a New Client button on top right of page.

52

3. Fill the following form

53

4. Set OAuth redirect_uri as SNSLogin redirect page URL of your store.
(http://www.example.com/index.php?route=snslogin/redirect).

5. Click Create button then copy and paste Client Id and Secret in admin panel of plug-in.

9. How to get Paypal App details?

Steps:
1. Go to Paypal Developer Network (https://developer.paypal.com/webapps/developer/applications/myapps).

2. Click on Create App button.

54

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

55

4. Set App return URL (live) as as SNSLogin redirect page URL of your store.
(http://www.example.com/index.php?route=snslogin/redirect).

56

5. Copy and paste live credentials to admin panel of plug-in.

57

Related Stories:

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 *