A Complete Guide to Setting Up Social Login with WordPress

Posted OnJan 19, 2015     CategoryPlugins     CommentsNo comment

In this section of the guide to the Social Login plugin, we will show you how to:

Step 1) Login to the WordPress Dashboard.

Step 2) From the left-hand sidebar of the Dashboard, navigate to Social Login -> Setup.

km-social-setup-01a

Create OneAll Account & Site

Step 3) Click the click here to setup your free account button to be automatically forwarded to the OneAll website.

km-social-setup-03a

Step 4) From the OneAll website, select how you want to create an account:

  • Sign up with a Social Network
  • Sign up with your Email Address

For this example, we will create a new account using Facebook.

Step 5) Click the Facebook button to continue.

km-social-setup-02a

Step 6) From the Facebook pop-up window, click the Okay button to allow OneAll to receive your public profile, friend list, email address and close this pop-up window .

km-social-setup-04a

Step 7) From the Facebook pop-up window, click the Okay button to allow OneAll to post to your Facebook account, close this pop-up window and be automatically forwarded to the OneAll Account Information page..

km-social-setup-05a

Step 8) From the OneAll Account Information page, complete the fields as follows (using your own Facebook information):

A. Account Information These fields were automatically populated with the information retreived from your Facebook account. Modify as needed.

All the fields in the Account Information area are required.
B. Company Information If applicable, complete the Company Information fields.

km-social-setup-06aa

Step 9) Click the Confirm Account Information button to save the details and be automatically forwarded to the OneAll Create a new Site page.

A OneAll Site is simply a container for the plugins, reports and settings of a specific website. If you are using this plugin on one website, you will need to create one Site. If you have more than one website, create one Site for each of your websites.

For this example, a single Site will be created.

Step 10) Click the Create a New OneAll Site button to be automatically forwarded to the OneAll Site Configuration / New Site page.

km-social-setup-07aa

Step 11) From the OneAll Site Configuration / New Site page, complete the fields as outlined below:

A. Choose your OneAll Site Subdomain Enter a single word without special characters, i.e. mywebsite if the domain of your website is www.mywebsite.com.

For this example, ourmusicblog was entered.

B. Give your Site a name Enter a descriptive name to help you distinguish your OneAll sites. The Site Name is not visible to your users and you may change it at any time.

For this example, Our Cool Music Blog was entered.

C. Where will you use our services? Enter the domain name(s) of your own website(s). If your website can be reached at http://www.domain.com/blog the entry to add would be www.domain.com.

For this example, ourmusicblog.com was entered.

If you are developing in a local environment, do not forget to add your local domains.

For example, localhost, 127.0.0.1 or another ip address or local domain.

D. Automatically add root Leave this checkbox checked if you want to automatically add root (www.example.com) and wildcard (*.example.com) domains.

For this example, no change was made.

km-social-setup-08aa

Below is our example:

km-social-setup-09a

Step 12) Click the Create this Site button to be automatically forwarded to the OneAll Dashboard.

Step 13) Highlight the API Access Credentials text and copy to the clipbard (CTRL+C).

Step 14) Paste the API Access Credentials (CTRL+V) to a notepad file as you will need these credentials for Step 19).

km-social-setup-20aa

To configure the OneAll Dashboard, refer to the OneAll documentation located on the right-hand sidebar of the OneAll Dashboard.

Setup the API Connection Handler

Step 15) From the left-hand sidebar of your site’s Dashboard, navigate to Social Login -> Setup.

A. API Connection Handler Click to select either the PHP Curl or the PHP FSOCKOPEN option.

Using CURL is recommended but it might be disabled on some servers.

Use FSOCKOPEN if you encounter any problems with CURL.

B. API Connection Port Click to select either the Communication via HTTPS on port 443 or the Communication via HTTP on port 80 option.

Using port 443 is secure but you might need OpenSSL
Using port 80 is a bit faster, doesn’t need OpenSSL but is less secure

km-social-setup-10a

Step 16) For this example, click the Autodetect API Connection button which will automatically determine which API Handler Connection option will work best.

The API Connection Port is left as default for this example.

km-social-setup-11a

Step 17) Click the Save Settings button.


Configure the API Settings

Step 18) If you do not have your API Credentials, click the Click here to create and view your API Credentials hyperlink and retrieve this information.

For this example, these credentials were saved in Step 14).

Step 19) Enter these credentials in the fields as shown below (using the credentials saved earlier):

km-social-setup-21a

Step 20) Click the Verify API Settings button.

If the credentials were entered correctly, The settings are correct message will display.

km-social-setup-22a

Step 21) Click the Save Settings button.


Configure the JavaScript Settings

Click to select either the Asynchronous JavaScript (Default) or the Synchronous JavaScript option.

Asynchronous: background loading without interfering with the display and behavior of the existing page.

Synchronous: Real-time loading when the page is being rendered by the browser.

For this example, the Synchronous JavaScript option was selected.

km-social-setup-23a

Step 22) Click the Save Settings button.


Enable Social Networks

Step 23) Place a checkmark in the appropriate checkbox for each Social Network you want to enable.

For this example, Facebook was the only option selected.

km-social-setup-24a

Step 24) Click the Save Settings button.

The next step of the guide will focus on How to Configure Social Login’s Display and User Settings with WordPress.

 


Leave a Reply

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

Send this to friend