Social Logins for blog comments

Google Login setup

Before You Start

You will need the following:

1. A Google account
2. Be logged into the Google account you want associated with this social login.
3. Your Limecube settings open ready to paste these details in. Any reference below to placing these details in settings should be applied here. These settings can be found at:
   • Limecube Settings go to: More > Administration > Settings > Blog > Google Login

Step 1 - Create project

1. If it is the first time using this function, you will need to first create a project. Visit the Google Cloud Platform Console.
2. Give your project a name, e.g. ‘Limecube login’

Step 2 - Configure the consent screen

1. On the left sidebar click ‘OAuth consent screen’
2. On the right side main panel ‘User Type’, choose ‘External’ and click Create to go to the next screen
3. Select the Web application application type.
4. In the Application name field give your ‘application name’ a name that makes sense. E.g. ‘Limecube social login’
5. Scroll down to ‘Authorized domains, and place your domain name into this field.
   1. If you wish to test the login button before you make your site live by connecting your domain name, add your domain as well as: limecube.co’. (So you will then have 2 entries for ‘Authorized domains.)
6. Add your Application Privacy Policy link
7. Add your Application Terms of Service link (Optional)
8. Click save

Step 3 - Create credentials

1. Go to ‘Credentials’ in the left sidebar.
2. Click ‘Create credentials’ at the top of the page
   
3. Choose ‘OAuth client ID’.
4. Application type: Select ‘Web application’
5. Name your ‘OAuth 2.0 client’
6. Add your domain name to ‘Authorized JavaScript origins’
7. Click Create
8. You should at this step have a popup that shows your: ‘Client ID’ and ‘Client secret’. Copy and paste these credentials to your Limecube settings. To find these settings go to:
   1. Limecube Settings go to: More > Settings > Blog > Google Login
9. Next click ‘Ok’

Facebook Login setup

Before You Start

You will need the following:

1. A personal Facebook account
2. A Facebook Developer Account.
3. A registered Facebook App with Basic Settings configured:
4. Your Limecube settings open ready to paste these details in. Any reference below to placing these details in settings should be applied here. These settings can be found at:
   • Limecube Settings go to: More > Administration > Settings > Blog > Facebook Login

Step 1 - Create app

1. Go to: https://developers.facebook.com/apps/, and click on ‘Get Started’.
2. If this is not your first time setting up the Facebook Developer app, you can skip to step 3. If this is the first time setting up the Facebook Developer account, it will prompt you to set up the developers account first. Simply follow the registration steps to create your account. Then on the last screen, click the ‘Create First App’ button
   
3. If you already had a Facebook Developer account and had setup Facebook apps before, visit ‘My Apps’ from the top of the screen after login, then click ‘Create App’ button in the top right.
4. On the next screen, with the question ‘What do you need your app to do?’, choose ‘Build Connected Experiences’.
   
5. Enter your app display name, e.g. ‘Limecube Login’

Step 2 - Add Products to Your App

1. Once the app has been created, you will need to add a product to your app on the next screen.
2. Choose the ‘Facebook Login’ card by clicking ‘Set up
   
   
3. On the next screen, choose ‘WWW’ (web).
4. Enter your site URL and click save.
5. Your app has already been created by now, you.do not need to click on the continue button to go through the other steps on this screen. Please continue with Step 3 below

Step 3 - Facebook app secret

1. Click ‘Settings > Basic’ in the left side menu
2. On the top row you’ll see the field for:
   1. ‘App ID’
   2. ‘App secret’ - Click show
3. Copy and paste these credentials to your Limecube settings. To find these settings go to:
   1. Limecube Settings go to: More > Settings > Blog > Facebook Login
4. Copy and paste the App ID to Facebook application id, and then copy and paste the App Secret to Facebook app secret. Then click Save all button on top:
5. Come back to the same screen on Facebook, please also fill in your websites:
   1. App domain
   2. Privacy Policy URL
   3. Terms of Service URL
   4. User Data Deletion (Data Deletion Callback URL)
   5. Then click Save Changes.
6. One last step, click on the toggle next to the label ‘in development’ on the top of the screen to switch your app to live. If you do not your login will not fully work.
   1. It will required you to choose a category in the popup, then click ‘Switch mode’
   2. Now your app is live, and you should be able to use Facebook login on your blog comments.
      

Testing

1. Each login button you setup works, and logs you in without any errors. If you encounter any errors, these will be due to the settings on either Google or Facebook
2. A comment can be submitted and appears on the blog post (or shows as admin approval required and sits in your admin screen waiting for approval