Magento Social Loginizer – User Manual

Steps For Installation of Magento Social Loginizer Extension

Required Materials:

  • All files used by the extension.
  • FTP access to your website.

The connect manager is a useful tool for installing extensions, but prefer hands-on method when it comes to installations. It feels more comfortable when you are personally in control of the process.

Do you see an app-code directory there, what about app-etc-modules? If you don’t see these directory paths and files contained within them, chances are that the extension download was faulty. Take a look at the package.xml file, this is the blueprint used by Magento Connect to arrange the files in the proper places. You may need to use this to ensure that everything is as it should be. Once you have reviewed the extension files you are ready to perform the last step. Using your ftp client, drag all of the files onto the store root of the magento instance.

Picture1

Depending on the number of files in the extension, this may take a few moments. Now go to the admin console and click Flush Cache Storage. This is the requirement for any extension that adds pages to the admin console. Logging out and back in is also required to ensure that everything loads properly. If you cannot clear the cache via the admin console for any reason, you will need to clear the cache manually via your FTP client (see the first FAQ question for assistance). That is the final step. Congratulations on a successful installation.

Troubleshooting & FAQs

I loaded all files onto my Magento store, and now get a white screen for some or all of the admin console.

This is a fairly common problem, and 99% of the time it is cache related. If you can get to it, go to System->Cache Management and click Flush Cache Storage. This will ensure that everything cached by Magento is deleted and will to be regenerated. Log out and back in to complete the process.

If you are completely cut off from the admin console, navigate to the var-cache directory of your website. You should see a series of directories named mage*. Delete all of these directories (DO NOT DELETE var-cache). This is the equivalent of flushing the cache storage from the admin console.

Picture2

I am receiving a Magento error when accessing certain pages. How can I debug this?

This question really deserves a blog post all to itself, but a good start would be to go into the errors directory of your store. Locate the local.xml.sample file and rename it local.xml. The next time you see the error detailed information will be provided explaining where the error took place. Dont forget to change this back when you are finished troubleshooting!

I have a critical error with my webstore and need to turn off an extension I cannot access the admin console. What do I do?

Go to the app-etc-modules directory and open the file that goes with your extension. The naming convention is generally DeveloperName_ExtensionName.xml. In this case it would be Velocity_SocialLoginizer.xml.

Picture3

Look for the active tags in the file, change the value from true to false and save your changes. This tells Magento that the extension is disabled and not to run any code associated to it. Deleting the Magento cache is recommended (and most likely required) for this change to take effect.

User Guide

To excess Social Loginizer plugin, Click on Social Loginizer Menu appearing in System Menu navigation menu as shown below.

Picture4

On clicking menu Social Loginizer the module for plugin will open. It contains navigational bar at the top, Tab menu at the left and in main content the first general setting tab will display.

Picture5

General Settings Tab

General Settings:

  • Active: To enable the plugin, select enable present under the label Activate.
  • Show At :

a) Login Popup : To enable the login popup.

b) Checkout Page: To add social login bar on checkout page.

c) Login Page: To add social login bar on login page.

d) Registration Page: To add social login bar on registration page.

  • Test for Popup Link: Set the text for login popup link which will shown next to default login link .
  • Test for Heading : Set the text for heading of social login bar which will shown on selected pages.
  • Include jQuery File: jQuery i.e. a javascript framework is required for this plugin to work. Sometimes themes used in Magento already includes it but sometime they do not. If jquery is already included in your theme then deactivate else activate to include it.
  • Default Visible Option: Select the no. of social icons to be visible by default on social login bar.

NOTE : In login popup only small icons will be visible and only maximum 6 icons will be visible.

  • Animate Icons : Activate this option to turn on the animation effect on icons.
  • Sort Icons: This option allow to sort the order of icons in which they will display at login bar and login popup.

Website Settings Tab

In this tab you can save API key and Secret for each social website. There is a side bar listing all the websites. On click of any website its corresponding setting options will be shown. Below option there a link of corresponding website where you can create your application and get your client id and secret. In each website settings there will be following 4 options:

Website Settings:

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

Picture6

Report Tab

In this tab you can get graphical and tabular analytic data that will help you for analysis. There is a option of select website. On click of the option a dropdown listing all the websites will display choose websites and click on the submit button. That will create a graph for the selected website represent login and registration count for each selected websites.

Picture7

Below graph you can see the table for website analysis and another table for customer analysis data. The website analysis table show websites and their total login and registration count and the customer analysis table shows customer details and his login details (login count and website name).

Picture8

At top right , there is button Reset Database. This option will delete all the login and registration data from database. This will not affect your core database table. It will clear records only from the table created by this plugin.

How To Set Redirect URL?

Let your website url be www.example.com.

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

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

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

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

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

Secured Url: https://www.example.com/index.php/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).

Picture9

5. Now, go to Settings from left menu.

Picture10

6. Click on Add Platform button.

7. Select Website.

8. Enter your App Domain and Site URL.

Picture11

Application Type: Web Application.

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

9. Click Save Changes button.

10. 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://code.google.com/apis/console)or click on link given top right of respective tab in module configuration page.

2. Now click Apps &Auth-> Credentials from left menu.

Picture12

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

4. Fill the pop-up form with below details:

Application Type: Web Application.

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

Picture13

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

Picture14

How To Get LinkedIn App Details?

Steps:

1. Go to LinkedIn Developers (https://www.linkedin.com/secure/developer) or click on link given top right of respective tab in module configuration page.

Picture15

2. Click Add New Application.

3. Fill the form to register a new application. Website URL must 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.

Picture16

How Do Get Live App Details?

Steps:

1. Go to Microsoft Development Center (https://account.live.com/developers/applications) or click on link given top right of respective tab in module configuration page.

Picture17

2. Click Create Application.

3. Enter Application name and click I Accept button.

Picture18

4. From left menu select API Settings.

5. On the right panel enable Enhanced redirection security, enter Loginizer redirection page URL (in Redirect URLs and click Save.

Picture19

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

Picture20

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.

Picture21

2. Click Create New App button.

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

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.

Picture22

How To Get Yahoo App Details?

Steps:

1. Go to Yahoo Developer Network (https://developer.apps.yahoo.com/projects) or click on link given top right of respective tab in module configuration page.

Picture23

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.

Picture24

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.

Picture25

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.

Picture26

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

5. Logo Image: Select optional logo image of your store.

6. Click Save button.

Picture27

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

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

Note: To enable Amazon login into your 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.

Picture28

3. Fill the following form.

Picture29

4. Set OAuth redirect_uri as Loginizer redirect page URL of your store. (http://www.example.com/module/socialoginizer/instagram).

5. 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/webapps/developer/applications/myapps) or click on link given top right of respective tab in module configuration page.

2. Click on Create App button.

Picture30

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

Picture31

4. Set App return URL.

Picture32

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

Picture33

How To Get Dropbox App Details?

Steps:

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

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

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

Picture34

Picture35

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

Picture36

4. 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 App button and provide a name for Application.

Picture37

3. Fill up the details and save the application.

Picture38

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

Picture39

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 NEW APP button.

Picture40

3. Fill up the details , set the redirect url and save the application.

Picture41

4. Copy the credentials in plugin admin console.

Picture42

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, and OpenCart. 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 *