Archives

Configure Facebook, Google,LinkedIn and Twitter Login Button

If you want to allow your member to sign up/in using social media account like fb, google…please follow the instructions at this document.

Facebook App Integration tutorial

1/ Go to developers.facebook.com

2/Login & select My apps/Add a New App:

3/Fill in your app’s name abd Contact Email:

createapp

4/Click “Set up” button at Facebook Login from Add Products page:

addproduct

5/Select platform for your app, select Web platform:

platform

6/After Select Web platform fill in your Site URL and click Save button:

siteurl

7/After Your App was successfully created, make sure it is activated (live):

To make your app live, go to My Apps/YourNewCreatedApps/Settings/Basic

basicinfo

#1: Fill in your Namespace

#2: Ensure your Contact Email is correct.

#3: Fill in your App Domains

#4: Fill in your Site Privacy Policy URL

#5: Fill in your Site Terms of Service URL

#6: Select your app category

#7: Upload your app icon

#8: Ensure your Website is correct.

If any of # above incorrect, your app cannot be lived.

Go to App Review below Settings tab, switch to Yes:

appreview
8/How to configure your Admin Dashboard:

Go to Admin Dashboard/Socials Integration/Facebook

Then:

appapi

Get #1 and #2 from fb app and copy to your Admin Dashboard/Socials Integration/Facebook

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_admin_dashboard_system_admin_system_settings_fb_dashboard.jpg

#1: Your App ID from your FB app (in your FB app/Settings/Basic)

#2: Your App Secret from your FB app (in your FB app/Settings/Basic, the App Secret will show after pressing Show button and re-enter your FB password.

#3: Your callback url that configured from step 7.3 which has the format: [yoursite/social/auths/endpoint/facebook/]

#4: Copy [yoursite/social/auths/endpoint/facebook/] paste to Valid OAuth Redirect Url at your facebook developer page

facebook

#5: Save Changes.

*You dont need to config SDK version used in Admin Dashboard, system will be detected automatically.

*Remember to check if any space in the fields.

*Remember your site could be [https] instead of [http], they will not recognize if site was [https] and Client ID & Admin Dashboard were [http].


Google App Integration tutorial


1/ Go to console.developers.google.com

2/Login your google account & create project:

createproject

#Press on Create Project.

3/Fill in your Project’s Name :

enterappname

#1 Fill your project’s name

#2 Create

*Agree to Terms and Conditions if they’re showing up.

4/After your project is done creating select your Project from select box and go to API Manager/Credentials of your project and click Credentials in APIs & Services link :

credentials

5/Hover mouse on Create credentials button and choose OAuth client ID:

googleid

6/We have to configure consent screen first:

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_admin_dashboard_system_admin_system_settings_gg_configure.jpg

#Press on Configure consent Screen then continue

7/Register at your Consent Screen :

consent

#1 Check your Application name

#1 Check your Application logo

#3 Check your Email

#4 Enter your Site domain

#5 Enter your Site home page link

#6 Enter your Site Privacy Policy page link

#7 Enter your Site Terms of Service page Link

Click  Save

8/Once you had registered your consent screen, Start Creating Client ID :

#1 Select Web Application

#2 Enter your site’s domain

#3 Enter your callback’s URL, this URL has the format: [yoursite/social/auths/endpoint/google?hauth.done=Google]

#4 Create Client ID

9/ Review your Client ID, it should be looked like this:

#Your Client ID

10/ On Credentials tab, click on credential name hyperlink, start configuring:

The Client Id on Google:

-Copy 1, 2, 3 to your settings Admin Dashboard/Socials Integration/Google one by one.

-Copy 1, 2, 3 to your settings Admin Dashboard/Socials Integration/Google one by one.

-Enable, check!

-Save Settings

*Remember to check if any space in the fields.

*Remember your site could be [https] instead of [http], they will not recognize if site was [https] and Client ID & Admin Dashboard were [http].

* Both sides, Admin Dashboard and Client ID must be configured synchronously for the 1, 2, 3, they must be same to each others.


6-1-2015_5-44-56_pm.jpg

6-1-2015_5-45-12_pm.jpg

Your Login Page and Sign Up Page should be looking like this, with Facebook and Google button


Twitter App Integration tutorial

1/ Go to https://apps.twitter.com/

Note: if your account is not developer account, you will got a message request “Apply for a developer account” please click “Apply for a developer account” and follow all steps to apply developer account.

createdeveloper

If your account is developer account you will see:

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_admin_dashboard_system_admin_system_settings_twitter1.jpg

2/ Create New App and fill the all fields

twitter2

#1. Enter you app name
#2. Enter you app description
#3. Enter your website url (ex: https://moosocial.com)
#4. Check “Enable sign in with twitter”
#5. Enter your website URL: will be [url your website]/sociallogin/endpoint/twitter (ex: https://moosocial.com/sociallogin/endpoint/twitter)
#6. Enter field “Tell us how to this app will be used”:  you can enter ex: My user will click twitter button from my site and will use his twitter account to signup and signin my site.
#7. Click Create button

3/ Receive the successfully creation message

4/ Go to ‘Keys and Access Tokens“ tab to get API key and API secret info

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_admin_dashboard_system_admin_system_settings_twitter5.jpg

5/ Access your site, go to Admin Dashboard/ System Admin/ Social Integration/ Twitter

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_admin_dashboard_system_admin_system_settings_twitter4.jpg

#1: Input API key and API secret info on step 4

#2: Input public_profile, email, user_friends to Scope textbox

#3: Input [url your website]/sociallogin/endpoint/twitter
(ex: https://moosocial.com/sociallogin/endpoint/twitter)

Then, click on Save Settings button. Complete Twitter integration process.


LinkedIn App Integration tutorial

1. Go to https://www.linkedin.com/developers/

2. Login –> Create app

3. Complete information about your app

#1: Fill in your App name

#2: Fill in your Company

   #3: Fill in your Privacy Policy link

   #4: Fill in your business email

   #5: Upload your App logo

   #6: “I have read and agree to these terms” –> checked

   Click on Create app button

4. Enter redirect URL

Enter URL in the following format: [yoursite/sociallogin/endpoint/linkedin?hauth.done=Linkedin]

5. Go to Admin Dashboard/Social Login/Linkedin

6. Get #1 and #2 from Linked app and copy to your Admin Dashboard/Social Login/Linkedin

   #1: Your Client ID from Linkedin (in your Linked app/ Authentication)
#2: Your Client Secret from Linkedin (in your Linked app/ Authentication)

Press Save Settings. Complete Linkedin integration process

*Remember to check if any space in the fields.

Add Google Developer Key Or Enable OpenStreetMap

mooSocial use Google map and OpenStreetMap api. To use it, you need to configure.

+ How to configure Google map api key:

1. Login to the admin dashboard
2. Under system admin > system settings > Integration
3. Enter your Google Developer Key code in Google Developer Key field

Screenshot at Mar 14 14-49-39

How to get Google Developer Key?

Click here to know which options you need to select for your google api key

Google already changed the pricing policy, you need to enable billing to be able to use your key. Click here for more details.

+ How to enable OpenStreetMap:

1. Go to admin panel

2. Go to System Settings -> Features. Find “Default map” setting, then select “OpenStreetMap” option -> Save changes

3. All maps at your site will switch to OpenStreetMap. It’s free however it’s a bit slow and sometime the position is not 100% correct.