- Creating A LinkedIn App
- Configuring The LinkedIn Login Extension
- Adding LinkedIn Signup And Login To Your Site
Creating A LinkedIn AppThe first step to enabling the LinkedIn login extension on your site is to create a LinkedIn App. To create your app, follow these steps:
- To access the developers page of LinkedIn visit https://www.linkedin.com/secure/developer. Once you are logged in on this page, you will see the button below to get started:
If you have already created an app already, you will still want to click on the Create Application button.
- You will need to provide some details to LinkedIn to ensure that LinkedIn recognizes your site. Please note, these settings will be seen by your customers when they are signing in, so be sure to keep that in mind when naming your app:
Company Name - Choose your company's name.
Application Name - Give your application a meaningful name.
Description - Give your application some description like what is the application all about.
Application Logo - It is mandatory to upload a logo with the same width and height (so a square logo).
Application Use - Choose the reason closest to your needs, or choose other if you're not sure.
WebSite URL - Enter the full URL to your site. (E.g: http://YourSiteHere.com).
Business Email - Enter the email address for the business contact.
Business Phone - This is the number associated with your business.
- Your app has now been created. And you should see the following screen:
- Once you have this screen, you will see the Client ID and Client Secret. You will need to enter those in your MemberMouse configuration for LinkedIn.
Configuring The LinkedIn Login Extension
- In the MemberMouse menu, click on General Settings.
- Next, click on the Extensions tab and from the following page, click on the LinkedIn logo.
- You will need to provide some information from your LinkedIn app, and make a couple of selections:
Client ID - From your LinkedIn app Client ID field.
Client Secret - From your LinkedIn app Client Secret field.
Allow Signups? - If you want to allow new customers to sign up using their LinkedIn login credentials, then click this box. Otherwise, members will only be able to login using their LinkedIn credentials, but not sign up for a new membership.
- (Optional) If you check the Allow Signups box, you will need to select the r_emailaddress option for your LinkedIn app so that LinkedIn knows to allow access to the user's email address. This is found under Application Settings > Authentication > Default Application Permissions
- (Optional) Click the "Update" button at the bottom of the application settings screen.
- Click Save Configuration in MemberMouse to save your LinkedIn extension settings.
Adding LinkedIn Signup And Login To Your Site
Once you have configured your site to accept LinkedIn login, you need to add the following SmartTags to allow for signup and login.
Signup Button SmartTag
The following SmartTag generates a button that customer's can use to sign up for a new account:
membershipLevel - You can optionally use this attribute to override the default signup membership level defined above. It takes a membership level ID for free membership levels only. For example:
[MM_Social_Signup_Button provider='LinkedIn' membershipLevel='2']
Login Button SmartTag
The following SmartTag generates a button that customer's can use to log into an existing account:
NOTE: You can set the provider attribute to 'all' to generate signup or login buttons for all active social login providers. So if you have Google and Facebook active, this single SmartTag will generate a button for each. For example:
Adding Linked In Button Image - (v2.3.0 and under)
In order to add the Linked In button to your site, you will need to make two adjustments.
1. Save the following image as social-login-lnkin.png,, and then upload it into /wp-content/plugins/membermouse/resources/images/ in your site's files via FTP.
2. Add the following to your checkout page in an html compatible block in your WordPress or other editor:
background: url('../../images/social-login-lnkin.png') 0 -2px;
background: url('../../images/social-login-lnkin.png') 0 -46px;
background: url('../../images/social-login-lnkin.png') 0 -91px;