{"id":2994,"date":"2022-12-13T13:25:12","date_gmt":"2022-12-13T13:25:12","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2994"},"modified":"2023-06-10T11:33:54","modified_gmt":"2023-06-10T11:33:54","slug":"how-to-add-social-login-to-wordpress-the-easy-way","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/how-to-add-social-login-to-wordpress-the-easy-way\/","title":{"rendered":"How To Add Social Login To WordPress (The Easy Way)"},"content":{"rendered":"

Rengga Dev<\/strong><\/span><\/a> – Do you want to add social logins to your WordPress website?<\/p>\n

Social logins allow visitors to create an account with your WordPress website by using their existing social media accounts. Instead of creating a new username or password, users can simply login with Facebook, Google, or another platform. This saves them time, reduces friction, and still get you access to their name \/ email address for future marketing purposes.<\/p>\n

In this article, we will show you how you can add social login to WordPress.<\/p>\n

Why \u200b\u200bAdd Social Login To WordPress?<\/strong><\/h2>\n

There are many reasons why you may want to\u00a0allow user registration\u00a0on your WordPress website. If you\u2019re running an\u00a0online store, then user registration allows shoppers to save their payment and delivery information. This makes it easier for them to buy again in the future.<\/p>\n

User registration is also an important part of\u00a0creating a WordPress membership site.<\/p>\n

However, most people don\u2019t like filling out long user registration forms and remember yet another username \/ password.<\/p>\n

Social logins let visitors create an account with your website just by clicking a button. They can use the username and password from their existing social media accounts, such as their Facebook login details.<\/p>\n

Since it\u2019s so convenient, social login can encourage more people to register with your website. With that being said, let\u2019s see how you can add social login to WordPress.<\/p>\n

How To Add Social Login To WordPress<\/strong><\/h2>\n

The easiest way to add a front end login to your WordPress website is by using the\u00a0Nextend Social Login and Register<\/a>\u00a0plugin.<\/p>\n

This free plugin lets visitors log in using Facebook, Twitter, or Google.<\/p>\n

Note:<\/strong>\u00a0Want to add social login for a site other than Facebook, Twitter, or Google? There is also a\u00a0Nextend Social Login\u00a0pro version that adds social login for lots of different sites including PayPal, Slack, and TikTok.<\/p>\n

First, you\u2019ll need to install and activate the Nextend plugin. For more details, please see our beginner\u2019s guide on\u00a0how to install a WordPress plugin.<\/p>\n

Upon activation, go to\u00a0Settings \u00bb Nextend Social Login<\/strong>\u00a0in the WordPress admin area. On this screen, you see all the different social login options that you can add to your WordPress site.<\/p>\n

\"Adding<\/figure>\n

The process of adding a social login to your site will vary depending on whether you\u2019re adding Facebook, Twitter, or Google login.<\/p>\n

Let\u2019s look at\u00a0Facebook\u00a0as an example.<\/p>\n

To add Facebook login to your WordPress website, click on the \u2018Getting Started\u2019 button under the Facebook logo.<\/p>\n

At this point, you may get a warning that Facebook only allows HTTPS OAuth Redirects. This means your site must be using HTTPS before you can add Facebook login to WordPress. To set it up, see our guide on\u00a0how to switch from HTTP to HTTPS in WordPress.<\/p>\n

Once you\u2019re using HTTPs, your next task is creating a Facebook app. This allows you to create an App Key and App Secret, which you\u2019ll add to the Nextend plugin.<\/p>\n

Creating a Facebook app sounds technical, but don\u2019t worry. You don\u2019t need to know any code, and we\u2019ll walk you through all the steps.<\/p>\n

To create this app, you\u2019ll need to switch between your WordPress dashboard and the\u00a0Facebook Developers<\/a>\u00a0website. With that in mind, it\u2019s a good idea to leave your WordPress dashboard open in the current tab and visit the Facebook Developers in a new tab.<\/p>\n

In your Facebook Developers tab, simply click on the \u2018Create App\u2019 button.<\/p>\n

\"The<\/figure>\n

You can now choose an app type. Since we want to add social login to WordPress, go ahead and click on \u2018Consumer.\u2019<\/p>\n

After that, scroll to the bottom of the screen and click on the \u2018Next\u2019 button.<\/p>\n

\"Adding<\/figure>\n

In the \u2018Display name\u2019 field, type in the name that you want to use for the Facebook app. This name will be shown to visitors, so you\u2019ll want to use something they\u2019ll recognize such as the name of your\u00a0WordPress website.<\/p>\n

Next, type your email address into the \u2018App contact email\u2019 field.<\/p>\n

This is the address that Facebook will use to warn you about potential policy violations and app restrictions, or share information about how you can recover a deleted account. With that in mind, you\u2019ll want to type in an\u00a0email address\u00a0that you check regularly.<\/p>\n

\"Creating<\/figure>\n

If you have multiple Facebook pages, then you may have created a Facebook Business Manager account. This lets you give team members full or partial access to your Facebook pages without sharing your login details.<\/p>\n

If you\u2019ve created a Facebook Business Manager account, then you can connect your new app to your manager account by opening the \u2018Business Account\u2019 dropdown. Then, simply choose an account manager from the dropdown menu.<\/p>\n

If you don\u2019t have a Facebook Business Manager, then you can simply leave this dropdown set to \u2018No Business Manager account selected,\u2019 which is the default setting.<\/p>\n

\"The<\/figure>\n

After that, you\u2019re ready to click on the \u2018Create app\u2019 button.<\/p>\n

In the popup that appears, type in the password for your Facebook account and then click on the \u2018Submit\u2019 button.<\/p>\n

You\u2019re now ready to add products to the Facebook app. Go ahead and find the Facebook Login section and then click on the \u2018Set up\u2019 button.<\/p>\n

\"Add<\/figure>\n

Next, simply click on \u2018Web.\u2019<\/p>\n

In the Site URL field, type in your website\u2019s URL.<\/p>\n

\"The<\/figure>\n

To get the right URL, simply switch back to the tab that\u2019s showing your WordPress dashboard.<\/p>\n

This screen has detailed instructions on how to link Nextend to Facebook. This includes showing the exact URL that you should use.<\/p>\n

\"The<\/figure>\n

After typing your site\u2019s URL into the \u2018Site URL\u2019 field, make sure you click on the \u2018Save\u2019 button to save your changes.<\/p>\n

In the left-hand menu, find the \u2018Facebook Login\u2019 section and click on \u2018Settings.\u2019<\/p>\n

\"The<\/figure>\n

On this screen, you\u2019ll need to paste a \u200b\u200bvalid oAuth redirect. To get this value, just switch back to your WordPress tab.<\/p>\n

These instructions include a URL that\u2019s labelled as the \u2018Valid OAuth redirect URIs.\u2019 You can go ahead and copy this URL.<\/p>\n

\"The<\/figure>\n

Next, switch back to the Facebook Developer website and paste the URL into the \u2018Valid OAuth Redirect URIs\u2019 field.<\/p>\n

After that, you\u2019re ready to click on the \u2018Save changes\u2019 button at the bottom.<\/p>\n

\"Adding<\/figure>\n

In the left-hand menu, click on\u00a0Settings \u00bb Basic<\/strong>.<\/p>\n

In \u2018App domain,\u2019 type in your site\u2019s\u00a0domain name.<\/p>\n

\"Configuring<\/figure>\n

In the Privacy Policy URL field, you\u2019ll need to type in the address of your website\u2019s privacy policy. This privacy policy should disclose the information you collect from visitors and how you plan to use that data, including any information you get from social logins.<\/p>\n

If you need help creating this important page, then please see our guide on\u00a0how to add a privacy policy in WordPress.<\/p>\n

\"Creating<\/figure>\n

To comply with\u00a0GDPR, you must give users a way to delete their account on your website.<\/p>\n

There are lots of ways that you can\u00a0allow users to delete their WordPress accounts, but you should always share these instructions with your visitors.<\/p>\n

To help users find this information, click on the \u2018User Data Deletion\u2019 section, and then choose \u2018Data Deletion Instructions URL\u2019 from the dropdown menu.<\/p>\n

You can then type in, or copy\/paste the URL where visitors can find information on how to delete their account. For example, you might add the instructions to your privacy policy or FAQ page.<\/p>\n

\"Configuring<\/figure>\n

Once you\u2019ve done that, open the \u2018Category\u2019 dropdown menu and choose the category that best represents how you plan to use social login on your WordPress website.<\/p>\n

For example, if you\u2019re adding Facebook login to your\u00a0WooCommerce\u00a0store, then you\u2019ll typically want to click on the \u2018Shopping\u2019 category.<\/p>\n

\"Choosing<\/figure>\n

Once you\u2019ve done that, the next step is choosing an App Icon. This icon will represent your app in the App Center, which is an area of Facebook where users can find new applications.<\/p>\n

This isn\u2019t particularly important for our app, but it\u2019s a requirement so you\u2019ll still need to create an app icon.<\/p>\n

Your app icon must be between 512 x 512 and \u200b\u200b1024 x 1024 pixels, and it must have a transparent background. When creating this icon, you can\u2019t use any variations of Facebook\u2019s logos, trademarks, or icons including its WhatsApp, Oculus, and Instagram brands.<\/p>\n

You also can\u2019t include any \u2018Facebook\u2019 or \u2018FB\u2019 text.<\/p>\n

If you don\u2019t already have one, then you can easily create a professional-looking Facebook app icon using a\u00a0logo maker.<\/p>\n

Once you\u2019ve created an app icon, click on the \u2018App Icon\u2019 section and then choose the image file that you want to use.<\/p>\n

\"Adding<\/figure>\n

After all that, click on the Save Changes button.<\/p>\n

Your Facebook app is set to private by default. This means you\u2019re the only person who can log in using Facebook.<\/p>\n

Before your visitors can create an account using Facebook, you\u2019ll need to make your app live. To do this, find the \u2018App Mode: Development\u2019 slider and click on it to turn the slider from white to blue.<\/p>\n

\"Publishing<\/figure>\n

Facebook applications can either have \u2018Standard access\u2019 or \u2018Advanced access\u2019 to the user\u2019s information. If your app has standard access, then visitors won\u2019t be able to log in using Facebook\u2019s social login.<\/p>\n

In the past Facebook has changed its default permission settings, so it\u2019s always worth checking that your app has the right permissions to support social login.<\/p>\n

In the left-hand menu, click on\u00a0App Review \u00bb Permissions and Features<\/strong>.<\/p>\n

\"Configuring<\/figure>\n

Now, find the \u2018email\u2019 and \u2018public_profile\u2019 permissions.<\/p>\n

To support social login, both of these permissions must be marked as \u2018Advanced Access\u2019 and \u2018Ready to Use\u2019 as you can see in the following image.<\/p>\n

\"Facebook's<\/figure>\n

Do you see \u2018Get Advanced Access\u2019 buttons instead? This means that your app currently doesn\u2019t have the right permissions for social login.<\/p>\n

In this case, you\u2019ll need to go ahead and click on the \u2018Get Advanced Access\u2019 button, and then follow the onscreen instructions.<\/p>\n

Once you have the Advanced Access permissions, go ahead and click on\u00a0Settings \u00bb Basic<\/strong>\u00a0in the left-hand menu.<\/p>\n

At the top of the page you\u2019ll see an \u2018App ID\u2019 and \u2018App secret.\u2019<\/p>\n

\"The<\/figure>\n

To reveal the App secret, just click on the \u2018Show\u2019 button and then type in the password for your Facebook account.<\/p>\n

The Facebook Developers website will now update to show your App secret.<\/p>\n

The next step is adding the App secret and App ID to your Nextend plugin. To do this, switch back to the WordPress dashboard.<\/p>\n

Here, click on the \u2018Settings\u2019 tab. You can now paste the ID and secret into the \u2018App ID\u2019 and \u2018App secret\u2019 fields in your WordPress dashboard.<\/p>\n

Once you\u2019ve done that, click on the Save Changes button.<\/p>\n

Before you go any further, it\u2019s a good idea to test that your social login is set up correctly. To do this, simply click on the Verify Settings button.<\/p>\n

\"Verifying<\/figure>\n

This will open a popup where you can type in your Facebook username and password. If you\u2019ve set up the social login correctly, then you should now be logged into your\u00a0WordPress blog.<\/p>\n

Even if your social login is working, Nextend may still warn you that the provider is currently disabled. If you do see this warning, then simply click on the Enable button.<\/p>\n

\"Enabling<\/figure>\n

You\u2019ve now successfully added social login to your WordPress website. The next step is changing how the login button looks and acts on your site.<\/p>\n

To style the social login button, simply click on the \u2018Buttons\u2019 tab. You will now see all the different styles that you can use for the social login button.<\/p>\n

To use a different style, simply click to select its radio button.<\/p>\n

\"Different<\/figure>\n

Once you\u2019ve done that, you can change the text that Nextend shows on this button by editing the \u2018Login label\u2019 text.<\/p>\n

You can also apply some basic formatting to the login label. For example, in the following image we\u2019re applying a bold effect by using <b> and <\/b> HTML tags.<\/p>\n

\"Editing<\/figure>\n

Aside from that, you also have the option to change the text that this button uses for its \u2018Link label.\u2019 This is the text that Nextend shows when the visitor has created an account on your website, but hasn\u2019t linked that account to Facebook.<\/p>\n

You can use the link label to encourage logged-in users to connect their account to various social media profiles.<\/p>\n

To change this text, simply type into the \u2018Link label\u2019 field. Once again, you can use HTML to apply some basic formatting to the label text.<\/p>\n

You should also make it easy for visitors to disconnect their social media profiles from your WordPress website.<\/p>\n

This is where the \u2018Unlink label\u2019 field comes in.<\/p>\n

In this field, you can type in the text that your site will show to logged-in users who have already connected their social account to your website.<\/p>\n

By clicking on this link, users will be able to break the connection between your WordPress website and their social media account.<\/p>\n

These settings should be enough for most websites. However, if you prefer to create a completely custom button, then you can always check the \u2018Use custom button\u2019 box.<\/p>\n

This adds a new section where you can create your own social login button using code.<\/p>\n

\"Creating<\/figure>\n

When you\u2019re happy with how you\u2019ve styled your button, click on the Save Changes button.<\/p>\n

Next, click on the \u2018Usage\u2019 tab. Nextend will now show all the shortcodes that you can use to add the social login button to your WordPress website.<\/p>\n

\"Social<\/figure>\n

These shortcodes can create a range of login buttons. To create a basic login button for Facebook, you would use the following shortcode:<\/p>\n[nextend_social_login provider=\u201dfacebook\u201d]\n

The following image shows an example of how this social login button will look on your site.<\/p>\n

\"A<\/figure>\n

As you can see in the \u2018Usage\u2019 tab, there are a few extra parameters that you can add to your shortcode. This will change how the button looks or acts.<\/p>\n

If you want to create a social login button that doesn\u2019t have a text label, then you can add the \u2018icon\u2019 parameter, for example [nextend_social_login provider=\u201dfacebook\u201d style=\u201dicon\u201d]\n

Here is an example of how this button will look on your WordPress website.<\/p>\n

\"How<\/figure>\n

When a visitor logs into your site using a social account, you can redirect them to a page automatically. This screen has an example shortcode that will redirect users to the Nextend site.<\/p>\n

You can easily customize this shortcode so that it redirects the visitor to a page on your own WordPress website.<\/p>\n

\"A<\/figure>\n

There are a few other parameters that you can add to your shortcode, to see the full list of parameters click on the link in the plugin documentation.<\/p>\n

After deciding what shortcode you want to use, you can add the code to any page, post, or widget ready area. For step by step instructions, see our\u00a0beginner\u2019s guide on how to add a shortcode in WordPress.<\/p>\n

We hope this article helped you learn how to add social login to your WordPress website. You can also go through our guide on the\u00a0best social media plugins for WordPress\u00a0and\u00a0how to track website visitors to your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"

Rengga Dev – Do you want to add social logins to your <\/a><\/p>\n","protected":false},"author":1,"featured_media":4420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,17],"tags":[255,256,136],"newstopic":[595],"class_list":{"0":"post-2994","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-development","8":"category-wordpress","9":"tag-sns-login-wordpress","10":"tag-social-login-wordpress","11":"tag-wordpress-plugin","12":"newstopic-wordpress"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2994","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2994"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2994\/revisions"}],"predecessor-version":[{"id":2996,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2994\/revisions\/2996"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/4420"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2994"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}