{"id":14204,"date":"2020-06-03T14:22:18","date_gmt":"2020-06-03T14:22:18","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=14204"},"modified":"2020-06-03T14:59:48","modified_gmt":"2020-06-03T14:59:48","slug":"how-to-add-social-login-to-your-wordpress-website","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-add-social-login-to-your-wordpress-website\/","title":{"rendered":"How to Add Social Login to your WordPress Website ?"},"content":{"rendered":"\n<p>yeah, this question is so nice because whenever a user come to your wordpress website. he has to put user and password every time but if you will enable the social login then it will easy to every user for every time to login your website in just one click.<\/p>\n\n\n\n<p>So let&#8217;s get started : <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Install a Plugin<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Click on Plugins<\/li><li>Click on Add New button<\/li><li>then search <strong>super socializer<\/strong> to install this plugin<\/li><li>after that click on Install Now Button to install it<\/li><li>then you have to Activate it.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"178\" height=\"153\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/wordpress-add-new-plugin.jpg\" alt=\"\" class=\"wp-image-14205\"\/><figcaption><em>Plugins Menu<\/em><\/figcaption><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/search-super-socializer-plugin-1-1024x444.jpg\" alt=\"\" class=\"wp-image-14207\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/search-super-socializer-plugin-1-1024x444.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/search-super-socializer-plugin-1-300x130.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/search-super-socializer-plugin-1-768x333.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/search-super-socializer-plugin-1.jpg 1136w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Select Plugin<\/em><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"569\" height=\"371\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/activate-plugin.jpg\" alt=\"\" class=\"wp-image-14208\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/activate-plugin.jpg 569w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/activate-plugin-300x196.jpg 300w\" sizes=\"auto, (max-width: 569px) 100vw, 569px\" \/><figcaption><em>Activate Plugin<\/em><\/figcaption><\/figure>\n\n\n\n<p>After installation we can see a new menu called as <strong>Super Socializer<\/strong> which is situated in Left sidebar of wordpress Dashboard.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Enable the Social Login<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>click on Enable Social Login Checkbox<\/li><li>then choose the social network you want to add into your website<\/li><li>if you select google login then you have to arrange Google Client ID and Google Client Secret<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"484\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/enable-google-social-login.jpg\" alt=\"\" class=\"wp-image-14209\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/enable-google-social-login.jpg 784w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/enable-google-social-login-300x185.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/enable-google-social-login-768x474.jpg 768w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 3: Generate Google Client Id using Google Console<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>now open new tab and search <strong>google developer console<\/strong><\/li><li>and login with your email id<\/li><li>after that a dashboard will open<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"829\" height=\"534\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/google-console-admin-dashboard.jpg\" alt=\"\" class=\"wp-image-14210\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/google-console-admin-dashboard.jpg 829w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/google-console-admin-dashboard-300x193.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/google-console-admin-dashboard-768x495.jpg 768w\" sizes=\"auto, (max-width: 829px) 100vw, 829px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>then you have to create a new project under it<\/li><li>click on project name situated at the right sidebar of google console logo<\/li><li>and then click on <strong>New Project<\/strong><\/li><li>Type Project name* <strong>Social login<\/strong><\/li><li>then click on Create Button<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"819\" height=\"217\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/new-project-console-view.jpg\" alt=\"\" class=\"wp-image-14211\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/new-project-console-view.jpg 819w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/new-project-console-view-300x79.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/new-project-console-view-768x203.jpg 768w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/><figcaption><em>New Project Button in Google Console<\/em><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Click on <strong>OAuth consent screen<\/strong><\/li><li>then select External and click on Create Button<\/li><li>then you will see a form after that type Application Name, Enter website Address<\/li><li>Click on save button<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"586\" height=\"459\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/OAuth-consent-screen-view.jpg\" alt=\"\" class=\"wp-image-14212\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/OAuth-consent-screen-view.jpg 586w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/OAuth-consent-screen-view-300x235.jpg 300w\" sizes=\"auto, (max-width: 586px) 100vw, 586px\" \/><figcaption><em>Select External<\/em><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Click on Credentials Menu<\/li><li>then click on <strong>Create Credentials<\/strong> Button and select <strong>OAuth client ID<\/strong><\/li><li>then a form will appear after that select <strong>Web application<\/strong><\/li><li>and then click <strong>Authorized redirect URIs<\/strong> and add your website address<\/li><li>click on create button<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"303\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/create-credentials-screen.jpg\" alt=\"\" class=\"wp-image-14215\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/create-credentials-screen.jpg 660w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/create-credentials-screen-300x138.jpg 300w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"433\" height=\"599\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/create-oauth-client-id-form.jpg\" alt=\"\" class=\"wp-image-14214\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/create-oauth-client-id-form.jpg 433w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/create-oauth-client-id-form-217x300.jpg 217w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/figure><\/div>\n\n\n\n<p>then you will get client ID and Client Secret in a popup view<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"673\" height=\"542\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/oauth-client-secret-n-client-id-generate-view.jpg\" alt=\"\" class=\"wp-image-14216\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/oauth-client-secret-n-client-id-generate-view.jpg 673w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/oauth-client-secret-n-client-id-generate-view-300x242.jpg 300w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/figure>\n\n\n\n<p>then copy the client id and client secret in your wordpress website section. after that save the settings and you will see google icon at your wordpress site.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"357\" height=\"376\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/google-login-button-wordpress-site.jpg\" alt=\"\" class=\"wp-image-14225\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/google-login-button-wordpress-site.jpg 357w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/google-login-button-wordpress-site-285x300.jpg 285w\" sizes=\"auto, (max-width: 357px) 100vw, 357px\" \/><figcaption><em>Google login button view<\/em><\/figcaption><\/figure><\/div>\n\n\n\n<p>References: <\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\"  id=\"_ytid_87199\"  width=\"760\" height=\"427\"  data-origwidth=\"760\" data-origheight=\"427\" src=\"https:\/\/www.youtube.com\/embed\/CQdMKa7C_oo?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  epyt-is-override  no-lazyload\" title=\"YouTube player\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe>\n<\/div><figcaption><em>Watch videos for any confusion<\/em><\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"https:\/\/wpbuffs.com\/integrate-facebook-login\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Integrate Facebook Login<\/a><\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>yeah, this question is so nice because whenever a user come to your wordpress website. he has to put user and password every time but if you will enable the social login then it will easy to every user for every time to login your website in just one click. So let&#8217;s get started :&#8230;<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[2],"tags":[1056,6110,6111,4759],"class_list":["post-14204","post","type-post","status-publish","format-standard","hentry","category-uncategorised","tag-api","tag-facebook-login","tag-google-login","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/14204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=14204"}],"version-history":[{"count":3,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/14204\/revisions"}],"predecessor-version":[{"id":14226,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/14204\/revisions\/14226"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=14204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=14204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=14204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}