Following these below steps to set up a page for your users to login via their social network accounts:
Get the APIs key
1. Login to Facebook.
2. Go to Facebook Developer application to upgrade your personal account to a Facebook Developer account. If you have already had a Developer account, please skip this step.
3. After that, you will be prompted to a screen where you can create a new Facebook app. Please click “Add a New App” button.
4. Fill all required information, including Display Name & Contact Email. Then, hit “Create App ID” button to create a new app ID. Please note that your app will have a unique app ID. You will use this ID whenever you use one of Facebook’s SDKs or SDKs or Open Graph tags for sharing .
5. At that time, you will be redirected to the product setup page, please click “Set Up” button in the Facebook Login section.
6. On the next screen, you will be given choice a platform among 4 options. Make sure you select Web.
7. After that, you need to input your Site URL and click the “Save” button. Please note that this URL includes http:// or https://.
8. Use the same URL you entered in the Site URL field above, and paste it in the Valid OAuth redirect URIs option (Products → Facebook Login → Settings). Don’t forget to click “Save Changes” button.
9. Navigate to Settings section from the left sidebar to fill in your contact information. Otherwise, your app could not be accessed.
Enter your website domain in the App Domains field.
- Next, you should upload the app icon and select category.
- Hit “Save Changes” button.
10. In the App Reviews section, click the button to Yes for make your app be published.
If you see the green dot – that means your app is online. Now your customers could log in using Facebook login.
11. Finally, go to your app’s dashboard and copy your Facebook API data and add it in Engine Settings → Settings → Social
Then paste the App ID for Facebook key, also paste the App secret for Facebook secret key.
And don’ forget to click Enable this feature!
1. Similar to Facebook, you also need to create new apps on Twitter at https://apps.twitter.com/ .
2. Fill in all required information on the Create an application form. Then click the “Create your Twitter application” button to submit.
3. Get Consumer key (for Twitter key) and Consumer secret (for Twitter secret) in Keys and Access Tokens tab. Add Consumer key and Consumer secret to your site. It locates at Engine Settings → Settings → Social
5. Go to Permissions tab to set up what type of access your application need.
- By default, your Twitter app should have Read and Write access. If this is not the case, modify your app to ensure that you have Read and Write access to give the application permission to post on your behalf.
- Besides, you can tick on the “Request email addresses from users” option under the Additional Permissions to get user’s email addresses whenever they log into your site via their Twitter account.
Now, your user can log into your site via Twitter account.
1. Go to the Google Developers Console to create a project.
2. After that, you will be redirected to the Library page where you must enable the Google+ API service.
3. Then, check your Google+ API status to make sure it is enabled.
4. Select Credentials tab in the left sidebar.
5. In the Credentials tab, click the “Create credentials” drop-down list, and choose the QAuth client ID.
6 Before selecting the application type, you must set your product name in advance by click on the “Configure consent screen” button.
In this step, you must fill all required fields as instructed, then click on the ” Save” button to submit.
7. On the next screen, you must select Web application as your application type. Then, click on the “Create” button.
Note: In Authorized redirect URIs section, make sure you have “?action=gplus_auth_callback” after your origin URI.
8. After that, you copy the Client ID (for Google key), Client secret (for Google Secret key) from the QAuth client dialog box to your site. It locates at Engine Settings → Settings → Social.
Now your users can access your website via Google Plus.